Problems with padding left

[otuatail]

Hi I am puzzled of some css. I have a web page with 3 divs. A top banner and underneath a left margin which can be extended for side menus and a right div for the content. The left div has a float:left attribute.

 

Margin and PageContent are wrapped by a thebody div. PageContent has a left padding of 12px but only looks like 2px. It seems it is using the left part of the page and not the div itself as a reference.

 

URL: http://www.des-otoole.co.uk/SM3S

 

#PageTitle
{
		    color:blue;
		    height:100px;
		    width:1000px;
		    background-color:blue;
}

#thebody
{
		    height:800px;
		    width:1000px;
}

#margin
{
		    float:left;
		    height:800px;
		    width:10px;
		    background-color:green;
}

#PageContent
{
		    padding-left:12px;
}

 

Cant figure this out.

 

TIA

 

Desmond.

[denno020]

#PageContent will also need to be given a float:left. When using float, you're taking an element out of the 'flow' of the page. So what you say with it seeming like the PageContent is using the left of the page and not the div, that's exactly what's happening . So give #PageContent a float:left also, and make sure you clear the floats straight after the #PageContent div so as to not mess up your footer or anything you have below it.

 

Denno