Forum Moderators: not2easy
<html>
<head>
<style>div.content {
border: #00f solid 1px;
margin-right: 155px;
}
div.inset {
border: #f00 solid 1px;
float: right;
width: 150px;
}div.page {
border: #000 solid 1px;
}
</style>
</head><body>
<div class="page">
<div class="content">
<p>This is just random text, this is just random text.
This is just random text, this is just random text.
This is just random text, this is just random text.
This is just random text, this is just random text.
This is just random text, this is just random text.
This is just random text, this is just random text.
This is just random text, this is just random text.</p>
</div>
<div class="inset">
<p>inset</p>
</div>
</div></body>
</html>
<html>
<head>
<style>div.content {
border: #00f solid 1px;
margin-right: 155px;
}
div.inset {
border: #f00 solid 1px;
float: right;
width: 150px;
}div.page {
border: #000 solid 1px;
}
</style>
</head><body>
<div class="page">
<div class="inset">
<p>inset</p>
</div>
<div class="content">
<p>This is just random text, this is just random text.
This is just random text, this is just random text.
This is just random text, this is just random text.
This is just random text, this is just random text.
This is just random text, this is just random text.
This is just random text, this is just random text.
This is just random text, this is just random text.</p>
</div></div>
</body>
</html>
;) tadaaa
To put it another way: float effects the horizontal position of the element, but not it's vertical position, which remains determined by the source code. A float that follows an otherwise normal block level element will be rendered below that block level element as per the regular stacking order of block level elements in the source.
cEM
The basic technique is to wrap the content div in a wrapper div. Float left, give a 100% width, and apply anegative right margin to the wrapper equal to the width of the inset. Apply a positive right margin equal to the width of the inset to the content. Then float right and give your specific width to the inset....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS Test</title>
<style type="text/css">
#wrapper{
float:left;
width:100%;
margin-right:-150px;
}
#content{
margin-right:150px;
}
#inset{
float:right;
width:150px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<p>Lorem ipsum content.</p>
</div>
</div>
<div id="inset">
<p>Lorem ipsum inset.</p>
</div>
</body>
</html>
The nesting of those divs is critically important to the technique, as is the floating and widthing. Check out the article to be sure you understand what's happening, as it's a fairly complex, but highly stable, layout technique.
cEM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS Test</title>
<style type="text/css">
div.wrapper{
float:left;
width:100%;
margin-right:-152px;
}
div.content{
border: #0f0 solid 1px;
margin-right:150px;
}
div.inset{
border: #0ff solid 1px;
float:right;
width:150px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<p>Lorem ipsum content.</p>
</div>
</div>
<div class="inset">
<p>Lorem ipsum inset.</p>
</div>
</body>
</html>
testing with with an incompetent browser?
No, no. My test page merely lacks the borders you're using. Obviously, the technique should be salted to taste. Glad it worked for you.
fixed ids to classes
Not sure how that's a "fix." Unless these elements will occur more than one time on a page, it's better to use an ID over a class. ID's have 10 times the specificity, are grabbable by JS, and are the "right" tool for the job, for whatever that's worth.
cEM
