please view http://mnbayazit.com/misc/sample.gif
i'm wondering how i can make the sidebar (green) float to the right of
the main text, without specifying the width of the main content
(because the sidebar is optional, i need the main content to fill the
space available). ie, the green sidebar should be right up against the
red header.
code below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLENew Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<STYLE>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background: black;
}
#wrap {
width: 700px;
background: white;
margin: auto;
}
#head {
background: red;
}
#foot {
clear: both;
background: blue;
}
#main {
float: left;
}
#side {
background: green;
float: right;
width: 200px;
}
</STYLE>
</HEAD>
<BODY>
<div id="wrap">
<div id="head">
<h1>Title</h1>
</div>
<div id="main">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ut
purus non mauris luctus porttitor. Proin purus. Proin lobortis ligula
vel velit sollicitudin nonummy. Morbi vestibulum, lorem adipiscing
cursus mollis, ante mi sagittis nisl, vitae luctus est arcu at pede.
Vivamus egestas ullamcorper nunc. Nunc condimentum consequat dui.
Aliquam erat volutpat. Aliquam erat volutpat. Donec non turpis. Sed
facilisis. Nullam elementum, nisl sit amet aliquam malesuada, purus
sapien vulputate nibh, sit amet consectetuer ligula neque porttitor
enim.
Vivamus blandit mauris at sapien. Pellentesque tristique mauris a
arcu. In velit pede, consectetuer quis, mollis vel, pellentesque sit
amet, enim. Nunc in est. Vivamus imperdiet, nulla id fermentum blandit,
mauris orci dapibus odio, ut blandit tortor nisl nec eros. Aliquam
malesuada neque eu turpis. Morbi non arcu. Cras faucibus venenatis
nibh. Sed dolor nibh, tempor sit amet, aliquam vel, molestie ut, lacus.
Phasellus luctus. In lorem erat, faucibus porttitor, suscipit eu,
gravida sed, nunc. Aliquam faucibus feugiat nisl.
Phasellus nunc. Sed bibendum ligula quis dolor. Duis imperdiet, metus
vel facilisis vulputate, ipsum nulla dapibus mi, sed euismod velit
tellus eget nisi. Phasellus in augue. Nullam ullamcorper diam at urna.
Suspendisse aliquet, erat eget porttitor commodo, enim dolor
consectetuer elit, a tincidunt nisi lacus a libero. Morbi posuere odio
tempor risus. Cras non lacus. Nulla vitae urna. Nullam urna. Fusce
neque justo, luctus sed, ullamcorper facilisis, ultricies quis, ligula.
Cras ut turpis at ante mollis consequat. Pellentesque interdum purus.
Duis erat. Quisque laoreet sodales orci. Aliquam eu augue.
Nunc vitae odio. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vivamus mi velit, lacinia
vel, cursus nec, congue vel, urna. Pellentesque eget metus et arcu
aliquet ornare. Integer ac libero. Morbi tempor varius neque. Proin
quis dui. Nullam tempus egestas turpis. Donec vel ligula. Pellentesque
pharetra enim in odio. Maecenas ornare metus quis tortor. Integer
eleifend, pede faucibus condimentum cursus, elit pede fringilla lorem,
vitae tincidunt arcu lacus id purus. Etiam imperdiet tellus nec lacus.
Quisque laoreet nunc ut velit rutrum mattis.
Proin augue pede, tempor at, scelerisque eu, laoreet ullamcorper,
quam. Duis justo quam, nonummy ut, sollicitudin eu, dictum non, diam.
Nullam nec lorem eget lacus eleifend volutpat. Phasellus mollis ipsum
sed ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque ullamcorper aliquam leo. Vestibulum et arcu. Sed pellentesque
pretium ipsum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Etiam turpis ante, ultricies non,
porta ut, ultricies nec, dolor. Integer justo justo, condimentum ut,
laoreet sed, consectetuer ut, velit.</p>
</div>
<div id="side">
<h3>Title</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div id="foot">
Copyright © Mark Bayazit 2006
</div>
</div>
</BODY>
</HTML>
thanks!
