basic layout help, content in middle, 2 side bars...

[android6011]

basically I want a top title/nav bar,  left side nav bar, some stuff in the middle, and a right side bar and box for stuff to be determined later. I have some div tags using absolute pixel positioning, i did try with margins and such but all the browsers i tried displayed it all differently. is this really the only/best way to do this?

 

/* the top navigation bar only */

#topnav {

background: white;

background-repeat: repeat-x;

width:750px;

height:90px;

border: medium solid #2d2d2d;

border-width: 1px;

overflow: hidden;

left:250px;

position:absolute;

}

/* the main content area   */

 

#body {

color:white;

width:750px;

background: #639447;

border: medium solid black;

border-width: 1px;

left:250px;

top:150px;

position:absolute;

}

/* the side bar */

 

#sidebar{

 

color:white;

width:150px;

height:700px;

background: #639447;

border: medium solid #2d2d2d;

border-width: 1px;

top:18%;

position:absolute;

}

/* the donate box above the adbar */

 

#rightbox{

 

color:white;

width:150px;

background: #639447;

border: medium solid #2d2d2d;

border-width: 1px;

top:18%;

left:1050px;

text-align:center;

position:absolute;

}

/* the ad bar to the right of the body*/

 

#rightbar{

 

color:white;

width:150px;

height:700px;

background: #639470;

border: medium solid #2d2d2d;

border-width: 1px;

top:35%;

left:1050px;

position:absolute;

}

 

[zang8027]

i think i had your problem on my project

 

i wanted to have a 3 column grid in the middle, a div on top, and a div on bottom  so title, left middle right, and bottom. Is that what you mean?

 

I found the best way to do it is to surround everything with a div (i called it #wrapper) and set its width (did mine 760px). Then i floated the three divs left and set their widths (this sucks cause you have to keep in mind the wrapper's size and get each measurment exactly right). I had some problems getting the bottom div to display right because it kept wanting to float left against my right side.

 

 

Moral... try floating the middle columns left... check out the IE conditional statement