I am facing an issue with the layout provided in the code snippet below. Essentially, there is a div container with tools on the left side, main content in the center, and tools on the right side (a visual drag handle on the left and a delete button on the right). I was able to position them using float:left and float:right properties respectively. However, when I tried to add a background color to the main content, the color spills over to the left floating elements but not to the ones on the right (this has only been tested in Firefox 3.5).
Here is the code:
<head>
<style type="text/css">
#container{
width:500px;
}
.handle{
float:left;
}
.delete{
float:right;
}
.main{
width:450px;
background-color:#ccc;
}
</style>
</head>
<div id="container">
<div class="c"><p class="handle">HH</p><p class="delete">X</p><p class="main">Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as asd fasd fas dfa sdf asdf as dfas df dasf asd fas df asdf asdf asd fasd fasdf asdf asdf asdf as df asdf asdf asd fas df asdpf asdf asdf asd fas dfa sdf asdf asd fas df</p></div>
<div class="c"><p class="handle">HH</p><p class="delete">X</p><p class="main">Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>
</div>