CODEWITHSUNDEEP
htmlcss
user345161
user345161

Reputation: 51

( height 100% ) plus (2-column css)

I need a 2-column interface to stretch 100% height of the page.

PS: If the columns are too long, the scroll bar should appear. After this question is solved, I'll try to add a sticky footer to the interface.

PPS:please, no solutions using "fake" background image

I've really tried hard to find the answer by myself... Thanks if you have any idea

here's the code

    <!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" xml:lang="en-GB">
<head>
    <title>2 Column CSS Demo - Equal Height Columns with Cross-Browser CSS</title>

    <style media="screen" type="text/css">
/* <!-- */
*{
    margin:0;
    padding:0;
}

   html { 
    background-color: #ccc; 
        height: 100%; 
   } 
   body { 
    background-color: white; 
    width: 600px; 
    margin: 0 auto; 
height:100%; 
    position: relative; 
    border-left: 1px solid #888; 
    border-right: 2px solid black; 
   }  

#footer {
    clear:both;
    width:100%;
    height:0px;font-size:0px;
}


#container2 {


    clear:left;
    float:left;
    width:600px;
        overflow:hidden;
    background:#ffa7a7;  
}



#container1 {

    float:left;
    width:600px;
    position:relative;
    right:200px;
    background:#fff689;  
}
#col1 {
    float:left;
    width:400px;
    position:relative;
    left:200px;
        overflow:hidden;
}
#col2 {
    float:left;
    width:200px;
    position:relative;
    left:200px;
        overflow:hidden;
}
/* --> */
    </style>
</head>
<body>

<div id="container2">
    <div id="container1">
        <div id="col1">
            aaaa a a a a a a a a a aa aa a a a a a a a a aa aa a a a a a a a a aa aa a a a a  a a a aa a a a a aa aa a a a a a a a a aa aa a a a a a a a a aa aa a a a a aa a a a a aa aa a
        </div>
        <div id="col2">

            fghdfghsfgddn   fghdfghsfgddn    fghdfghsfgddn  fghdfghsfgddn   fghdfghsfgddn   fghdfghsfgddn   fghdfghsfgddn v
        </div>
    </div>
</div>
<div id="footer">
     &nbsp;
</div>
</body>

Upvotes: 1

Views: 1264

Answers (3)

Kevin
Kevin

Reputation: 5694

It shouldn't be that hard. Please have a look at this piece of code.

<html>
<head>
<title>Columns</title>
</head>
<body>
<style type="text/css">
.wrapper {
    width:1200px;
    margin:0 auto;
}
.col1 {
    width:600px;
    height:100%;
    float:left;
    background:#f00;
}
.col2 {
    width:600px;
    height:100%;
    float:left;
    background:#00f;
}
</style>
<div class="wrapper">
    <div class="col1">
        Column 1
    </div>
    <div class="col2">
        Column 2
    </div>
</div>
</body>
</html>

The .wrapper is just to center the 2 columns.

Upvotes: 2

edl
edl

Reputation: 3214

Did you try inheriting the height from the body on your containers?

IE height:inherit;

Upvotes: 1

nickf
nickf

Reputation: 546075

Depending on the browsers you are targeting, you could use the simplest method of all: CSS3 Columns

.columns {
    -moz-column-count: 2;
    -webkit-column-count: 2;
}

Upvotes: 1

Related Questions