On 2007-04-25, pbd22 <du*****@gmail.comwrote:
Hi.
I am learning my way around formatting DIVs
and am stuck. Can somebody tell me how to
format the below so the left column is, say, 30%
wide and the right column is the remainder.
You have to make one 30% and the other 70% to do that. But then you have
to subtract a bit for the borders (width sets the width, not including
margins, padding or borders), and it all gets a bit tricky.
Another approach, since there are only two columns, might be to float
the left one but not the right one, instead giving the right one
margin-left: 30%. Same problem that borders aren't included in that 30%,
but at least the right column won't "drop" if you get it wrong.
The other options are absolute positioning or tables.
And, there is a
5px space between the right and left columns?
Shouldn't be. I'm sure I've read IE sometimes does something like that
though. Are you looking at it in IE?
><div class="calTable">
<div class="calRow">
<div class="calLeft">Cell 1<br>Second line</div>
<div class="calRight">Cell 2</div>
</div>
<div class="calClear"></div>
</div>
.calTable {position:relative; padding-left:10px; padding-right:10px;}
.calRow {clear:both; padding-top:1%;}
.calLeft {float:left;}
.calRight {float:left;}
.calLeft, .calRight {width: 30%; background-color:yellow; border:1px
solid black;}
.calClear {clear: both;}