CODEWITHSUNDEEP
csshtmlcss-floatheightwidth
W3bGuy
W3bGuy

Reputation: 747

2 column fluid width with 100% height?

Ok, I know similar questions have been asked, but my groveling through Google searches and running through almost all of the stackoverflow questions hasn't helped me with this one yet. I need to have a container div that holds either one OR two columns inside of it. The content is being populated through a CMS and may or may not contain both columns.

The left column will be a nav rail if it exists, while the right column will be primary body copy. So, if there is no nav included, the right column should occupy 100% of the container width. If the nav rail DOES exist, then it needs to eat up say 200px on the left side and push the right primary content over to occupy the remaining width.

The problem I have faced is getting the height to span 100% on the left nav rail if the left nav rail exists.

I hope this makes sense.

The desired result is here: (Since I can't post images yet)

http://www.freeimagehosting.net/uploads/60a01995ae.gif

and when the left nav is not inserted, here:

http://www.freeimagehosting.net/uploads/be5b69e9ec.gif

I got this by specifying the width of the right to eat up the remaining width left over from the 200px left column.

#container {
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
}
#left-col {
    float: left;
    width: 188px;
    background-color: #d7d7d7;
    padding-bottom: 500em;
    margin-bottom: -500em;
}
#right-col {
    float: left;
    width: 722px;
    margin-right: -1px; /* Thank you IE */
    background-color: red;
    padding-bottom: 500em;
    margin-bottom: -500em;
}

<body>
<div id="container">
    <div id="left-col">
        <p>Left Rail Nav</p>
    </div>
    <div id="right-col">
        <p>Primary content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

The problem comes in when I want to keep the width of the right column as 100% in case the left nav is not included. When I add a width of 100% to the content on the right, it drops it to the bottom.

Changing the right column width :

#right-col {
    float: left;
    width: 100%;
    margin-right: -1px; /* Thank you IE */
    background-color: red;
    padding-bottom: 500em;
    margin-bottom: -500em;
}

Like so: http://www.freeimagehosting.net/uploads/fef22741e7.gif

I've got to believe there is a pure CSS way of styling this. I know I could do it with some javascript, but I really want to find a pure solution. Is this not possible?

One would think that floating the divs and applying a height of 100% might work, but obviously not.

Upvotes: 0

Views: 262

Answers (3)

W3bGuy
W3bGuy

Reputation: 747

I thought I would expand on this to ellaborate the answer given by @jeroen . Thanks again @jeroen.

The CSS to get the desired results in all browsers except for IE was to utilize the display: table-cell; as mentioned by @jeroen.

This changed the above CSS to :

#container {
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
}
#left-col {
    width: 188px;
    display: table-cell;
    background-color: #d7d7d7;
}
#right-col {
    display: table-cell;
    background-color: red;
}

The HTML remained the same:

<body>
<div id="container">
    <div id="left-col">
        <p>Left Rail Nav</p>
    </div>
    <div id="right-col">
        <p>Primary content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

In order to get this to play right and look correct in all browsers, I had to add the following in an IE exception:

<!--[if IE]>
    <style type="text/css">
        #left-col { display: block; float: left; width: 188px; }
        #right-col { display: block; float: left; }
    </style>
<![endif]-->

This worked perfectly for what I was after and allowed me to dynamically feed in content without worrying about post doc load DOM manipulation using javascript (jQuery) which I love, but really wanted a cleaner approach for this application. I hope this can help someone else too.

Upvotes: 1

jeroen
jeroen

Reputation: 91744

A possible solution to the problem, is giving both columns display: table-cell and removing the width from the right column (and the margins and paddings from both...).

The problem is that it is not compatible with older versions of IE.

Upvotes: 1

Chris
Chris

Reputation: 3795

Something like: html, body, #container, #left-col, #right-col { height: 100%; } should work.

Upvotes: 0

Related Questions