CSS Height Question

Discussion in 'CSS' started by le007, Nov 1, 2008.

0
  1. #1
    Can someone please add to my code so that the left, centre and right column down to the bottom of the screen as in 100% height?
    Thanks

    <!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 230px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>


</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>Header<h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> </div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>230px</em></b> </div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b> </div>
</div>

<div id="footer"><a href="http://www.website.com/style/">CSS</a></div>

</div>
</body>
</html>
    Code (markup):
     
    le007, Nov 1, 2008 IP
  2. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I can fix it for only $15 . Pls let me know if you are interested .
    I can fix the equal height problem by fixing the css or add a js script.
     
    justinlorder, Nov 1, 2008 IP
  3. skateme

    skateme Peon

    Messages:
    162
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Just add height: 100%; to each of your divs that you want to extend to the bottom of the page. Sorry Justin, but requesting $15 for a simple problem like this doesn't make any sense..
     
    skateme, Nov 2, 2008 IP
  4. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #4
    Heh Skateme, thanks for the reply - but I tried that and it didn't work :D
     
    le007, Nov 2, 2008 IP
  5. gobbly2100

    gobbly2100 Banned

    Messages:
    906
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #5
    This will fix it . . .

    Add this to your styles at the top:
    
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
    Code (markup):
    and then add the class called clearfix to any div you want to have 100% height.
     
    gobbly2100, Nov 2, 2008 IP
  6. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #6
    Heh gobbly2100, thats superb thanks a million buddy :D
     
    le007, Nov 2, 2008 IP
  7. gobbly2100

    gobbly2100 Banned

    Messages:
    906
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #7
    No problem, glad I could help :)
     
    gobbly2100, Nov 2, 2008 IP
  8. skateme

    skateme Peon

    Messages:
    162
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #8
    lol Sorry Justin! Glad it worked out for you le007
     
    skateme, Nov 2, 2008 IP
  9. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #9
    Cheers Skateme
     
    le007, Nov 3, 2008 IP
  10. mypsdtohtml

    mypsdtohtml Guest

    Messages:
    96
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #10
    The option of height: 1%,
    is the right solution to this HTML CSS
     
    mypsdtohtml, Nov 3, 2008 IP
  11. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Never mind !
    As I know there are at least 3 different ways to solve the problem of equal height, by css, by js scripts .
     
    justinlorder, Nov 4, 2008 IP