Aligning divs next to each other.

[supermanjnk]

i'm trying to get two divs to line up next to each other, I have a div thats 500 pixels wide. I need to divs one 33% wide, one 67% wide. my current css

______
¦+¦++¦
¦-----¦
¦+¦++¦
¦-----¦
¦+¦++¦
-------
this is basically what it needs to look like, I'd rather not use position:absolute; because then I would have to rework the rest of the layout. Would it be better to use a table for what I want?

[jetboy_70]

Would it be better to use a table for what I want?

Might be. Do you think it's tabular data?

Alternatively, try floats:

div.wrapper {
width: 500px;
position: relative;
clear: both;
}

div.left {
width: 33%;
background: #633;
position: relative;
float: left;
}

div.right {
width: 67%;
background: #336;
position: relative;
float: right;
}

<div class="wrapper">
<div class="left">Left content one</div>
<div class="right">Right content one</div>
</div><!-- wrapper -->
<div class="wrapper">
<div class="left">Left content two</div>
<div class="right">Right content two</div>
</div><!-- wrapper -->
<div class="wrapper">
<div class="left">Left content three</div>
<div class="right">Right content three</div>
</div><!-- wrapper -->

[photon]

Remember that if you're using percentages for widths, you probably don't want them to add up exactly to 100%. Due to how different browsers calculate the actual widths, they could end up totaling just a smidgen over 100%. Then your second div is shoved down in the layout, or you end up with a horizontal scroll bar.

[jetboy_70]

True. If this is going to sit in a 500px width container then there's no real reason to use percentages. Pixel widths will be a lot sturdier.

Edit: Apologies for the background colour choices BTW ;)