Clever Geek Handbook

100% 2 Column Height CSS Problem!

I am using layout to create a 2 column web page.

What I cannot do is make it so that both columns in the layout are 100% high, so clicking the footer at the bottom of the page!

What is the best way to achieve this effect?

Thanks in advance!

+2


source to share


8 answers


hopefully this is what you are looking for:



http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm

+2


source


The last time I read about this, the best answer was display: table;

for the main container and display: table-cell;

for each column. This will make the column the height you specify.



#wrap {
  background: orange;
  display: table;
  height: 88%;
  width: 550px;
  padding: 11px;
}
#col1 {
  display:table-cell;
  background: #808080;
  width: 222px;
  border: 1px solid #FFF;
  padding: 12px;
}
#col2 {
  display:table-cell;
  background: #808080;
  width: 111px;
  border: 1px solid #FFF;
  padding: 12px;
}
      

        
        
        
      

    
<!-- this container will determine the height of both columns --> 
<div id="wrap">

  <div id="col1">
    <p>Lorem ipsum something or other.</p>
  </div>

  <div id="col2">
    <p>More Lorem than ipsum.</p>
  </div>

</div>
<!-- end container -->
Run codeHide result


+7


source


Try a different layout, why waste time cracking a cross-browser solution?
This looks like what you want, but I'm sure you can find others: http://www.savio.no/examples/three-column-layout-6.asp

0


source


I am doing the following on my personal site CSS file :

#footer
{width: 100%;
bottom: 0px;
padding-top: .5em;
padding-bottom: .5em;
background-color: #ffffff;
border-top: 1px #000000 solid;
text-align: center;
margin-top: .25em;
}

Also, I have few nested tag capabilities div

. I prefer the elements to float around each other.

0


source


have 2 div tags, each of which is a column floating next to each other, and another div tag to clear the floats, and then another div is the footer:

<div id="col1"></div>
<div id="col2"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
   float:left;
   width:80%;
}
#col2{
   float:right;
   width:20%;
}
.c{
   clear:both;
}
#footer{}
--></style>

It is also easier with this to make it a 3 column.

<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
   float:left;
   width:200px;
}
#col2{
   float:right;
   width:300px;
}
#col3{
   width:400px;
   margin-left:200px;
   margin-right:300px;
}
.c{
   clear:both;
}
#footer{}
--></style>
0


source


Here's another way ...

<div id="container">
    <div id="col1"></div>
    <div id="col2"></div>
</div>
<div id="footer"></div>

<style type="text/css"><!--
    body { height: 100% }
    #container { height: 100% }
    #col1 { height:100%; float:left; width: 70% }
    #col2 { height:100%; float:right; width: 30% }
    #footer { height: 50px; clear: both }
--></style>
0


source


Just done jsfiddle by Matthew James Taylor post . It was very helpful for me. I think it is not a problem to redo for two columns.

<div id="container3">
<div id="container2">
    <div id="container1">
        <div id="col1"><p>Column 1</p>
            <p>Nunc egestas, vut mus hac diam lacus lacus nisi odio,
               turpis dictumst   mattis! Turpis ac ut nec nec et augue, in nec turpis 
               hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,    
               magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus 
               proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est?
               Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum 
               eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut    
               porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc 
               in nec, dictumst 
               pulvinar proin! In nisi pulvinar penatibus lorem nec, tempor porta 
               ultricies, et monte.a asdfjasdjfklasdfasdfljsdfkj</p>
        </div>
        <div id="col2">
            <p>Column 2 </p>
            <p>Nunc egestas, vut mus hac diam lacus lacus nisi odio,
               turpis dictumst   mattis! Turpis ac ut nec nec et augue, in nec turpis 
               hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,    
               magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus 
               proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est?
               Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum 
               eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut    
               porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc                                      
        </div>
        <div id="col3">Column 3</div>
    </div>
</div>

      

        
        
        
      

    

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}​
0


source


Try: overflow:hidden;

on the wrapper. Hope that helps

-1


source






More articles:


All Articles