Page 1 of 1

Two column divs with padding.

Posted: Mon Sep 17, 2007 8:00 pm
by JellyFish
First of all, I'd like to let you know that that I do feel like an idiot for asking this question...

I don't know why but when ever I go to make a two column div layout one with 10px padding things never go as planed.

I have one div on the left like a siderbar. And I have another on the right taking up about 80% of the rest of the page width. But on firefox, when I set the right div's padding to 10px it goes out of the page about 10px making a horizontal scroll bar.

I don't know why but I just never could figure this one out.

A little help here? :banghead:

Posted: Mon Sep 17, 2007 9:36 pm
by Christopher
The width you specify is the width of the content area of the div. The margin is the area of the box outside the border. The padding is the area of the box inside the border -- between the border and the content. So the actual width is the content width plus the widths of the left and right margins, borders and padding. You need to subtract from the full width you want to calculate the width to set.

Posted: Mon Sep 17, 2007 10:48 pm
by JellyFish
arborint wrote:The width you specify is the width of the content area of the div. The margin is the area of the box outside the border. The padding is the area of the box inside the border -- between the border and the content. So the actual width is the content width plus the widths of the left and right margins, borders and padding. You need to subtract from the full width you want to calculate the width to set.
Well, actually, I would like the left div to be fixed 300px and right div to take up the rest of the space. How could I do this? I tried setting the right div's width to 100% and that worked, but then I wanted the 10px padding on the right div yet it just made the size bigger, only on firefox.

How do I make a two column layout with the left being 200px width and the right div's width taking up the rest of the space?

Posted: Tue Sep 18, 2007 1:26 am
by matthijs
It's not a kind of layout I often use so forgive me if I forget some specific issues. But basically it comes down to:

Code: Select all

#sidebar { width: 300px; float:left; }
#content { margin-left:310px; }
There are also methods with negative-margins and of course absolute positioning. Take a look at the CSS layout resources out there, many examples of this kind of layout.

One thing to be aware of is that you should not add both margins, paddings and borders to the columns. That will be asking for (mostly IE) trouble. If you need extra padding or a border for example, set them on a child element

Posted: Thu Sep 20, 2007 6:46 pm
by figaro11
matthijs wrote:It's not a kind of layout I often use so forgive me if I forget some specific issues. But basically it comes down to:

Code: Select all

#sidebar { width: 300px; float:left; }
#content { margin-left:310px; }
There are also methods with negative-margins and of course absolute positioning. Take a look at the CSS layout resources out there, many examples of this kind of layout.

One thing to be aware of is that you should not add both margins, paddings and borders to the columns. That will be asking for (mostly IE) trouble. If you need extra padding or a border for example, set them on a child element
Hi, it's me jellyfish.

This looks good and all but IE6 adds a few pixels more on the right columns left margin. Firefox, opera and IE7 all look the same pixel wise. Why does IE6 have a few pixels more? I wouldn't be asking this question if IE had a firebug, that's obvious and unfortunate.

Posted: Thu Sep 20, 2007 8:02 pm
by JAB Creations
The big secret is to use a container with extra padding and you can adjust the inner margins accordingly. This will work perfectly using valid CSS1 in IE4+, Opera 4+, Gecko 1.0+.

Feel free to message me privately for a private screenshot of my tableless layout in IE4. This is for Preview IV of Version 2.8 of my site and thus is not yet public. The screenshots are not in a directory I want spiders to index.

Posted: Fri Sep 21, 2007 1:23 am
by matthijs
figaro11 wrote: Hi, it's me jellyfish.

This looks good and all but IE6 adds a few pixels more on the right columns left margin. Firefox, opera and IE7 all look the same pixel wise. Why does IE6 have a few pixels more? I wouldn't be asking this question if IE had a firebug, that's obvious and unfortunate.
If IE had a firebug it would explode :)

Kiddin aside, the pixels might have to do something with the 3-pixel-jug-bug. But I would have to see your complete code to be sure.

As I said earlier, beware of using both margins, borders and paddings. Beware of margins and floats in IE anyway. As JAB suggested, setting the needed margin/padding on another element, either another div or the content itself will make it work.

And last: how important is it to have everything pixel-perfect in every browser? It's a trap many developers fall in to, trying to match their layout in each and every browser. But you know what? You are the only one looking at the site with multiple browsers at the same time. Someone using IE6 and visiting your site really doesn't know that the top-margin of that header on the right is 3px larger then the margin in Safari. And he or she probably wouldn't care either .. Besides that, there will also be differences between operating systems, devices (mobile phones), etc which you cannot deal with anyway.

