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 6 of 6

Thread: float left

  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts

    float left

    I have image thumbnails with a product description underneath

    i want them to appear like a table 4 on a row.

    instead of using tables I'm just putting each image with description in a div and setting it to float:left

    the problem is if a div is shorter or longer then it messes up the frame that shows under it.

    Please advise what I can do about this. I want the height of the cell to grow based on the highest one in the row like it would if it was a table row?

  • #2
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How about setting a width.. like
    Code:
    <style type="text/css">
    .container
       {
        height:auto;
        width:800px;
        position:relative;
       }
    .products
       {
         height:auto;  
         width:200px;
         position:relative;
         float:left;
       }
    </style>
    <div class="container">
         <div class="products"><img src="product1.png" alt="" />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque in est sit amet ipsum ornare sagittis. Morbi feugiat enim. Nullam pulvinar lorem. Suspendisse massa felis, consequat ac, egestas id, facilisis quis, metus. Ut at justo.
         </div>
         <div class="products"><img src="product2.png" alt="" />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque in est sit amet ipsum ornare sagittis. Morbi feugiat enim. Nullam pulvinar lorem. Suspendisse massa felis, consequat ac, egestas id, facilisis quis, metus. Ut at justo.
         </div>
         <div class="products"><img src="product3.png" alt="" />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque in est sit amet ipsum ornare sagittis. Morbi feugiat enim. Nullam pulvinar lorem. Suspendisse massa felis, consequat ac, egestas id, facilisis quis, metus. Ut at justo.
         </div>
         <div class="products"><img src="product4.png" alt="" />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque in est sit amet ipsum ornare sagittis. Morbi feugiat enim. Nullam pulvinar lorem. Suspendisse massa felis, consequat ac, egestas id, facilisis quis, metus. Ut at justo.
         </div>
    </div>
    get the idea?

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello esthera,
    I was having the same problem as you and it took a long time to figure out how to fix it.
    This might be a little unconventional but it's CSS and it displays thumbnails in a fluid, centered layout.


    CSS is:
    #container {
    text-align: center;
    }
    #container p {
    display:inline;
    font-family: "Comic Sans MS";
    font-weight: normal;
    color: #FFFFFF;
    }
    #container span {
    margin:1em;
    vertical-align:top;
    width:300px;
    display:table-cell;
    display:inline-table;
    display:inline-block;
    }
    #container p>span {
    vertical-align:baseline;
    }
    #container p img {
    margin-bottom:5px;
    border: none;
    }
    and the markup is:
    Code:
    <div id="container">
    <p><span><a href="your_pic.jpg.htm"><img src="thumbnails/your_picTN.jpg" /></a><br />product description here</span></p>
    <p><span><a href="your_pic2.jpg.htm"><img src="thumbnails/your_pic2TN.jpg" /></a><br />product description here</span></p>
    <p><span><a href="your_pic3.jpg.htm"><img src="thumbnails/your_pic3TN.jpg" /></a><br />product description here</span></p>
    </div>
    These are thumbnails each linked to their own .htm page.
    Give this a try, it does what you want and it will do the 4 thumbs on a row once you get the widths down. If your container is fluid it will just keep re-arranging the thumbs to fit.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    back again...

    here is a sample
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder Karen S. Garvin's Avatar
    Join Date
    Nov 2006
    Location
    Maryland
    Posts
    227
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Bottom alignment

    Hi, I viewed this on FF Mac (1.5.0.6). The right two pictures are floating up because the captions for them are on two lines, while the left two pictures have one-line captions.

    How would you align the pictures and not the captions? Add another div so that the captions have their own div?
    ----------------------------------------------
    Karen S. Garvin
    http://ksgarvin.wordpress.com

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hi Karen,
    I noticed that in FF2 here too... Even if you get the top aligned evenly, the next row will align itself to the staggered text ... so to fix it we need to give the p span a height so all the boxes around the pics are the same size. You will just have to give enough height to contain your longest description and live the the extra space under a thumb with a shorter description.

    Here is the fix:

    Code:
    .wrapper span {
    	margin:1em 1em 1em 1em;
    	vertical-align:top;
    	width:150px;
            height: 200px;
    	display:table-cell;
    	display:inline-table; 
    	display:inline-block;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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