page layout with CSS

[kevwood]

hi all,

  i am having a problem with getting my divs in the center of the page to look how i want them to.  i have not built a webpage without using the table format as this was how i was taught and i am eventually getting my head round the div and css way of doing things.

 

  i will attach an image of the problem i am having (fig 1) and what i would like it to look like (fig 2) and the code for my divs and page layout.

 

the code for my divs

 

#navigation{
	float : left;
	width : 178px;
border : solid #45bf55;
border-width : 3px;
background-color : #fff;
margin-right : 30px;
}

#advert{
float : right;
padding : 4px;
border : solid #45bf55;
border-width : 3px;
background-color : #FFF;
margin-left : 30px;
vertical-align : middle;
}

#body{
margin-left : 30px;
margin-right : 30px;
}

.body_panel{
overflow : hidden;
height : 200px;
width:auto;
background-color : #FFF;
border : solid #45bf55;
border-width : 3px;
margin-bottom:30px;
}

[Mahngiel]

http://www.barelyfitz.com/screencast/html-training/css/positioning/

 

That is a very informative article on understanding positioning.

[kevwood]

thanks for the link.  i have fixed it by floating the body to the left also.  it is looking good on the screen i am using.

 

here are the changes i made to the code

 

#navigation{
	float : left;
	width : 178px;
border : solid #45bf55;
border-width : 3px;
background-color : #fff;
margin-right : 30px;
}

#advert{
float : right;
padding : 4px;
border : solid #45bf55;
border-width : 3px;
background-color : #FFF;
margin-left : 30px;
vertical-align : middle;
}

#body{
float : left;
}

.body_panel{
overflow : hidden;
height : 200px;
width:auto;
background-color : #FFF;
border : solid #45bf55;
border-width : 3px;
margin-bottom:30px;
}

 

i also used the same technique to position the elements within the body panel.

 

again thank for the link and helping me understand the positioning better.