Menu
Div with id "message-box" is going outside its parent div "message-container" I dont understand why?
I used "overflow:auto;" in my css for "message-box". but still its not giving me the desired result. margin left is not working properly when i use "overflow:auto" on "message-box".
Below is my HTML file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
<title>temp</title>
</head>
<body>
<div id="main">
<div id="header">header</div>
<div id="container">
<div id="user-container">user</div>
<div id="message-container">
<div id="message-box">message box</div>
<div id="text-box"> text box</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Below is my CSS file:
#main{
border: 1px solid red;
margin: 5px;
}
#header{
border: 1px solid red;
height:30px;
margin: 10px;
}
#container{
margin:10px;
height:32em;
}
#footer{
border: 1px solid red;
height:30px;
margin: 10px;
}
#user-container{
border: 1px solid red;
float:left;
width:120px;
height:32em;
}
#message-container{
border: 1px solid red;
height:32em;
width:100%;
}
#message-box{
border: 1px solid grey;
overflow:auto;
margin:5px;
}
#text-box{
border:1px solid grey;
overflow:auto;
margin:5px;
}
please someone help me out here.
486
Your #message-box has correct margins all around in relation to the #message-container div, but the problem is that both #message-container and #message-box are overflowing into #user-container. Since #message-box has the overflow property, it is clipped at the exact edge where it overflows into #user-container. Since #message-container does not have overflow, it continues to flow behind the #user-container to the edge of the #container div. To fix this, add overflow to the #message-container.
#message-container {
height: 32em;
border: 1px solid red;
overflow: hidden;
}
I think what you want here is overflow: hidden to clip the overflowing content; overflow: auto adds scroll bars to see the overflowing content.
The float on #user-container is causing the problem. Floats remove an element from the normal document 'flow' (see Normal Document Flow below).
I added background colors to #user-container(green) and #message-container(blue) so you can see what's happening. If you remove overflow from #text-box and #message-box, you'll see margins are actually working correctly between #message-box and #message-container. Add them back and you'll see how they get clipped by #user-container.
This is what's happening http://jsfiddle.net/fmceqbdp/2/
The DOM has an element hierarchy. The document is the highest level parent (or outermost box), and any element you add is its child. The element's starting position is the upperleft of its parent. If you add another element at the same level (not nested), it is another child of the document and a sibling of the first element. The sibling also wants to be positioned as close as it can to the upperleft of the document, but it gets pushed right by the first element (inline) or to the next line (block). When you nest an element inside that element, the nested element is the child, it is contained inside the parent. It's starting position is the upperleft of its parent element. This is normal document flow. A floated element is removed from this normal flow, so it doesn't push other elements the way it normally would.
Divs are block elements, they push other elements away. However, when you float an element, it removes that element from the normal document flow -- that means its position is invisible to sibling elements (elements at the same level), so they're now positioned in front or behind the floated element as though the floated element doesn't exist. Because you floated #user-container, #message-container fills the entire #container as though #user-container is not there.
The element that has the overflow property will self-clear from overflowing into other elements. This is why #message-container flowed into the space occupied by #user-container but its children #message-box and #text-box with the overflow property had cleared themselves from flowing into the space #user-container. Their margins were still relative to their parent #message-container, not where they're clipped, which is why it appeared there was no left margin where they ran into #user-container.
For more details, see http://css-tricks.com/the-css-overflow-property/ -- scroll about 1/4 of the way down the page.
156
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
