noob trouble with css

S

sdsd

Can anyone please let me know how I can make the "main_left" div
expand to the remaining space after "main_right" occupies the right
220px. I have tried different combinations but the "main_left" drops
down below "main_right".

Many thanks in advance.
......................................................
<head>
<style type="text/css">

/* Main Layout */
#main {
width: 95%;
border: 2px solid #CCC;
margin: 10px auto 0;
padding: 10px;
}
#main_left {width: 545px; border: 1px solid #ccc;}
#main_right {width: 220px; border: 1px solid #ccc;}

/* Floats */
..left {float: left;}
..right {float: right;}

</style>
</head>
<body>

<div id="main">
<div class="left" id="main_left">

Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus.
Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam

</div>
<div class="right" id="main_right">

efgh

</div>
<div class="clearer">&nbsp;</div>
</div>


</body>
</html>
 
D

dorayme

sdsd said:
#main {
width: 95%;
border: 2px solid #CCC;
margin: 10px auto 0;
padding: 10px;
}
#main_left {width: 545px; border: 1px solid #ccc;}
#main_right {width: 220px; border: 1px solid #ccc;}

/* Floats */
.left {float: left;}
.right {float: right;}
<div id="main">
<div class="left" id="main_left">
Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus.
Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam
</div>
<div class="right" id="main_right">efgh</div>
<div class="clearer">&nbsp;</div>
</div>

You cannot expect a percentage specified main (in relation to - most
likely - browser viewport width) to relate well to the px widthed
"internal" divs. If you use a consistent unit, you will get a better
result. Best is generally % or em. But here is in px:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<style type="text/css">

/* Main Layout */
#main {
width: 800px;
border: 2px solid #CCC;
margin: 10px auto 0;
padding: 10px;
overflow: hidden;
}
#main_left {width: 545px; border: 1px solid #ccc;}
#main_right {width: 220px; border: 1px solid #ccc;}

/* Floats */
..left {float: left;}
..right {float: right;}
</style>
<title></title>
</head>
<body>
<div id="main">
<div class="left" id="main_left">
Aliquam risus justo, mollis in, laoreet a, consectetuer nec,
risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam
</div>
<div class="right" id="main_right">
efgh
</div>
<div class="clearer">
&nbsp;
</div>
</div>
</body>
</html>

I add overflow, in case you want the main to "cover" the floats. You can
also use a clearing div to achieve this effect (and which works in IE6
unlike overflow).
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top