And a browser like IE4? Does anyone still have visitors using that browser? I even stopped "supporting" for IE5 a while ago. Not meaning my websites can't be used in that browser. Just that I'm not going to waist my time fine-tuning pixels for that browser anymore.

So dealing with the obvious bugs is fine, but pulling your hair out for weeks on end for 2px difference ... think about your health :0

Posted: Tue Sep 25, 2007 2:28 am
by figaro11
I see what you're saying. But I'd like firefox to have a three spacing between the two columns and it wouldnt look good if IE have 6!

So here's the site, notice how IE has 3 or 2 pixels spacing.

What's going on here, and please don't tell me there's no way to fix it?

Posted: Tue Sep 25, 2007 2:53 am
by matthijs
Not sure exactly, but it might be the 3px jug bug. Also see http://www.communitymx.com/content/arti ... &cid=C37E0

What I would do is use a background image for the columns. It's called the "faux-collumn" technique. A quick google search will show you many explanations. An advantage of using that technique is that you don't have to give the divs a fixed height anymore to get a full-height background-color.

Or if you don't want that, you could also use a container div, give that the light grey background so that the gap isn't visible anymore.

Posted: Wed Sep 26, 2007 7:39 pm
by figaro11
matthijs wrote:Not sure exactly, but it might be the 3px jug bug. Also see http://www.communitymx.com/content/arti ... &cid=C37E0

What I would do is use a background image for the columns. It's called the "faux-collumn" technique. A quick google search will show you many explanations. An advantage of using that technique is that you don't have to give the divs a fixed height anymore to get a full-height background-color.

Or if you don't want that, you could also use a container div, give that the light grey background so that the gap isn't visible anymore.
How would you make a two column layout like this?

Image

Posted: Wed Sep 26, 2007 10:33 pm
by superdezign
figaro11 wrote:How would you make a two column layout like this?

Image
Just that?

Code: Select all

.column {
border: 1px solid #DDD;
}

#left.column {
float: left;
width: 100px;
}

#right.column {
margin-left: 105px;
}
I haven't followed the post, by the way, but the image got my attention. :P

Posted: Wed Sep 26, 2007 11:09 pm
by figaro11
This is really good. I've been using something like it.

But there's a problem with this:

Code: Select all

<style text="text/css">
.column {
border: 1px solid #DDD;
}

#left.column {
float: left;
width: 100px;
}

#right.column {
margin-left: 105px;
}
</style>

<div id="left" class="column">
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
</div>

<div id="right" class="column">
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
</div>
cause it produces:

Image

. I know what you might be thinking, "Looks fine.", Look closer. You see the extra pixels in IE, in between the two divs? 2 pixels more then firefox, to be exact! How do I get firefox and IE pixel's the same? More importantly, why is there more pixels?

I'm not picky... I'm not... :twisted:






EDIT: Hey looky:

Code: Select all

<style text="text/css"> 
body {
margin: 10px;
}
.column {
background:blue;
}

#left.column {
float: left;
width: 100px;
background:red;
}

#right.column {
margin-left: 103px;
_height: 1%;
_margin-left: 100px;
}
</style>

<div id="left" class="column">
<div>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>

</div>
</div>

<div id="right" class="column">
<div>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
Hello<br/>
</div>
</div>
Paste it here! It displays the same on all most popular browsers! Do you guys agree with this method?

Posted: Thu Sep 27, 2007 2:07 am
by matthijs
You could use the extra space to put in a message, something like: "If you were browsing with a better browser you wouldn't see this".
:)

Your solution technically works. You're hacking for IE. If you go that route, I would at least use conditional comments to feed IE it's own stylesheet. Then you keep your main stylesheet clean. And when it's time to stop supporting IE you just throw away the IE stylesheet.

Or, you could think again about the importance of those 3 pixels. Will anyone notice? Remember, a user browsing with IE doesn't keep FF opened to compare.

Last, there are probably other methods to solve your 3px issue. The faux column technique might, or negative margin layouts, etc

Posted: Thu Sep 27, 2007 4:04 pm
by JAB Creations
Are we still messing around with this?

#left {float: left; width: 20%;}
#right {float: left; width: 80%;}

#left div {margin: 4px;}
#right div {margin: 4px;}

It's that simple.

Don't use border, margins, or padding as they will add to the set width of the parent-most elements. The parent-most elements should only be set to use the percentage of the page worth of width you're going to use. Their child element's are what should add "padding" by instead setting their margins.

The child elements should not have set width or if set set to auto. This takes up 100% of the available width. If you add margins when width is not set or is set to auto then the margins will be subtracted, not added, to the total width of that child element.

Use background colors to give yourself a visual reference. Stop messing around with negative margins for critical layout measurements.