467,910 Members | 1,886 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,910 developers. It's quick & easy.

Div And Float Gods?

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
  • viewed: 3051
Share:
2 Replies
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
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.

Similar topics

5 posts views Thread by Pat | last post: by
16 posts views Thread by Gerald Lafreniere | last post: by
6 posts views Thread by Dave win | last post: by
9 posts views Thread by Sisyphus | last post: by
11 posts views Thread by Marc Pelletier | last post: by
20 posts views Thread by ehabaziz2001 | last post: by
8 posts views Thread by vjnr83 | last post: by
13 posts views Thread by Shirsoft | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.