...

View Full Version : Show every div on a single row



nfh
04-29-2011, 01:12 AM
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?

Aurora.Light
04-29-2011, 03:27 AM
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

Aurora.Light
04-29-2011, 03:40 AM
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;
}

Aurora.Light
04-29-2011, 03:50 AM
if this doesn't help, maybe you could show a screenshot?

nfh
04-29-2011, 12:43 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum