By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,394 Members | 1,912 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,394 IT Pros & Developers. It's quick & easy.

Div And Float Gods?

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.