Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Two columns with <div> tags

Reply
Thread Tools

Two columns with <div> tags

 
 
Joshua Beall
Guest
Posts: n/a
 
      04-07-2004
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?


 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      04-07-2004
"Joshua Beall" <(E-Mail Removed)> wrote:

>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

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
 
 
 
Joshua Beall
Guest
Posts: n/a
 
      04-07-2004
"Steve Pugh" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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
for my <div>'s might drop below 5px.

> 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?


 
Reply With Quote
 
Kris
Guest
Posts: n/a
 
      04-07-2004
In article <(E-Mail Removed)>,
Steve Pugh <(E-Mail Removed)> wrote:

> 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!

--
Kris
<(E-Mail Removed)> (nl)
<http://www.cinnamon.nl/>
 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      04-07-2004
"Joshua Beall" <(E-Mail Removed)> wrote:
>"Steve Pugh" <(E-Mail Removed)> wrote in message
>news:(E-Mail Removed).. .
>> 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?


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.

>> 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?


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

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
Joshua Beall
Guest
Posts: n/a
 
      04-07-2004
"Steve Pugh" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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


 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      04-07-2004

"Joshua Beall" <(E-Mail Removed)> wrote in message
news:gc_cc.10483$(E-Mail Removed)...
> 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.


 
Reply With Quote
 
Bob Long
Guest
Posts: n/a
 
      04-08-2004
In news:dz_cc.10607$(E-Mail Removed),
Joshua Beall <(E-Mail Removed)> typed:
> "Steve Pugh" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > 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?


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

Bob Long


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Align table columns with gridview columns Jacksm ASP .Net 2 11-21-2006 09:49 PM
Read CSV - string Columns - Int columns =?Utf-8?B?YmVub2l0?= ASP .Net 0 05-08-2006 02:11 PM
database columns vs. gui columns and sorting ittay.dror@gmail.com Java 5 03-04-2006 10:48 AM
CSS columns problem - faux columns don't work henrybranson@hotmail.com HTML 4 11-24-2005 10:05 AM
convert rows to columns and columns to rows helpful sql ASP .Net 0 05-19-2005 06:03 PM



Advertisments