SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Divs next to each other...

    Hey pplz...
    I need help!
    I'm working on a site a the moment. I've got a div for a header, then i need three divs across and then a menu underneath. I need the whole thing to be centered.
    So I've got the header and it's fine, then I put in the three divs across, but they go underneath each other, so then I put in float: left; and they DO go next to each other, but they are no longer centered like the rest of the page.
    How can you center divs with float: left?
    Please help me because I'm stumped!
    THanks guys!

    bo5ton

  2. #2
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can put everything in a centering container.

    HTML Code:
    <head>
    <style type="text/css">
    body{
    text-align:center; /* To center everything */
    }
    
    div#centering_container{
    text-align: left;
    margin: 0em auto; /* also for centering */
    }
    
    div#box_to_be_centered{
    whatever : rule; /* Insert your styles here */
    }
    </style>
    </head>
    <body>
    <div id="centering_container">
      <div id="box_to_be_centered">
        Centered
      </div>
    </div>
    </body>

  3. #3
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    so does text-align center everything? Not just text?

  4. #4
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, as far as I can tell. You SHOULD be able to give the left and right margins a value of auto, but this of course doesn't work in IE.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    so does text-align center everything? Not just text?
    IE5 and ie5.5. and ie6 (quirks mode) will use text-align centre to not only centre text but also centre nested block level elements even though it shouldn't

    Other browsers use margin-left:auto and margin:right:auto on a block level element with a specified width in order to center.

    However you cannot centre floated elements with any of the above techniques as floats are only float left or float right.

    If your floats are a fixed sized and need to be a fixed with apart then you can put them inside another container and center that instead as shown by maxor above. (This is the easiest method.)

    If you are expecting the floats to be centred but fluid distances apart then there is no easy way to do this without hacks. You can use display:table and display:table-cell for mozilla which is quite complicated but doesn't work in ie. You can also use display:inline-block for ie but the elements have to be constructed with inline elements. Both would need to be hidden from each other.

    The easiest option is probably just to give the floats percentage margins that place them more or less where you want.

    Sadly this is an area where browsers have not supported display:inline-block correctly which would have solved the issue easily.

    Paul

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Yes, as far as I can tell. You SHOULD be able to give the left and right margins a value of auto, but this of course doesn't work in IE
    It does work in ie6 in standards mode

    See the faq sticky thread for more info

  7. #7
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Here is the page that I am working on - i'm just wondering what is the best way to do this... is this the best way to 'div'ide it up? Or would you suggest another?
    And if this is the right way, how would you code it...

    Thanks... Image Pending...
    Attached Images Attached Images

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

    Well if they are all fixed widths then something like this should suit.

    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 type="text/css">
    body {
    text-align:center;/* for ie5 and 5.5.*/
    min-width:750px;/* for moz*/
    }
    #outer{
     width:750px;
     margin-left:auto;
     margin-right:auto;
     background:yellow;
     border:1px solid #fff000;
    }
    #header {
     background:red;
     border:1px solid #000;
     margin:10px 0;
    }
    #left, #center, #right {
     float:left;
     width:248px;
     background:green;
     border:1px solid #000;
     margin-bottom:10px;
    }
    #center {background:blue;}
    #right {background:pink;}
    #footer{
     clear:both;
     background:#ffffcc;
     border:1px solid #000;
     margin-bottom:10px;
    }
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div id="header"> 
    	<p>This is the header text</p>
      </div>
      <div id="left"> 
    	<p>This is some filler text : This is some filler text : This is some filler 
    	  text : This is some filler text : This is some filler text : This is some 
    	  filler text : This is some filler text : This is some filler text : This 
    	  is some filler text : </p>
      </div>
      <div id="center">
    	<p>This is some filler text : This is some filler text : This is some filler 
    	  text : This is some filler text : This is some filler text : This is some 
    	  filler text : This is some filler text : This is some filler text : This 
    	  is some filler text : </p>
      </div>
      <div id="right">
    	<p>This is some filler text : This is some filler text : This is some filler 
    	  text : This is some filler text : This is some filler text : This is some 
    	  filler text : This is some filler text : This is some filler text : This 
    	  is some filler text : </p>
      </div>
      <div id="footer">
    	<p>This is some filler text : This is some filler text : This is some filler 
    	  text : This is some filler text : This is some filler text : This is some 
    	  filler text : This is some filler text : This is some filler text : This 
    	  is some filler text : </p>
      </div>
    </div>
    </body>
    </html>
    Paul

  9. #9
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks man! Worked a treat! Are you some sort of CSS genius?

    There are people on this site, namely you Paul, who help everybody out and as far as I've seen always are right - you don't get enough recognition... Thanks again man - I'm so grateful!

    bo5ton

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You're welcome


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
  •