SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    filled element with another fixed elment

    i need structure like this:

    A,B and C are DIV element.
    A is container and B is a fixed width element. How can i fill remain width with element C?
    give me the best solution.
    thank you

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Wrap B and C inside A. Put B first inside A, followed by C. Float B to the left. Give C a left margin of around 270px.

    That's how I'd do it.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Here's another method:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #outer {
        padding:14px;
        overflow:hidden;
        zoom:1.0;
        border:2px solid #000;
        min-width:760px;
        background:#fec083;
        margin:auto;
    }
    #sidebar {
        width:236px;
        padding:10px;
        margin:0 14px 0 0;
        border:2px solid #000;
        background:#fff;
        float:left;
    }
    #main {
        overflow:hidden;
        background:#fff;
        border:2px solid #000;
        padding:10px;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="sidebar">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan.</p>
        </div>
        <div id="main">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan.</p>
        </div>
    </div>
    </body>
    </html>

    If you want equal columns as in your drawing then it complicates things if you need to support less than IE8.

    Here's another example:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        margin:0 0 1em
    }
    #outer {
        padding:14px;
        overflow:hidden;
        zoom:1.0;
        border:2px solid #000;
        min-width:660px;
        background:#fec083;
        margin:auto;
    }
    #sidebar {
        width:256px;
        margin:0 14px 0 0;
        float:left;
    }
    #main {
        overflow:hidden;
        zoom:1.0;
    }
    .inner {
        padding:10px;
        z-index:2;
        zoom:1.0;
        position:relative;
        border-top:2px solid #000;
    }
    /* equal columns overlay*/
    #wrap {
        position:relative;
        width:100%;
        overflow:hidden;
    }
    .bg, .bg2 {
        width:252px;
        border:2px solid #000;
        border-top:none;
        background:#f7f6eb;
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        z-index:1;
    }
    .bg2 {
        left:270px;
        right:0;
        width:auto;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    .bg,.bg2{
        top:auto;
        bottom:0;
        height:999em;
    }
    .bg2 span{
        zoom:1.0;
        display:block;
    }
    .bg2{left:273px}/* 3 px jog*/
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="outer">
        <div id="wrap">
            <div id="sidebar">
                <div class="inner">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan.</p>
                </div>
            </div>
            <div id="main">
                <div class="inner">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan.</p>
                </div>
            </div>
            <div class="bg"></div>
            <div class="bg2"><span></span></div>
        </div>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

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