CODEWITHSUNDEEP
htmlcsscss-positionfluid-layout
amaranth
amaranth

Reputation: 979

Two columns liquid layout with header and footer

My HTML page with 2 columns and footer and header:

<div id="main">
   <div class="header"> </div>
   <div class="left"> </div>
   <div class="data"> </div>
   <div class="bottom"> </div>
</div>

In my case I want left DIV with auto width and data DIV with 100% width. Like on this image: enter image description here How to CSS with IE 6 support? Thank you!

Upvotes: 1

Views: 6492

Answers (2)

4dgaurav
4dgaurav

Reputation: 11496

Demo

html

<div class="header">
    header content
</div>

<div class="content">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

<div class="footer">
    footer content
</div>

css

body, html{
    padding:0;
    margin:0;
    position:relative;
    height:100%
}
.header, .footer{
    width:100%;
    background:#ccc;
    padding:10px;
    box-sizing:border-box;
}
.content{
    background:#eee;
    width:100%;
    padding:10px;
    height:100%;
    box-sizing:border-box;
    padding:10px;
}
.left{
    width:50%;
    float:left;
    background:#bbb;
    height:100%;
}
.right{
    width:50%;
    float:right;
    background:#aaa;
    height:100%;
}

as required DEMO

css

keeping everything same as above just change below css

.content{
    background:#eee;
    width:100%;
    padding:10px;
    height:100%;
    box-sizing:border-box;
    padding:10px;
    display:table
}
.left{
    width:auto;
    background:#bbb;
    height:100%;
    display:table-cell
}
.right{
    background:#aaa;
    height:100%;
    display:table-cell;
    width:100%
}

Upvotes: 1

Shivam
Shivam

Reputation: 720

It will work i think. Please check and let me know.

.container {
    width: 500px;
    max-height: 500px;
    margin: 10px;
    border: 1px solid #fff;
    background-color: #ffffff;
    box-shadow: 0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.mainbody,
.header,
.footer {
    padding: 5px;
}
.mainbody {
    margin-top: 0;
    min-height: 150px;
    max-height: 388px;
    overflow: auto;
}
.header {
    height: 40px;
    border-bottom: 1px solid #EEE;
    background-color: #ffffff;
    height: 40px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.footer {
    height: 40px;
    background-color: whiteSmoke;
    border-top: 1px solid #DDD;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.left{
width:50%;
float:left;
background:#bbb;
height:100%;
}
.right{
    width:50%;
    float:right;
    background:#aaa;
    height:100%;
}

<div id="container">
    <div class="header">Header</div>
    <div class="mainbody">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">Footer</div>
</div>

Upvotes: 0

Related Questions