tags:

views:

128

answers:

4

Hi all,

My problem is illustrated in the sample code provided at the end. Basically, i have a div container containing some tools at the left, and the main content in the middle, and some tools at the right (The visual left tool is to provide dragging and the visual right tool is to delete the content). I achieved the positing by floating left and right respectively, however, if i put background color on the main content, the coloring spills over to the stuff floating on the left but not on right (currently only tested in firefox 3.5)

Code below:

<head>
    <style type="text/css">
    #container{
        width:500;
    }
    .handle{
        float:left;
    }
    .delete{
        float:right;
    }
    .main{
        width:450;
        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>
A: 

I could get what you want with

<style type="text/css">
*{border:solid 1px black}
#container{
    width:500px;
}
.handle{
    float:left;
}
.delete{
    position:relative;
    right:50px;
    float:right;
}
.main{
    width:390px;
    padding:9px 30px;
    background-color:ccc;
}
</style>

But is far from good.

voyager
A: 

If your intention is to provide background color only to the element designated with the ".main" class you'll need to do the following changes to your HTML markup and CSS:

Move the element designated with the "main" class in between the ones marked "handle" and "delete".

<div class="c">
<p class="handle">...</p>
<p class="main">...</p>
<p class="delete">...</p>
</div>

Add "float:left" to the styles in ".main"

.main{
  ...
  float:left;
}

Please note that you have a typo in your second example. The background-color should be "#ccc" in stead of "ccc".

Razvan Caliman
A: 

It's not clear whether you want the color to cover them all (left, main, & right) .. or only the middle div.

Anyway .. if you want it to cover all .. you need to make the width of the main div equals the width of the container .. try this, for example

 .main{
     width:500;
     background-color:ccc;
 }

on the other hand, if you want the color to be in the main div only, then you have to make it floating to the left .. something like this

.handle{
    float:left;
    clear: left;
}
.delete{
    float:right;
    clear: right;
}
.main{
    width:450;
    background-color:ccc;
    float: left;
}
Aziz
A: 

Adding float:left to the .main will fix it.

Download the ColorZilla firefox addon or Firebug and you will see what is happening. Your .handle is floated left inside of your .main, that is why the background is #ccc.

Martin