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,168
    Mentioned
    454 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.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    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
  •