Forum Moderators: not2easy
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<title>Float Test</title>
<style type="text/css">
body
{
margin: 0px;
}
#container
{
width: 700px;
background-color: red;
}
#left
{
margin: 50px;
width: 400px;
background-color: yellow;
}
#right
{
float: right;
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="right">Righty</div>
<div id="left">Hello world</div>
</div>
</body>
</html>
body
{
margin: 0px;
}
#container
{
float: left; /* added */
width: 700px;
background-color: red;
}
#left
{
margin: 50px;
width: 400px;
background-color: yellow;
}
#right
{
float: left; /* changed */
margin-left: 500px; /* added */
width: 200px;
background-color: blue;
}
go back to the original CSS and add
- to the #container div, padding: 1px 0;
This works to contain the collapsing margins, IE is wrong in its interpretation of this CSS I believe - but that aside the 50px margins on the yellow div are collapsing outside the container as they should, and the padding (or a border would do it) makes the margins stay inside the container.
position:absolute;
overflow:auto;
with
top, right, bottom and/or left attributes (you don't need to declare all four for all selectors)
e.g.
<style type="text/css">
body
{
margin: 0;
}
#container
{
width: 700px;
background-color: red;
position:absolute;
top:0;
left:0;
bottom:0;
overflow:auto;
}
#left
{
width: 400px;
background-color: yellow;
position:absolute;
top:50px;
bottom:50px;
left:50px;
overflow:auto;
}
#right
{
float: right;
width: 200px;
background-color: blue;
position:absolute;
top:0;
right:0;
bottom:0;
overflow:auto;
}
</style>
