CSS: Formatting blocks. Strange height behaviour or how to adjust height by content inside th block

Question

Hi

I am not really familiar with CSS, and come across the following problem:

I am making list of 3 item (actually they are divs), and added an image title, and some description inside each of them. Everything was good, till that time when I was requested to add another block after this one... And after I tried it, I investigated that the added block almost completely covers the news list :(

here is the code which generates a news list + style

// in loop for 3 items
<div class="newslist">
  <a href="{{ item.get_absolute_url }}">
    <img  src="{% thumbnail item.main_image 230x220 crop %}" alt="{{ item.image_description}}"/>
  </a>
  <br />
  <a href="{{ item.get_absolute_url }}" class="article_title">{{ item.title }}</a>
  <p>{{ item.short_description|truncatewords:35}}</p>
</div>

Style:

.newslist{
    display:block;
    height:auto;
    width: 22%;
    float:left;
    padding: 10px;   
    text-align: left;

}

.newslist a{
    margin-top:30px;
    font-size:12px;
    color: #be1e2d;
    text-decoration:none;

}
.newslist a:hover{
    text-decoration:underline;
}

.newslist br{
    padding: 10px;

}

.newslist img{
    width:150px;
    height:140px;
    text-align:
    padding: 5px;
    margin-bottom:20px;
    border: 1px solid #CCCCCC;
    background:#f1efef;`
}

.newslist p{
    font-size:11px;
}

.newslist a:hover img{
    border: 1px solid blue;

}

The complete code of homepage is here: http://j-in.org.ua

Here is the screenshot of the problem if following: http://img.skitch.com/20091021-d9y2i9h5cpxgk69fji2ue5pcib.png

And also the code of new block is following:

<div id="newblock">  

 Text

</div>

I just added bg color in styles...

Answer 1

Try clearing your floats and see if that helps. Also, make sure your page validates.

Answer 2

I'm not sure I fully understood your problem. I would advise you to wrap all the newslist into an outer wrapper. Then, positioning the newsbox below this should be trivial. Again, could you please explain a bit better the error in your screenshot?