child divs extending out of parent div

I want to place two images together in the top banner. But the second image is showing outside the "banner" parent div. I've tried with tables too, but not getting the results. Also two images should not fold when I resize the browser. What's the right way to do this? One way is to join the images in Photoshop which I don't want to do.

<div id="banner">
    <div><img src=".." alt="Utilities Logo" 
    height="105" width="开发者_如何学JAVA406" /></div>
    <div>
    <img src=".." alt="!" 
    height="105" width="467">
    </div>
    </div>

This seems to be the easiest way. Images are inline-block, so they will align nice (#banner should not be smaller than 406+467 though).

<div id="banner">
    <img src=".." alt="Utilities Logo" height="105" width="406" /><img src=".." alt="!"  height="105" width="467">
</div>

An another way might be to play with the float CSS property, as michele suggested.

If you really don't want them to fold on browser resize, you should consider merging them in PS because then I don't really see a good reason for them to be separate. Or you can give #banner a CSS min-width big enough to hold the two images.

Just add some id's to the div's

   <div id="banner">
        <div id="img1">
            <img src=".." alt="Utilities Logo" height="105" width="406" />
        </div id="img2">
        <div>
            <img src=".." alt="!" height="105" width="467">
        </div>
    </div>

And then try the following css

#img1 
{
    float : left;
    width : 406px;
}

#img2 
{
    float : left;
    width : 467px;
}

That should solve the issue

I would do something like this:

<div id="banner">
    <div id="image_1">
    </div>
    <div id="image_2">
    </div>
</div>

#image_1 { height:105px; width:406px; float:left; background:url(file_path_to_image/name_of_image.png) no-repeat; }

#image_2 { height:105px; width:467px; float:left; background:url(file_path_to_image/name_of_image.png) no-repeat; }

Also I would make sure that #banner <div> has at least a width of 467px.

You have not been specific if you want those two <divs> on top of eachother. If you don't want them to be horizontally aligned left to right as they will be with my above code. Simply take out the float:left; Just make sure there is a minimum width of 467px on the #banner div and that should do it.

Simple:

<style type="text/css">
    #banner { white-space: nowrap; }
</style>

<div id="banner">
    <img src="banner-1.png" width="406" height="105">
    <img src="banner-2.png" width="467" height="105">
</div>