Menu
I have the following HTML and I would like to display a blue background behind the buttons and text. Unfortunately, with the following code, the blue background disappear. If I remove the CSS for the ids buttons and text, the background is back.
What am I doing wrong?
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style>
#actions
{
background: blue;
}
#buttons
{
float: left;
}
#text
{
float: right;
}
</style>
</head>
<body>
<div id="actions">
<div id="buttons">
<input type="button" id="btnOne" value="Bla bla" />
<input type="button" id="btnTwo" value="Bla bla bls" />
</div>
<div id="text">Bla bla bla</div>
</div>
</body>
</html>
901
You have to "clear" your floats. Floating elements takes them out of the normal block positioning of the page, so an element that is floated right breaks out of the parent container, collapsing the div. You can clear them, or the more concise and clever way is to add 'overflow: auto' to the parent container:
#actions
{
background: blue; overflow: auto;
}
#buttons
{
float: left;
overflow: hidden;
}
#text
{
float: right;
overflow: hidden;
}
Since "overflow: auto" can produce scrollbars in certain instances, I usually explicitly prevent that by specifying 'overflow: hidden' on children elements. This works reliably in my experience.
128
Try this:
<div id="actions">
<div id="buttons">
<input type="button" id="btnOne" value="Bla bla" />
<input type="button" id="btnTwo" value="Bla bla bls" />
</div>
<div id="text">Bla bla bla</div>
<div style="clear:both;height:1px;overflow:none;"></div>
</div>
The basic problem is that floating elements do not contribute to the calculated height of the container. Thus div#actions doesn't have any height when the other two divs are floated.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
