SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: class or id?

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    call-e-for-nea
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    class or id?

    Im trying to display rows of thumbs
    here is my css
    Code:
    #divContainer {
    	clear: both;
    	width: 664px;
    }
    #divMain {
    	width: 542px;
    	float: left;
    }
    #divRight {
    	float: right;
    	width: 122px;
    }
    .divNewRow {
    	width: 542px;
    }
    .divThumbBox {
    	border: 2px solid #FFFFFF;
    	float: left;
    	width: 130px;
    	padding-bottom: 10px;
    	font-family: "Trebuchet MS", Tahoma;
    	font-size: 0.8em;
    }
    .imgThumb {
    	height: 100px;
    	text-align: center;
    	background-color: #CCCCCC;
    	padding-top: 5px;
    }
    My right div keeps dropping under my main div im sure its the broken box model problem but i have no idea none on how to fix it.

  2. #2
    SitePoint Enthusiast tenfingers's Avatar
    Join Date
    May 2004
    Location
    Alberta, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is just a stab: It would look like you're going for pixel perfection, which might not be as pure as the math would suggest. That's usually when the box model becomes a problem, which is always worth avoiding, IMHO.

    Perhaps go with a main div that is more elastic, and only float the right div, not the main. This will let the content flow into the main according to what will fit, regardless of width. Or you could absolutely position your right column, rather than floating it, and set your right margin on the main div to 125px. If you center the content within your main div, whatever flows in there will always look proportional.

    Then to go way out in left field, is there any one order to list width and float in the css? I usually put float first--I know, wait for the experts--they can see things that escape the common eye ;-)

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    call-e-for-nea
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks tenfingers ill try that and get back soon

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I couldn't see anything wrong with your code but you didn't supply the html so we have to guess how its put together .

    If you put it together like this then I don't see the problem (except that you could make the dimensions more snug if required).

    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    #divContainer {
    clear: both;
    width: 664px;
    }
    #divMain {
    width: 542px;
    float: left;
    background:blue;
    }
    #divRight {
    float: right;
    width: 122px;
    background:red;
    }
    .divNewRow {
    width: 542px;
    }
    .divThumbBox {
    border: 2px solid #FFFFFF;
    float: left;
    width: 130px;
    padding-bottom: 10px;
    font-family: "Trebuchet MS", Tahoma;
    font-size: 0.8em;
    }
    .imgThumb {
    height: 100px;
    text-align: center;
    background-color: #CCCCCC;
    padding-top: 5px;
    }
    </style>
    </head>
    <body>
    <div id="divContainer"> 
    <div id="divMain"> 
    	<div class="divThumbBox">
    	 <div class="imgThumb">thumb</div>
    	</div>
    	<div class="divThumbBox">
    	 <div class="imgThumb">thumb</div>
    	</div>
    	<div class="divThumbBox">
    	 <div class="imgThumb">thumb</div>
    	</div>
    	<div class="divThumbBox">
    	 <div class="imgThumb">thumb</div>
    	</div>
    	<div class="divThumbBox">
    	 <div class="imgThumb">thumb</div>
    	</div>
    	<div class="divThumbBox">
    	 <div class="imgThumb">thumb</div>
    	</div>
    	<div class="divThumbBox">
    	 <div class="imgThumb">thumb</div>
    	</div>
    	<div class="divThumbBox">
    	 <div class="imgThumb">thumb</div>
    	</div>
    </div>
    <div id="divRight">Right</div>
    </div>
    </body>
    </html>
    Paul

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    call-e-for-nea
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is the html Paul
    Code:
    <div id="divContainer">
    <div id="divRight">RIGHT</div>
    <div id="divMain">
    
    <div class="divNewRow">
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    </div>
    
    <div class="divNewRow">
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    </div>
    
    <div class="divNewRow">
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    </div>
    
    <div class="divNewRow">
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    <div class="divThumbBox"><div class="imgThumb">img</div></div>
    </div>
    
    </div>
    </div>
    this gives me a 4x4 layout of thumbs but when say only 11 thumbs are displayed the layout breaks.
    Also IE has decided divMain to clear the divRight all on its own. Ive gotten the right to stay still by doing this
    Code:
    #divContainer {
    	clear: both;
    	width: 664px;
    }
    #divMain {
    	margin-right: 120px;
    }
    #divRight {
    	float: right;
    	width: 120px;
    }

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That code still seems to work !

    You get 4 rows of 4 images and the right side stays to the side (thats without the 120px margin on divmain because that won't make much sense as the code stands).

    Have you got a link to a page that's broken or the code that shows the broken layout. (There may be a 3 pixel float jog to consider but it doesn't seem to be affecting the code you have given.)

    Paul

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    call-e-for-nea
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    brb Paul

    Give me 15 2o min

  8. #8
    SitePoint Enthusiast tenfingers's Avatar
    Join Date
    May 2004
    Location
    Alberta, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    .thumbs{text-align:center;}
    .thumbs img{margin:2px;}
    .thumbs em{display:none} /* to keep Bobby off your back if these are links */
    Code:
    <p class="thumbs">
    <img><em> . </em>
    <img><em> . </em>
    <img><em> . </em>
    <img><em> . </em>
    </p>
    Painless, and light weight--should flow right in to your fixed width quite nicely.

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    call-e-for-nea
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Paul O'B, tenfingers.

    cheers!


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
  •