One True Layout Issue - Two column layout

HTML & CSS
1

Hi,

I am unable to figure out why the margin-bottom:-1000px does not shrink the float div. It only shrinks till where the float exists.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Two Column Layout</title>
</head>

<body>    
<div style="width:900px; background-color:#990; overflow:hidden; ">

            <div style="width:400px; background:#9C0;float:left; padding-bottom:1000px;   ">
            
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
            
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.     
            
                         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
            
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.
            </div>

            <div style=" width:400px; margin-left:400px; background-color:#069; padding-bottom:1000px; margin-bottom:-1000px; ">
            
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
            
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.
            
       
            
            </div>
</div>
</body>
</html>
2

Margins do not shrink content, they only change an elements position on screen. Using negative margin-top will shift your entire element further up, but I am not sure what you are trying to do. Can you explain in greater detail?

3

Thanks a lot for responding. what I was trying to do is :
I am working on a two column layout automatic height expansion.

when we give margin-bottom of -1000px to the original div, the enclosing div should move up by 1000px. However, in this case, it does not move up 1000px. It just moves till where the float exists. SO, it moved something less than 1000px.

4

[http://smartstudentscollection.com/two column.html](http://smartstudentscollection.com/two column.html) . please check this link

5

Nice solution Laxman7m. But I had different solution. 1 main div which includes everything inside and two others which are floated left with given widths.

6

Thank you. I do need a clarification on this. Appreciate if you could help me.

7

Sorry for the stupid questions, but you need to clarify a little more. Right now both DIV’s are floated and standing next to each other. Do you want the second column to stretch to be the same height as the first?

8

Hi,

In that method both columns should have the margin-bottom:-1000px otherwise it makes no sense.


<div style="width:900px; background-color:#990; overflow:hidden; ">
    <div style="width:400px; background:#9C0;float:left; padding-bottom:1000px;[B]margin-bottom:-1000px;[/B]  "> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.

Now both columns will equalise because the padding will show only when the container is stretched. If you don’t negate the padding bottom on both columns using the negative margin then the technique is worthless because all you get is one column with a 1000px of padding tacked on at the end.

That method is a very dangerous method to use other than for very small columns because it means that yuu cannot have any in-page links which is pretty unlikely on most pages. If you click to an in page link then all the content above the link scrolls out of the top of the container and is hidden forever. This is the reason that everyone stopped using this method (although it was quite clever).

There are more solid ways of getting equal columns, or by using a background image [URL=“http://www.pmob.co.uk/temp/3col-basic-example2.htm”]like this.

Or your code converted to the negative margin float example.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Two Column Layout</title>
</head>
<body>
<div style="width:900px; background-color:#069;border:1px solid #000;overflow:hidden;margin:auto; ">
    <div style="width:400px; background:#9C0;float:left;">
        <div style="width:400px; margin-right:-400px;float:right;position:relative;display:inline;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
            
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leox. </div>
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
            
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.     
            
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
            
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.</div>
    </div>
</div>
</body>
</html>

(Inline styles for example only.)

9

The second one ( to the right - blue) is not floated. when I give margin-bottom:-1000px to this div , what I expect is the bottom edge should move up by 1000px. However, it does not move up 1000px.It moves up only till where the floated div bottom edge is there.ie less than 1000px

10

please check the screensnap attached. when I give margin-bottom: -1000px to the blue div, I expected it to move by 1000px(red arrow). However it moves until the floated div bottom edge(indicated by black arrow).

11

Hi Paul, Thanks a lot. I do need a clarification which posted earlier.

12

In your example both elements have a 1000px of padding showing at the bottom of each column. The left column is longest and has no negative bottom margin and therefore pushes the outer container down the page by a 100px. The right column has a 100px of padding but also a negative bottom margin but it is much shorter than the left column. This means it will show all its padding because it is not cut off by the overflow:hidden on the parent outer.

The negative margin and the padding bottom will always show unless the parent is is set to overflow:hidden and that the inner elements poke out in some way. If your left column stretches for further than the right column + padding then it will never be cut off and will just show as normal.

13

try to check the result when there is no margin-bottom : -1000px on the right. Please find the screensnap attached in the above post. I expect it to move up 1000px(indicated by red arrow). However, it moves only till where the float bottom edge is situated. why is that?

14

Hi,

I think my previous reply explain this but I’ll use your image to explain what’s going on again.:slight_smile:

The black arrow shows the correct position as I would expect because it is showing a full 1000px padding. The negative margin-bottom you applied to it would allow following content to approach over the background but the background will still be visible because there is nothing to hide the overflow.

The 1000px padding on the left column is holding the div open by 1000px too much and therefore the right column will never have its overflow hidden. You need to put a negative margin of 1000px on the left column so that the outer container rests at the bottom of the longest column.

Your red arrow is irrelevant and has no bearing on the procedure because the bottom of the text is not the bottom of that left floated column. The bottom is 1000px below that text where you added the padding.

Hope that makes it clearer :slight_smile:

15

“The negative margin-bottom you applied to it would allow following content to approach over the background but the background will still be visible because there is nothing to hide the overflow.” —

can you elaborate on this.

16

The result will be visually the same when there is no margin-bottom on the right because the negative margin on the bottom doesn’t shorten the background by 1000px. It drags content towards it by 1000px instead.

If you were to add a div after the right column you will see that with the negative margin the div is pulled up but without it it sits under the padding on that right div.

e.g.


<div style=" width:400px; margin-left:400px; background-color:red; [B]padding-bottom:1000px; ">[/B] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
        
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo. </div>
       [B] <div>testing</div>[/B]

Now try it with the margin-bottom ot see what’s happening.

The negative margin doesn’t make the div a 1000px smaller. If it did then the 1000px padding and the 1000px negative margin would cancel each other out wouldn’t they and there would be no point in adding them.

The technique required that the column extends through the bottom of a parent outer which has been set to overflow hidden and then box model calculations come into play and any content that sticks outside of the parent container will be clipped.

In your example the right column never gets to be outside the parent container and thus nothing is clipped.

As I said at the start the technique relies on both columns having the negative bottom margin so that the container can shrink wrap the longest column and the effect completed.

17

Thank you so much Paul. Really appreciate your patience in helping me understand. :slight_smile:

18

It can be confusing I agree especially where margins are concerned.

Here is a smaller demo that may help you to see what’s going on:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrap {
    width:400px;
    background:red;
    padding-bottom:200px;
    margin:0 auto -100px;
}
.follow {
    width:300px;
    margin:auto;
    background:blue;
    position:relative
}
</style>
</head>
<body>
<div class="wrap">
    <p>Some content text Some content text Some content text Some content text Some content text Some content text Some content text Some content text Some content text Some content text </p>
</div>
<div class="follow">Following content dragged up by 100px</div>
</div>
</body>
</html>

The same effect applies to a parent outer and the bottom edge of the parent outer is dragged upwards by 100px. If you then set overflow:hidden to the parent outer then then some of the red background disappears because it is outside the parent.

Here we show the outers bottom border being dragged up by 100px.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p{margin:0 0 1em}
.outer {
    width:500px;
    margin:auto;
    border:5px solid green;
}
.wrap {
    width:400px;
    background:red;
    padding-bottom:200px;
    margin:0 auto -100px;
    
}

</style>
</head>
<body>
<div class="outer">
    <div class="wrap">
        <p>Some content text Some content text Some content text Some content text Some content text Some content text Some content text Some content text Some content text Some content text </p>
    </div>
</div>
</body>
</html>

Now if we apply overflow:hidden to the outer the red box is cut short.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p{margin:0 0 1em}
.outer {
    width:500px;
    margin:auto;
    border:5px solid green;
   [B] overflow:hidden;[/B]
}
.wrap {
    width:400px;
    background:red;
    padding-bottom:200px;
    margin:0 auto -100px;
    
}

</style>
</head>
<body>
<div class="outer">
    <div class="wrap">
        <p>Some content text Some content text Some content text Some content text Some content text Some content text Some content text Some content text Some content text Some content text </p>
    </div>
</div>
</body>
</html>
19

Thanks a lot paul.