Forum Moderators: not2easy
-------------
¦ ****xx¦xxxx¦
¦ xxxxx¦xxxx¦
¦ xx1xx¦xx2x¦
¦ xxxxx¦xxxx¦
¦ xxxxx¦xxxx¦
-------------
When I'm using this css code:
#1 {
float: right;
clear: none;
width: 648px;
background-color: #ffffff;
margin-left: 3px;
}
#2 {
background-color: cccccc;
float: right;
width: auto;
}
and this xhtml (strict):
<div id="2">
<div>cont.</div>
</div>
<div id="1"> </div>
I recive this:
------------
¦xxxx¦xxxx¦
¦xxxx¦xxxx¦
¦x1xx¦xx2x¦
¦xxxx¦xxxx¦
¦xxxx¦xxxx¦
------------
Why don't you float everything to the left and reposition content?
#1 {
width: 600px;
float: left;
}
#2 {
float: left:
}
<div id="1"> </div>
<div id="2">
<div>cont.</div>
</div>
Or am I way off base here?
So you are trying to have a fixed with div on the left side of the browser with a fluid div floating to the right of it?
Give your right div a fixed pixel width, then use absolute positioning to set the top coordinate and a right coordinate(say 5px).
#right{
position:absolute;
top:0;
right:5px;
width:200px;
}
Then on your left div set the right margin to the width of the right div + a few extra pixels.
#left{
margin-top:0;
margin-right:220px;
}
This will keep the left div fluid and the right div will always be a fixed width.
You could also put a header div above these by simply changing the top coordinate of the right div and margin-top of the left div.
[small]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>
body {
margin:0;
padding:0;
}
#wrapper {
width:100%;
float:left;
margin-right:-180px;
}
#content {
margin-right:180px;
background:#DDD;
}
#nav {
width:170px;
float:right;
background:#AAA;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1>content</h1>
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
</div>
</div>
<div id="nav">
<h1>nav</h1>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
</div>
</body>
</html>[/small]
Bill: Nice but not perfect - on IE OK, on Opera OK but not on Mozilla Firefox 0.8 :
<snip>
Anyway thanks for your time.
[edited by: SuzyUK at 1:13 am (utc) on June 8, 2004]
[edit reason] URL - dead link... [/edit]
>> Nice but not perfect ...
actually Sizix.. the code that Bill posted is the hottest, newest, closest to perfect 2 column layout technique around at the minute... and I'm sure we'll be seeing more of it around... ;)
I have tested it extensively and it's very stable crossbrowser.
What's not to like:
The top and bottom "gaps" that you see in Moz are due to collapsing margins on the internal elements. To lose these either set the margins on internal <h#> <p>etc.. elements to 0 then control any spacing with padding or (possibly easiest) put a 1px border at the top of the content div..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>
html, body {
margin:0;
padding:0;
}#wrapper {
width:100%;
float:left;
margin-right:-180px;
}#content {
margin-right:180px;
background: #ddd;
padding-bottom: 20px;
border-top: 1px solid lime; /* to stop collapsing margins in Moz */
}#nav {
width: 180px;
float: right;
background:#aaa;
}.footer, .header {
background: #eee;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
margin: 0;
clear: both;
width: 100%; /*ie requires this or height */
}</style>
</head>
<body>
<div class="header"><h1>Header text here</h1></div>
<div id="wrapper">
<div id="content">
<h1>content</h1>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse molestaie cillum. Tia non ob ea soluad incommod quae egen ium improb fugiend. Officia deserunt mollit anim id est laborum Et harumd dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda et tam. Neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam is nostrud exercitation ullam mmodo consequet. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent. Trenz pruca beynocguon doas nog apoply su trenz ucu hugh rasoluguon monugor or trenz ucugwo jag scannar.</p>
</div>
</div><div id="nav">
<h1>sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua......</p>
</div><div class="footer"><p>Footer text here</p></div>
</body>
</html>
I put the border in lime just to show it but just make it the same colour as the content background...
Suzy
Note: to swap the sidebar from right to left.. just swap the floats and margins on the wrapper and content divs in the CSS.
#wrapper {
width:100%;
float: right; /* swap */
margin-left:-180px; /* swap */
}#content {
margin-left: 180px; /* swap */
background: #ddd;
border-top: 1px solid lime; /* to stop collapsing margins in Moz */
}
Suzy
