3

I am trying to create a two column webpage. The both columns have dynamic height, but I want both of them to extend 100% of the page.

What I mean is if you have a page

+------------------------+
|  Header                |
+------------------------+
| Col1        |  Col2    |
|             |          |
|             |          |
|             |          |
+-------------+----------+
|    footer              |
+------------------------+

I want as you see above both columns to extend the entire height of the page.

Right now I have

<div id="main">
  <div id="col1"></div>
  <div id="col2"></div>
</div>

#col1 {float: left;}
#col2 {float: right;}

The issue is no matter what I try the only way I can have a column grow in height is by using a static number

#col2 {
  float: right;}
  height: 100px;
}

This does not work because the content is dynamic.

I have tried changing the floats and putting clears all over the place but no matter what I do my page ends up looking like this

+------------------------+
|  Header                |
+------------------------+
| Col1        |  Col2    |
|             |          |
|             |          |
|             +----------+
|             |          |
|             |          |
|             |          |
+-------------+----------+
|    footer              |
+------------------------+

Where column two is shorter than column one.

How do you have two side by side columns that extend the height of a page?

edit

I have gone threw and tried all the suggestions with no fruition. I want to add something. If there is a better way to do this without floats I am willing as well. For instance relative position. the only issue is the main div must be centered in the body which I cannot seem to get working with absolutes.

austinbv
  • 9,297
  • 6
  • 50
  • 82
  • I'm still curious and lost about why it needs to be _real_ full height. If it looks the same and only difference is viewable only in code.. Whats the hassle about? Of course real full height is flexible.. But you never gave reason for it so..? – Joonas Jul 18 '11 at 18:23
  • One column contained a div with info and one a canvas as the canvas grew and shrunk the div needed to as well. I don't really know why a -1 was necessary just because I didn't give explanation, the fact that explication was not give should not be need to help with the question. Instead I asked because I know all these silly short cuts for background images, that was not what I was looking for in this case and because of that I didn't use it. – austinbv Jul 18 '11 at 19:09
  • Well.. i cant say anything about that as i didnt give you minus points for your question.. I was just wondering why it was necessary to _really_ be full height. To be honest i still kinda dont understand why.. I mean, if it looks like its full height and the background stretches.. there should be no problem left. I think there should be at least couple good answers here. Of course i am talking from my own answers behalf as well.. :) – Joonas Jul 18 '11 at 19:15
  • 1. The reason people want an explanation is because it determines how to answer the Q. The true answer is - what you want cannot be done, there are only work arounds (the accepted answer being one of them, Faux columns being another). The method to use depends on what you want? Dynamic height? Dynamic width? etc. – chris Jul 21 '11 at 16:20

6 Answers6

2

I have a solution for you. Live example: http://jsfiddle.net/Qbdab/

HTML:

<div id="header">
</div>
<div class="colmask doublepage">
    <div class="colleft">
        <div class="col1">
        </div>
        <div class="col2">
        </div>
    </div>
</div>
<div id="footer">
</div>

CSS:

#header {
    background: lightgreen;
    clear:both;
    float:left;
    width:100%;
}
.colmask {
    clear:both;
    float:left;
    width:100%;            
    overflow:hidden;
}
.colleft {
    float:left;
    width:100%;
    position:relative;
}
.col1,.col2{
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
}

.doublepage {
    background: lightblue;   /* right column background colour */
}
.doublepage .colleft {
    right:50%; /* right column width */
    background: salmon; /* left column background colour */
}
.doublepage .col1 {
    width:46%; /* left column content width (column width minus left and right padding) */
    left:52%; /* right column width plus left column left padding */
}
.doublepage .col2 {
    width:46%; /* right column content width (column width minus left and right padding) */
    left:56%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
#footer {
    background: pink;
    clear:both;
    float:left;
    width:100%;
}

I used this http://matthewjamestaylor.com/blog/perfect-2-column-double-page.htm and slimmed it down to its basics whilst also colouring it to make it obvious that it works.

tw16
  • 29,215
  • 7
  • 63
  • 64
0

EDIT: Using just CSS, there isn't a way to auto-size the content container - it expands in height based on its content - unless you are absolutely positioning your elements (which you do not want). There is a CSS work-around that involves using Containers for the backgrounds, and clear columns for the content: 

body {
    margin:0;
    padding:0;
    border:0;
 }

.outerContainer {
    position:relative; 
    clear:both;
    float:left;
    width:100%;
    overflow:hidden;
    backround-color: RIGHT COLUMN COLOR;}

.innerContainer {
    position:relative;
    float:left;
    width:100%;
    right:50%; /* Offsets this by 50% - see explanation */
    background-color: LEFT COLUMN COLOR;}

.leftColumn {
    float:left;
    position:relative;
    left:50%;
    width:50%;
}

.rightColumn {
    float:left;
    position:relative;
    left:50%;
    width:50%;
 }

HTML will be structured: 

