The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.

Results 1 to 2 of 2

Thread: Stretching middle DIV in 3 column layout

  1. #1

    Stretching middle DIV in 3 column layout

    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

  2. #2
    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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012