CSS Layout Question.

Mr E

I'm developing a new site and I'm trying to get away from using tables for layout (I'm using CSS layout for the first time). So far so good. I'm trying to achieve something that was easy in tables, but can't figure out how to do it with divs.

The table equivalent is two side by side cells, each 300px wide. Cell 1 is left aligned, cell 2 is right aligned.

In the div layout, I have a container div, and inside I've tried putting 2 divs side by side. Here are the classes:

#frame {
		width:650px;
		margin-right:auto;
		margin-left:auto;
		margin-top:10px;
		padding:0px;
		text-align:left;
		}
#menu {
		border:1px solid;
		padding:5px;
		background:#fff
		width:350px;
		}
#menur {	
		border:1px solid;
		padding:5px;
		width:350px;
		padding:0px;
		text-align:right;
		}

The problem is the #menu class is stretching for the full width of the #frame div, and the #menur is appearing on its own line beneath the #menu div.

Any ideas? Should I be doing it a different way?

colm_c

I'm not exactly sure what you're html is but I would assume it would be something like:

<div id="frame">
  <div id="menu">content</div>
  <div id="menur">other content</div>
</div>

Well to do this you'll need to first of all do your maths 350 + 350 = 700 not 650 which is the width you have declared for the #frame.

Secondly you should add a float: left; to the #menu and float: right; to #menur

Hope this helps

Mr E

Yeah, your HTML is what I have. I had been trying a few things, and just added the widths as I was copying the styles into the snippet above this morning. My math really isn't that bad

I'll give that a go, Colm. Thanks.

banbutcher

hey TmB goto www.bluerobot.com and have a look at the layout resivor, the 3 colum layout is the one you should go for id say!

Mr E

Thanks for the link banbutcher.
Colm - your suggestion sorted it out. The floats fixed it. Thanks again.

colm_c

No problem glad to help ;-)