index.html

<div id="banner"> <img src="images/banner.png" /><img src="images/bannerside.png" /> </div>

style.css

#header #banner {
    margin: 10px 0 0 20px;
}

I am hoping those image appears next to each other, instead they come out on top and buttom. How to make them next to each other ?

I think I have enough space to put the next image next to the first one.

You can do the following:
<div id="banner"> <table width="100%" colspan="0" border="0">
<tr>
<td>
<img src="images/banner.png" />
</td>
<td>
src="images/bannerside.png" />
</td>
</tr>
</table>
</div>

Please DONT use tables to position things. Thats wrong and not semantic coding.

You can float images just as you can divs and other elements.

Provided you have enough room, as you said, for those two images to float side by side, you can do:

img {float: left;}


Once again, you've asked so many basic questions that should be VERY easy to find out yourself with just a little googling. I strongly suggest you do some learning on your own.

commented: Very Good +0

Yeah! Googling is the best solution for every problem.

In this way you can learn yourself and gain lots of knowledge. I'm a miami web master and I do the same to know solution of any problem.

Good luck!