Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

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