Jump to content

Displaying DIV's Side By Side


MoFish

Recommended Posts

hey.

I tend to use tables to arrange my data, however have decided to learn the "new method" using divs. I currently have my page arranged as I would like it, but cant seem to get the "main" div to display side by side with the "navigation" div. could anyone perhaps point me in the correct direction?

[img]http://img190.imageshack.us/img190/9195/divzk8.jpg[/img]

the above screen-shot shows my problem with the main div taking a new line. I would like it in the side by side the navigation div to where the arrow is pointing too.

thanks allot, mofish.  ???

[color=blue]PAGE CODE[/color]

[code]
<body>

<div class="container">
<div class="banner">banner</div>
<div class="navigation">navigation</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>

</body>
[/code]

[color=red]CSS[/color]

[CODE]
<style type="text/css">
.container {
font-family: Verdana;
font-size: x-small;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
color: #000000;
padding:5px;
border: thin solid #000000;
}
.banner {
border: thin solid #999966;
color: #000000;
padding: 5px;
height: 100px;
}
.navigation {
border-style: none solid none solid;
border-width: thin;
border-color: #999966;
color: #000000;
width: 150px;
padding: 5px;
background-color: #E6EEEE;
}
.main {
border-style: none solid none solid;
border-width: thin;
border-color: #999966;
color: #000000;
padding: 5px;
background-color:#BFFFBF;
}

.footer {
border-style: solid;
border-width: thin;
border-color: #999966;
color: #000000;
padding: 5px;
text-align:right;
}

</style>
[/CODE]
Link to comment
Share on other sites

Why are you changing?

Tables are what you should use to display data!

Layout of a page shoudl indeed be developed with block level elements like div. and then css to style/position everything but data IS supposed to be in tables.

Destruction is correct in teh float: left for your nav. But within your main div stick with tables for the data.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.