Soldato
- Joined
- 16 Nov 2003
- Posts
- 9,682
- Location
- On the pale blue dot
Here is a simple web page:
I would expect to see a container element containing two smaller elements side by side and an element underneath. Instead I get this:
Any ideas?
If I take out the bottom element it looks even worse in FireFox:
Code:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#body
{
position: relative;
width: 800px;
border-width: 1px;
border-color: #000000;
border-style: solid;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
text-align: left;
}
#left
{
float: left;
position: relative;
width: 300px;
border-width: 1px;
border-color: #000000;
border-style: solid;
}
#next
{
position: relative:
width: 500px;
border-width: 1px;
border-color: #000000;
border-style: solid;
}
</STYLE>
</HEAD>
<BODY>
<div id = "body">
<div id = "left">This is the first left floated element</div>
<div id = "left">This is the second left floated element</div>
<div id = "next">This should be below the two floated elements</div>
</div>
</BODY>
</HTML>I would expect to see a container element containing two smaller elements side by side and an element underneath. Instead I get this:
Any ideas?
If I take out the bottom element it looks even worse in FireFox:
Last edited:
