Stretching middle DIV in 3 column layout

**atokatim** · May 5th, 2012, 01:05 AM

Hello all! I have a question regarding a DIV layout I am working on. The design is for a 3 column layout on the main page of the site. The left side is a fixed with, and the right side is a fixed width. I am needing the middle to fill the area between the 2 other divs. Here is what I have right now :

Code:

<!DOCTYPE html>
<html>
<head>
    <title>MidnightCrowd - Join the Other Crowd</title>
</head>

<style type="text/css">
#html{
    width:100%;
    height:100%;
    padding:0px;
}

body{
    background-color:#000000;
    color:#757575;
    margin:0px;
}

.body_container{
    width:100%;
    height:100%;
    padding:0px;
    min-width:1024px;
}

.head_container{
    width:100%;
    height:115px;
    padding:0px;
    background:url("images/MC-header-fill.jpg") repeat-x;
}

.head_logo{
    float:left;
    display:inline;
    width:369px;
    height:115px;
    padding:0px;
    margin:0px;
    background:url("images/MC-logo-top.jpg") no-repeat;
}

.head_right{
    height:100px;
    margin-top:7px;
    float:left;
    display:inline;
}

.content_container{
    width:100%;
    padding:0px;
    margin:0px;
    background:#252327;
    display:table;
}
.menu_container{
    float:left;
    height:400px;
    display:table-cell;
    width:225px;
    margin-left:10px;
    padding:0px;
    border:0px solid #757575;
    background:#000000;
}

.main_container{
    float:left;
    display:table-cell;
    width:auto;
    /* min-width:400px; */
    padding:10px;
    padding-top:0px;
    background:#000000;
    margin-left:10px;
    margin-right:10px;
    margin-top:4px;
}

.menu_box .menu_head{
    background:url("images/MC-div-header.jpg") repeat-x;
    background-position:top;
    margin:0px;
    padding:5px;
    line-height:25px;
    color:#FFFFFF;
}

.right_container{
    float:right;
    display:table-cell;
    width:225px;
    padding:10px;
}

.footer_container{
    width:100%;
    height:50px;
    padding:0px;
    background:url("images/MC-footer-fill.jpg") repeat-x;
    background-position:top;
}
</style>

<body>
    <div class="body_container">
        <div class="head_container">
            <div class="head_logo"></div>
            <div class="head_right">Header stuff here</div>
            <div style="clear:both;"></div>
        </div>
        <div class="content_container">
            <div class="menu_container">
                <div class="menu_box">
                    <div class="menu_head">
                        Menu Box 1
                    </div>
                    Info Here
                </div>
            </div>
            <div class="right_container">
                <div class="menu_box">
                    Right side menu
                </div>
            </div>
            <div class="main_container">
                <div class="content_box">
                    Some text here
                </div>
                <span style="width:100%;"></span>
            </div>
            <div style="clear:both;"></div>
        </div>
        <div class="footer_container">
            <div class="footer_content">
                Footer information here
            </div>
        </div>
    </div>
</body>

</html>

Any help is greatly appreciated! I am trying to make this fully cross browser compatible...except for IE 6....no one should be using that anymore :p

**DevSign** · June 14th, 2012, 09:35 AM

Here is my very easy solution to your problem, look at what I did and learn from it, if you get stuck, just shout and I'll help.

Code:

<!DOCTYPE html>
<html>
<head>


<style>
body {
    padding:0;
    margin:0;
}


.box {
    width: 200px;
    height: 200px;
    background: yellow;
    float:left;
}


.middle {
    float:left;
    height: 300px;
    background: green;
    position: absolute;
    top:0;
    left:201px;
    right: 201px;
}
</style>


</head>
<body>


<div class="box" style="float:left"></div>
<div class="middle"></div>
<div class="box" style="float:right"></div>


</body>
</html>