Show every div on a single row

Hi,

I'm trying to create a layout that mixes text with images, but I'm having some trouble aligning it all with CSS.

Basically I have this:


<div id="container">
<div id="banners">
<p>Sponsors:</p>
<div id="sponsor-list">
<div id="sponsor-1">
<img src="sponsor1.jpg" />
</div>
<div id="sponsor-2">
<img src="sponsor2.jpg" />
</div>
<div id="sponsor-3">
<img src="sponsor3.jpg" />
</div>
</div>
</div>
<div id="copyright">
<p>Copyright (c) ... </p>
</div>
</div>


I tried to style everything inside banners with float left, and it worked for the content of the banners div. The problem is that the banners div assumes the whole width of the div where it is at and the copyright div is placed below it.
If I style banners with float left as well, its width is as much as the largest image and everything inside that div is placed vertically (one item per row).

What do I have to do in order to have everything shown in a single row?

define widths to "banners" and anything you are trying to float. if you have a container that is 400px and you're trying to float a 300px image next to a 200px text, then it won't float. yes?

also, add


.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}


for instance:

<div id="container" class="clearfix">
<div id="float1" style="float:left">blah</div>
<div id="float2" style="float:left">blah</div>
</div>
<br clear="all">


the br is redundant but I like to use it

I think you could also use


img {
display: inline;
}


I think the main problem is that you aren't defining widths though.


<div id="container">
<div id="banners">
<p>Sponsors:</p>
<div id="sponsor-list">
<img src="sponsor1.jpg" width="" height=""/>
<img src="sponsor2.jpg" width="" height=""/>
<img src="sponsor3.jpg" width="" height=""/>
</div>
</div>
</div>




#container {
width: 960px;
}

#sponsor-list img {
display: inline;
}

if this doesn't help, maybe you could show a screenshot?

Hi Aurora,

Thank you very much for your suggestion.

As a matter of fact, I had solved the problem defining the width of the banners before. Nonetheless, I was hoping that there was a way to make both "banners" and "copyright" divs to adjust their width automatically in order to maximize their content space while keeping everything in one row. Maybe that is just not possible, I guess :)

These divs are basically the footer of a webpage where the sponsors are shown on the left and the copyright on the right. The webpage itself has enough room for everything, but without setting any widths, the "banners" div's width remains as low as the widest image.
By the way, the "copyright" div has its float set to right.