I implemented a two column layout in my website, where one column is floated to the left and another is not:
<div id="left">
LEFT
</div>
<div id="right">
RIGHT
</div>
Here is the CSS code for the layout:
#left {
float: left;
width: 200px;
background: yellow;
}
#right {
margin-left: 200px;
background: orange;
}
In the non-floated right element, I have structured like this:
<div id="nav">
<div class="item">LINK</div>
<div class="item">LINK</div>
<div class="item">LINK</div>
<div class="item">LINK</div>
<div class="item">LINK</div>
<div class="clear"></div>
</div>
<h1>Welcome World</h1>
The CSS styles for nav and item are as follows (notice that item is floated):
#nav {
background: blue;
}
.item {
background: green;
float: left;
margin-right: 10px;
}
The definition of the clear element is:
.clear {
clear: both;
}
However, the result of this setup differs from what I expected. It seems that the issue lies with the clear element affecting the floated element (#left). What I anticipated was: