8

I'm fairly new to CSS, so, this might look silly:

In CSS, i use the property to float:left to position a content left to the neighbouring element, now, i have a container for all the elements that have the float property. how do i make the parenting element adjust it's height according to it's content?

the HTML:

<div id="page">
<div id="side">
    <p>my sidebar</p>
</div>
<div id="content">
    <p>my content</p>
    <p>my content1</p>
    <p>my content2</p>
    <p>my content3</p>
</div>

​</p>

the CSS

/* the "border:3px solid #000;" are used to make the div border visble*/
#page{
position:relative;
width:400px;
background-color: #F4F0EC;
border:3px solid #000;
}
#side{

border:3px solid #000;
float:left;
}
#content{
float:left;
 border:3px solid #000;
}

with the above, the <div id="page"> look like it has a height of 0px.... how do i make it warp the content ??

since i'm new to CSS, please explain what am i doing wrong, thanks

Fiddle:http://jsfiddle.net/AuSmP/

4

3 回答 3

15

您可以overflow:hidden为您添加，div #page这将允许它调整大小以适应其内容。

请参阅工作演示。

了解有关溢出属性的更多信息。

或者，您也可以添加<div class="clear"></div>thenCSS .clear{clear:both;}来实现相同的效果。

见演示。

于 2012-08-25T07:20:16.217 回答
3

这是你所期望的吗？http://jsfiddle.net/AuSmP/4/ 只需将 float:left 样式添加到 #page 即可解决问题，或者您也可以在底部使用 clear:both

于 2012-08-25T07:26:22.180 回答
3

将位置从相对更改为绝对也可以帮助您
查看此JSFiddle 演示

于 2012-08-25T07:24:01.643 回答