HTML, CSS Box model question

Question

The Code -

while($row=mysql_fetch_array($result))  
                { 

            <div class="feed_element">  
            <span class="feed_title">  
                <?php echo $row['user_id'];?>  
            </span>  
            <span class="feed_content">  
                <?php echo $row['feed_content']; ?>  
            </span>  
            </div>

The CSS -

.feed_title  
{  
    background-color: #fed100;  
    min-width:100px;  
    float: left;  
}  
.feed_content  
{   
    float: left;  
    min-width: 270px;  
}  
.feed_element  
{  
    border-bottom-style: solid;  
    border-bottom-width: 10px;  
}  

The problem - The div class="feed_element" loads without any content, but only border The span's load out of it and on it. From what it looks the span's are loading out of the div. How do i rectify this problem?

Answer 1

just add overflow property to the .feed_element

.feed_element
{
  overflow: auto;
  .... your css rules;
}

---

CSS Floats

Floated elements are taken out of the normal flow of html elements. The default overflow value is visible which tells the browser to allow the content to be visble, but the content flows outside the container bounds.

Answer 2

this is because you are using float for the childs. The parent doesnt get a height if the childs are floating. you can correct this by adding clear to the last child or setting the feed_element to float also.