You can get a quick crash course on floats at the Floatutorial.
For one thing floated items must have a width declared on them, as per your example you would only be floating the div that has 850px set on it.
Here is what you have described, it is an example only. Not to be used as a layout yet.
demo.html
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
* {margin:0; padding:0;}
body {
background: #dcdcdc;
}
h1,h2,h3,p {padding:10px}
#wrapper {
margin:auto;
width: 99.8%;
min-width:1050px;
background: skyblue;
border:1px solid black;
}
#header {
position:relative;
height:100px;
background: #6bb;
border-bottom:1px solid black;
text-align:center;
clear:both;
}
#innerwrap {
width:100%;
}
#content {
position:relative;
float:left;
width: 850px;
min-height:500px;
background:wheat ;
border-right:1px solid black;
}
#right {
position:relative;
background:inherit;
min-height:500px;
padding-left:850px;
}
* html #content, #right {height:500px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h2>Header</h2>
</div>
<div id="innerwrap">
<div id="content">
<p>850 wide object goes here</p>
<p>This content div is floated left</p>
</div>
<div id="right">
<p>Explanatory text goes here, this text only includes where necessary</p>
<p>This text is set in the innerwrap div.</p>
<p>This div does not have a float set on it, so there is no need to declare a width.
It will size down in width with the browser.</p>
</div>
</div><!--end innerwrap-->
</div><!--end wrapper-->
</body>
</html>
This is an example of two divs floated left and right. They have widths set on them.
demo-2.html
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
* {margin:0; padding:0;}
body {
background: #dcdcdc;
}
h1,h2,h3,p {padding:10px}
#wrapper {
margin: 0 auto;
width: 1050px;
background: skyblue;
border:1px solid black;
}
#header {
position:relative;
height:100px;
background: #6bb;
border-bottom:1px solid black;
text-align:center;
clear:both;
}
#content {
position:relative;
float:left;
width: 850px;
min-height:300px;
background: inherit;
border-right:1px solid black;
display:inline;
}
#right {
position:relative;
float:right;
width:199px;
min-height: 300px;
background: wheat;
display:inline;
}
* html #right {margin-left:-3px;}
* html #right, #content {height:300px;}
.clear { clear: both;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h2>Header</h2>
</div>
<div id="content">
<p>850 wide object goes here</p>
</div>
<div id="right">
<p>Explanatory text goes here, this text only includes where necessary</p>
<p>This floated div is set at a width of 199px, if you remove the width
it will fall and find room for the longest set of text.</p>
</div>
<div class="clear"></div>
</div><!--end wrapper-->
</body>
</html>
Bookmarks