Div And Float Gods?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View


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 class="calClear"></div>

.calTable {position:relative; padding-left:10px; padding-right:10px;}
.calRow {clear:both; padding-top:1%;}
.calLeft, .calRight {width: 30%; background-color:yellow; border:1px
solid black;}
.calClear {clear: both;}

Re: Div And Float Gods?

pbd22 wrote:
Quoted text here. Click to load it
  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)

Re: Div And Float Gods?

Quoted text here. Click to load it

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.

Quoted text here. Click to load it

Shouldn't be. I'm sure I've read IE sometimes does something like that
though. Are you looking at it in IE?

Quoted text here. Click to load it

Site Timeline