Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    nfh
    nfh is offline
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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:

    Code:
    <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?

  • #2
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    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

    Code:
    .clearfix:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
        font-size: 0;
    }
    for instance:
    Code:
    <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
    Last edited by Aurora.Light; 04-29-2011 at 03:46 AM.

  • #3
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    I think you could also use

    Code:
    img {
    display: inline;
    }
    I think the main problem is that you aren't defining widths though.

    Code:
    <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>
    Code:
    #container {
    	width: 960px;
    }
    
    #sponsor-list img {
    	display: inline;
    }
    Last edited by Aurora.Light; 04-29-2011 at 03:45 AM.

  • #4
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    if this doesn't help, maybe you could show a screenshot?

  • #5
    nfh
    nfh is offline
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •