The height of div element is not setting automatically

.block    
               {
                width:540px;
                margin:20px;
                padding:10px;
                border:1px solid Gray;
               }

              

If u run the above code in Jsfiddle, then it shows a border around the text
and the important thing is that
the height of the block class is auto
, so it automatically adjust its height.

But the problem comes when i added the following css :

#pe
 {
  float:left;
 }
 #area
 {
   float:right;
 }​

Now the height of div.block
is not set automatically. Can anybody tell me the problem?

Problem courtesy of: gaurav

Solution

Now You need a Clearfix for it

.clearfix:after{
clear:both;
line-height:0;
height:0;
display:block;
background-color:transparent;
border:none;
content: ".";
visibility:hidden;
 }

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
 }

you add it like this

""

Solution courtesy of: Arnab Shaw

Discussion

because float takes them out of the current flow. They are not inside the block div in the same way they where, use positioning and display:inline to get them to line up the way you want

Discussion courtesy of: Simon McLoughlin

You can use absolute positioning where by the outer element is set to height:auto and the inner #pe and #area are set to height:100%.

Have a look at this answer: How to make a floated div 100% height of its parent?

Discussion courtesy of: Monokh

That’s because they’re not part of the common flow of the document anymore.

The solution could be to set display: block
in the block class and then use position: absolute
to position the element within that block by using left: 0
and right: 0

Discussion courtesy of: Jon Stødle

Just add overflow:hidden to class “block”.

.block{
   width:540px;
   margin:20px;
   padding:10px;
   border:1px solid Gray;
   overflow:hidden;
 }

Here is the fiddle: http://jsfiddle.net/rWuBF/

Discussion courtesy of: SVS

I would add overflow:hidden
to the containing element ( #header
). That should fix it.

Discussion courtesy of: Anriëtte Myburgh

add float:left; in your block class.

Discussion courtesy of: CSS Guy

Although a bit dirtier, you can also add something that clears both after the floated elements.

There are also cleaner “clearfix” variations of this as well, that will let you clear:both without adding non-semantic markup. http://www.positioniseverything.net/easyclearing.html

Discussion courtesy of: ltiong_sh

This recipe can be found in it’s original form on Stack Over Flow
.

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » The height of div element is not setting automatically

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录