Two columns with <div> tags

[Joshua Beall]

Hi All,

I have two columns, floated left and right, like so:

<div style="float: left; width: 50%;">
Lorem ipsum
</div>
<div style="float: right; width: 50%;">
dolor sit amet
</div>

Now, this works ok to create two columns, but I run into trouble as soon as
I tried and add padding or margin to either <div>; one column will jump down
below the other. I can compensate for this, to some extent, by changing the
width from 50% to something slightly less, like 48%, but I assume that is
not really how to do this.

What should I be doing, in order to get a two adjacent columns, that will
grow or shrink with the page?

 

[Steve Pugh]

I have two columns, floated left and right, like so:

<div style="float: left; width: 50%;">
Lorem ipsum
</div>
<div style="float: right; width: 50%;">
dolor sit amet
</div>

Now, this works ok to create two columns, but I run into trouble as soon as
I tried and add padding or margin to either <div>; one column will jump down
below the other.

Because 50% + 50% + padding = more than 100%.

I can compensate for this, to some extent, by changing the
width from 50% to something slightly less, like 48%, but I assume that is
not really how to do this.

It's exactly how to do it.

Or, don't set any margins or padding on the column divs, but set them
on other elements. e.g. instead of setting padding, set margins on the
paragraphs inside the divs.

Steve

 

[Joshua Beall]

Because 50% + 50% + padding = more than 100%.

Well, that turns out to be the way things are summed, but in my world, it
should be taking the padding out of the 50% that I assigned. Obviously my
world does not have much clout, eh?


The problem is, if I set the widths to 48%, then that means I have left 2%
for padding. But I want to assign an explicit pixel value for padding, say,
5px. So, everything is all peachy as long as 2% of the width is >= 5px.
But, if the browser window shrinks too much, then 2% of the parent element

Or, don't set any margins or padding on the column divs, but set them
on other elements. e.g. instead of setting padding, set margins on the
paragraphs inside the divs.

This would work, but I had been hoping that I would not have to worry about
an extra level of tags inside those <div>'s. That's a no-go, eh?

 

[Kris]

Or, don't set any margins or padding on the column divs, but set them
on other elements. e.g. instead of setting padding, set margins on the
paragraphs inside the divs.

Which is often why I find HTML4.01 Strict so nice. For a lot of elements
it is required to be more specific:

In HTML4.01 Transitional you could do
<blockquote>
Veni vidi vici
</blockquote>

In HTML4.01 Strict it has to be something like
<blockquote>
<p>
Veni vidi vici
</p>
</blockquote>

All these extra CSS hooks, all for free!

 

[Steve Pugh]

Well, that turns out to be the way things are summed, but in my world, it
should be taking the padding out of the 50% that I assigned. Obviously my
world does not have much clout, eh?

Microsoft agreed with you. IE4 implemented width as being from outside
edge of border. The CSS spec defines width as being the width of the
content (i.e from the inside edge of the padding). This incorrect
behaviour exists in IE5 and 5.5 as well. In IE6 it depends on whether
you trigger standards or quirks mode.

CSS3, if implemented as per the current thinking, will allow authors
to choose between the two models and some browsers already support
this (either via the proposed CSS3 properties or via custom
properties).

The problem is, if I set the widths to 48%, then that means I have left 2%
for padding. But I want to assign an explicit pixel value for padding, say,
5px. So, everything is all peachy as long as 2% of the width is >= 5px.
But, if the browser window shrinks too much, then 2% of the parent element
for my <div>'s might drop below 5px.

Yes, mixing different units can cause problems.

This would work, but I had been hoping that I would not have to worry about
an extra level of tags inside those <div>'s. That's a no-go, eh?

Depending on the content of your divs you probably should have extra
elements in there anyway. If you have headings, lists, paragraphs,
tables, etc. then they should always be marked up with the proper
HTML. So what do you have in your divs that doesn't fall into the
categories covered by the standard HTML elements?

Steve

 

[Joshua Beall]

Depending on the content of your divs you probably should have extra
elements in there anyway. If you have headings, lists, paragraphs,
tables, etc. then they should always be marked up with the proper
HTML. So what do you have in your divs that doesn't fall into the
categories covered by the standard HTML elements?

I did not say I *should* be doing it that way. I was just hoping I could
get away with it ;-)

 

[Richard]

Hi All,

I have two columns, floated left and right, like so:

<div style="float: left; width: 50%;">
Lorem ipsum
</div>
<div style="float: right; width: 50%;">
dolor sit amet
</div>

Now, this works ok to create two columns, but I run into trouble as soon as
I tried and add padding or margin to either <div>; one column will jump down
below the other. I can compensate for this, to some extent, by changing the
width from 50% to something slightly less, like 48%, but I assume that is
not really how to do this.

What should I be doing, in order to get a two adjacent columns, that will
grow or shrink with the page?

If you only want two columns, remove the float:right; as it ain't necessary.
Reduce your percentage so that the two equal just less than 100% or it will
drop down.
Or, set a 3rd division to a defined width and height, and let it hold the
two columns instead of the page.

 

[Bob Long]

In

Well, that turns out to be the way things are summed, but in my
world, it should be taking the padding out of the 50% that I
assigned. Obviously my world does not have much clout, eh?

This may help:
http://www.w3.org/TR/REC-CSS1#formatting-model

Bob Long