Div And Float Gods?

pbd22

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. And, there is a
5px space between the right and left columns?

<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;}

Apr 25 '07 #1

Jim Moe

pbd22 wrote:

>
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. And, there is a
5px space between the right and left columns?

Without knowing what it is you intend to accomplish, why not use a
table? It looks like a table, walks like a table, ....
There are a couple of possibilities to do what you want. The first is to
not float calRight but give it a 30% margin-left and 5px padding-left.
The other option is to float:left calRight and give either it or calLeft
5px margin or padding.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Apr 25 '07 #2

Ben C

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;}

Apr 25 '07 #3