Issue
The link below shows a simplified version of a website I’m working on and the problem I’m presented with.
I have several encapsulated box elements. There is the main container, and several divs within that container that will hold content, as that content expands, I need the container div to expand automatically. I can’t seem to accomplish this unless I add a specific height in the CSS.
HTML:
<body>
<div id="container">
<div id="block1">
<div id="one">one</div>
<div id="two">two<br />two<br /></div>
<div id="three">three<br />three<br />three<br /></div>
<div id="four">four<br />four<br />four<br />four<br /></div>
</div>
</div>
</body>
CSS:
#container {
width: 1050px;
margin: auto;
padding: 5px;
background-color: #ededf0;
background:
url("http://wguayan.comuv.com/brushed_metal_clear_apple.jpg") repeat;
}
#one, #two, #three, #four {
border-width: 1px;
border-color: black;
border-style: solid;
background-color: white;
border-radius:6px;
-moz-border-radius:6px;
/* Firefox 3.6 and earlier */
}
#one {
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#two {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 5px;
text-align: center;
box-shadow: 9px 9px 12px #888888;
}
#three {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#four {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#block1 {
width: 100%;
border-width: 1px;
border-color: black;
border-style: solid;
}
Solution
Just apply overflow: hidden to #block1
Answered By – katranci
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0