ansaurus

Question

CSS: Why are descendant elements removed from parent block?

Answer 1

A:

Try adding overflow: auto to .question-content

Tom Smilack 2010-09-13 22:05:08

Answer 2

+1 A:

I usually solve this problem by declaring child element (ul.links in your case) with display:inline-block attribute. It'll prevent child from crossing borders of parent container.

http://jsfiddle.net/9sQXk/1/

Nikita Rybak 2010-09-13 22:05:39

Answer 3

A:

This is happening because your <li> list items are floating.

Try adding a block level element with a clear:both style after the closing </ul>.

So:

<html>
<head>
   <style type="text/css">
    .question-block {
        margin: 10px 10px 0;
        padding-bottom: 20px;
    }
    .question-block .question-content {
        margin: 0 0 10px 55px;
        padding: 0 0 20px 0;
        width: 545px;
        border-bottom: 1px solid gray;
    }
    .question-content h1 {
        font-size: 20px;
        line-height: 22px;
        margin: 0 0 10px 0px;
    }
    .question-content .question-details {
        margin-left: 30px;
        font-size: 14px;
    }
    .question-content .links {
        margin-left: 30px;
        padding: 0px;
        list-style-type: none;
    }
    .tag {
float: left;
margin: 5px 4px 0;
font-size: 14px;
    }
    .tag a {
    display: block;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
    border: 1px;
border-radius: 4px;
height: 20px;
color: #000;
background: #C5C5C5;
    padding: 3px 0 0 0;
width: 81px;
text-align: center;
    }
.clearfloat {
clear: both;
}
   </style>
</head>

<body>
    <div class="question-block">      
        <div class="question-content">
            <h1> Question </h1>
            <div class="question-details"> Question details </div>
            <ul class="links">
                 <li class="tag"><a href="#">tag 1</a></li>
                 <li class="tag"><a href="#">tag 2</a></li>
                 <li class="tag"><a href="#">tag 3</a></li>
            </ul>
            <div class="clearfloat"></div>
       </div>
    </div>
</body>

Gus 2010-09-13 22:07:44

Answer 4

A:

You've specified that anything with the class "tag" will have "float: left".

Float removes an element from the regular flow layout of a document. In other words, the containing <ul> and <div> blocks are no longer adjusted for the height of the <li>'s that are inside the list.

You need to remove the float if you want your list items to appear inside their containers, rather than float to the left of the rest of the document. Alternately, you can float the entire thing, by putting the float property on the containing div.

womp 2010-09-13 22:08:08

ansaurus

tags:

views:

answers:

CSS: Why are descendant elements removed from parent block?

related questions