I have two drop-down menus inside a div, and I floated the div to the right inside a parent container.
The problem is that I want background shading the entire width of the parent container, and when I added the float, the shading shrunk to just the size of the drop-downs?!
I tried adding width: 100%; which fixes the shading width problem, but then my float goes all the way to the left?!
How can I achieve float:right and a full-width background shade to make things look like a “bar” in my parent container?
I am under the impression that floated elements do not have a default width or height.
Try giving the div a height or after the last element is displayed try the following:
</ul><!-- last element -->
<br style="clear:both; height:1px; font-size:1px" />
</div>
Is it possible to supply the offending code complete with <!doctype html> and </html>. It will be far easier for posters to copy and post your code, solve the problem and upload correct code.
If you are talking about painting the background on the parent of the float then you simply need to contain the floats which is the the same problem we spoke about in the last thread.
Either use the clearfix method mentioned or use overflow:hidden on the parent to contain the floats. However as you mention dropdowns then you may need visible overflow so you should use the clearfix method to contain the floats.
The clearfix class is applied to the parent of any child floats and will contain them. Otherwise a parent that holds only floats will have no height and therefore no background because floats are removed from the flow and unless you contain then they escape
