SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get unordered list to show up below first

    I have 3 unordered lists.

    The 2nd ProductInfo list only has one image (green image). I want that image to show on a new row under the first ProductInfo list of images. Right now it's appending to the end of the first ProductInfo element (div)


    here's what the page looks like: http://www.codezest.com/post/rows.png

    Code:
    #ProductDescriptionWrapper
    {
    	margin: 0px 0px 10px 0px;
    	overflow: hidden;
    }
    
    #ProductDescThumbnail
    {
    	float: left;
    	margin: 0px 0px 0px 0px;
    	width: 125px;
    	
    }
    
    #ProductDescription
    {
    	float: left;
    	width: 430px;
    	text-align: justify;
    }
    
    .ProductInfo
    {
    	margin: 0px 0px 10px 0px;
    }
    
    .ProductInfo li
    {
    	float: left;
    	display: inline;
    	vertical-align: bottom;
    	text-align: left;	
    }
    
    #ProducCrossSells
    {
    	float: left;
    	margin: 0px 0px 10px 0px;
    }
    
    #ProductCrossSells li
    {
    	float: left;
    	display: inline;
    	vertical-align: bottom;
    	text-align: left;	
    }
    
        <div id="ProductDescriptionWrapper">
            <div id="ProductDescThumbnail"><img src="/Content/Images/product/dummythumbnail.jpg" /></div>
            <div id="ProductDescription">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus ante, 
                aliquet sit amet convallis et, tincidunt sit amet elit. Suspendisse potenti. 
                Fusce mauris lorem, vestibulum sed adipiscing vel, fermentum vel enim. 
                Curabitur ligula odio, vulputate eget faucibus a, bibendum quis velit. 
                Donec eu tellus erat.
            </div>
        </div>
        <div class="ProductInfo">
            <ul>
                <li><img src="/Content/Images/product/dummyProductInfo1.jpg" /></li>
                <li><img src="/Content/Images/product/dummyProductInfo2.jpg" /></li>
                <li><img src="/Content/Images/product/dummyProductInfo3.jpg" /></li>
                <li><img src="/Content/Images/product/dummyProductInfo4.jpg" /></li>
            </ul>
        </div>
        <div class="ProductInfo">
            <ul>
                <li><img src="/Content/Images/product/dummyProductInfo5.jpg" /></li>
            </ul>          
        </div>
        <div id="ProductCrossSells">
            <ul>
                <li><img src="/Content/Images/product/dummyCrossSell1.jpg" /></li>
                <li><img src="/Content/Images/product/dummyCrossSell2.jpg" /></li>
                <li><img src="/Content/Images/product/dummyCrossSell3.jpg" /></li>
                <li><img src="/Content/Images/product/dummyCrossSell4.jpg" /></li>
            </ul>
        </div>
    Last edited by espresso; May 22, 2009 at 08:37.

  2. #2
    SitePoint Member
    Join Date
    May 2009
    Location
    India
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    hi,
    If i have got your question right. You want to show the product images on three different rows.
    on first row 4 images, on second row 1 image, and 4 images on last row.
    If this is what you want apply following style to last two rows (div tag in your code)

    HTML Code:
    style="clear:left;"

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Or add overflow:hidden to .ProductInfo.............
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    adding clear: left to both those moved the last 2 divs to the bottom of my page completely!

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    overflow: hidden worked. Can you explain? I know what overflow:hidden does but in this case what was the issue? I don't see it.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Lol espresso, at this point add overflow:hidden; to any parent that has floats in it before you come here (not to pick on you but you really don't seem to understand with me explaining)

    Can someone please explain as I'm not that good at it lol (not picking on you)

    I'll try once more

    The div has collapsedd to 0 height because of the children of the productinfo div having floats. overflow:Hidden; allowed it to encompass the floats nad act like a natural block element taking up all the width it could take.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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