Filled element with another fixed elment

HTML & CSS
1

i need structure like this:

901×487 20.5 KB

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

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. :slight_smile:

3

Here’s another method:


<!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:


<!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>