Div layers not quite squeezing together

Hello everyone,

Heres the problem:

http://img366.imageshack.us/img366/8670/imageot3.jpg

As you can see the div layers aren't quite squeezing together. Here is the related code:


<div id="content-left">
<div style="margin-bottom: 0px;"><img src="/images/news_bar.jpg" alt="News" /></div>
<div class="news-block">Test</div>
</div>



/* Home page CSS Stylesheet */

/* Div Classes */

.news-block {

border: 1px solid #bc6401;
border-top: 0px;
padding: 5px;
width: 488px;
height: 100%;

margin-top: 0px;

}


As you can see I've tried margin: 0px; but it doesn't seem to have had an affect.

Ideas?

You have to float your <div>s if you wan't them t be side by side. That, or set your display attribute to inline.

Float:

<style type="text/css">
div { float: left; }
</style>
Display:inline;

<style type="text/css">
div { display: inline; }
</style>


Note: Set id's

Perhaps I didn't make myself clear enough, I'm trying to get the tiny space above between the 'News' block and the 3 bordered div section gone. Just to be on the safe side, I tried your suggestions but neitheir worked (infact inline had the opposite effect).

Any suggestions on how to achieve the elimination of that tiny space?

What happens if you made your image inside that div display: block;?