SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two rows of floated divs

    Iím trying to create two rows of small divs that will be used like thumbnails, Iím having trouble figuring how to have the second row clear the first. I tried putting another div between them that clears the first row, this works fine in FF but in IE it doesnít work (it seems to sit under both rows)

    CSS
    Code:
    #container {
    	background-color: #FFFFFF;
    	background-image: url(images/bg.gif);
    	background-repeat: no-repeat;
    	margin-top: -210px;
    	margin-left: -385px;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	height: 420px;
    	width: 770px;
    	padding: 0px;
    }
    
    #top {
    	height: 120px;
    	padding-top: 20px;
    	padding-right: 40px;
    	padding-bottom: 0px;
    	padding-left: 20px;
    }
    
    #middle {
    	height: 240px;
    }
    
    #bot {
    	text-align: right;
    	padding-right: 40px;
    }
    .square {
    	border: 1px solid #CCCCCC;
    	float: right;
    	height: 80px;
    	width: 80px;
    	margin: 2px;
    }
    #clear {
    	clear:both;
    	float:right;
    }
    h1 {
    	text-align: right;
    }
    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled</title>
    <link href="green.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="container">
    <div id="top"><h1><img src="images/logo.gif" /></h1></div>
    <div id="middle"><div class="square">3</div><div class="square">2</div><div class="square">1</div>
    <div id="clear"></div>
    <div class="square">6</div><div class="square">5</div><div class="square">4</div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean porttitor wisi luctus arcu. Sed non orci at quam gravida cursus. Nunc sagittis vehicula sem. Aliquam suscipit sapien pretium est. Duis ut est et eros pellentesque sagittis. Aliquam at lorem. Fusce dictum metus sit amet nibh. Sed imperdiet. Sed nibh. Integer et magna.
    </div>
    <div id="bot">link link link link</div>
    </div>
    </body>
    </html>

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are all the thumbnails going to be the same uniform size? You can just limit the width of the container and they will all line up underneath each other when they run out of room on the top row.

  3. #3
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, they are all going to be the same size, thatís a good idea, hadnít thought of that. The only down side is I want to use the same layout on several pages but with a different amount of thumbnails, so Iíd have to set the container to different widths for each page. That is only a small problem though.

    If anyone does have a fix for IE using my first method, Iíd still like to know.


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
  •