div class="outerContainer"
    div class="innerContainer"
       div class="leftColumn"  /div
       div class="rightColumn" /div
    /div
/div

Here is how it works.

The OuterContainer's background will be covered by the innerContainers background - which we offset 50% to the left (by saying right:50%) - thus innerContainer, equal in width to outerContainer but moved 50% left, will cover the Left half of the outerContainer.

The columns are for content. Since they sit inside the inner container, which sits inside the outer container - extending either column will push BOTH containers downward, so it doesn't matter which column's content is longer - they will always appear equal in size.

As is, the code will need adjustment to suit your appearance needs (padding, margins, etc.). Adjust right/leftColumn width for the overall size (but both must total <100% to fit side by side). Adjust the innerContainers 'right' property to move it left and right, effectively changing the size of the columns.

I abstracted this from here, which was hard for me to follow but has more formal descriptions of how the width / left positioning need to be set to account for padding / margin, etc.

The other (easier) solution is to use Faux Columns

chris
  • 2,404
  • 3
  • 27
  • 33
  • Nope I need the columns to both actually be the height of the page not just appear it – austinbv Jul 17 '11 at 14:53
  • Can you elaborate your original post to explain why - this solution solves the question as asked. Specifically, what are you trying to achieve beyond the appearance of the columns that a faux design would not work? – chris Jul 17 '11 at 15:49
  • The question was how to get two columns of equal height. Not how to get two columns that appear to be equal. Your solution only places a fake column divider at the edge of the longer column making it look like the second column also goes to the bottom. This is not going to work if say, they have different background. – austinbv Jul 17 '11 at 16:14
  • The background is determined by the backround-image - the left and right half can be different pattern / color as needed; thus if it is only the background color / image of each column that needs to be the same height, this solution works. If you need, say, the right column to have a bunch of blank space and then a footer, it will not. That was what I was referring to. I think there is another way... will update response. – chris Jul 17 '11 at 16:28
0

suppose you have planty more div tags in your page. for example,

HTML:
<div id="wrapper">
  <div id="header">
     <!-- some code here -->
  </div><!-- end of header -->
  <div id="body">
     <div id="left">
        <!-- some code here -->
     </div>
     <div id="right">
        <!-- some code here -->
     </div>
     <div style="clear:both"></div>
  </div><!-- end of body -->
  <div id="footer">
     <!-- some code here -->
  </div>
</div><!-- end of wrapper -->

CSS:
#wrapper{
  background:#eee;
  width:970px;
  margin:0px auto;
}
#wrapper #body{
  height:auto;
}
#wrapper #body #left{
  widht:70%;
  float:left;
  border:1px solid black;
}
#wrapper #body #right{
  width:auto;
  float:right;
  border:1px solid black;
}

having nested div will lead you to inherit any values from their parent divs.

Tepken Vannkorn
  • 9,648
  • 14
  • 61
  • 86
0

html:add class="col" to each column

#col1 {
    background:lightyellow;
    float:left;
}
#col2 {
    background:lightred;
    float:right;
}
.col {
    width:300px;
    min-height:300px;    /* viewport fillsize height */
    height:100%;    /* autofill wrapper height, intend to stetch the shorter shrinked floated bloock */
}
Kelly Apollo
  • 350
  • 2
  • 14
  • No success I tried setting the class all with an important tag just to be safe and no results. – austinbv Jul 17 '11 at 14:43
  • Sorry, I have mistaken your case. If you just want the presentation layout like this. Take the 'Faux' column as @george says. And if you want the shorter column's element stretched as the wrapper's height, consider about js resolution. – Kelly Apollo Jul 17 '11 at 16:24
0

You can add the following code after your div's to ensure they both clear;

<br clear="all" />

<div id="main">
  <div id="col1"></div>
  <div id="col2"></div>
  <br clear="all" />
</div>

If you wanted to use a css class to clear you could do this;

<br class="clear" />

br.clear {
     clear:both;
     height:0px;
     width:0px;
     margin:0;
     padding:0;
}
Xavier
  • 8,244
  • 18
  • 54
  • 85
  • Tried adding a clear at the bottom a while ago and it had no success but Tried again with the br tag and still got no results – austinbv Jul 17 '11 at 14:45
0

You could try doing it like this: http://jsfiddle.net/Xtw84/1/ ( note that this was done as an example to another question so its not precisely like your structure but im sure you can figure the rest out. )

Something like this is very commonly used. You dont really make the columns full height but just create illusion of it by wrapping all the columns into outer element which holds the background.

Edit: The illusion is what you make it to be http://jsfiddle.net/Xtw84/2/

I did nothing but changed the images to ones that have this dividing style in them.

Joonas
  • 7,227
  • 9
  • 40
  • 65
  • I need both columns to be full height. http://jsfiddle.net/austinbv/enpxH/ show that both are not. Sorry this will not work – austinbv Jul 17 '11 at 14:35
  • @austinbv You need to start thinking like a magician. Check my updated answer. – Joonas Jul 17 '11 at 17:00