percentage width divs

[Diagmato]

Im having alot of trouble with two <div>'s, and css.

This is what i want.

The left div (menu, and future doo-hickeys) is set to be 120 pixels in width:

div.m_left_divide{
		float:left;
		margin-left:0px;
		margin-right:0px;
		border:1px solid;
		border-color:#000000;
		height:100%;
		width:120px;
		background-color:#404040;
		}

This does as expected, but the main content area just wont respect the width of the left div. I want it to be 100% width (100% of the available space) with the left-hand div as it is.

The content's css code:

div.m_main{
		display:inline;
		float:left;
		margin:0px;
		border:1px solid;
		border-color:#000000;
		height:100%;
		width:100%;
		background-color:#404040;
		}

How can i get it to display like in the image? As a general rule, it should display like a table, with <td width="120"> and the second <td width="100%"> (obviously without using a table).

Thanks in advance.

[_jameshales]

Well the problem is probably that, the DIV is told to be 100% in width and it looks for the width of its parent, which here is probably the screen, and sets its width to that, right? So the DIV stretches out of the screen and looks ugly. Well you want then to set the width of the DIV to 100%, minus the 120 of the side thing, so that it doesn't go outside of the page area. Well mixing percentages and pixels in CSS is horrible. Definately do-able, but horrible.

Use something called RelativeLayers. It is a Javascript reliant library, with which you can create Layers (DIVs) that have mixed percentages/pixels, where you could, say, set the width of a layer to have width "100%-120px", with no problems. It's excellent and it's cross-browser, working in all/most popular browsers. It'll take a while to get used to, but it is rewarding, allowing you to position layers exactly how you want them.

_jameshales

[eddmun]

or more simply, you could set the margin-left of the main content area to something about 120px.

edit: there needs to be a float in there somewhere as well - most probably for the navigation doo-hickey.

[4fingers]

Yeah as eddmun says you need a margin-left in their and you can set the width of main to auto. So you should have something like this:

<style type="text/css">
<!--
div.m_left_divide{
		position:absolute;
		margin-left:0px;
		margin-right:0px;
		border:1px solid;
		border-color:#000000;
		height:100px;
		width:120px;
		background-color:#404040;
}
div.m_main{
		margin:0px;
		margin-left:125px;
		border:1px solid;
		border-color:#000000;
		height:100px;
		width:auto;
		background-color:#404040;
}
-->
</style>

[Diagmato]

Thanks - that did it. The position:absolute on the left bar stopped the main section from going underneath the left bar.