SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast kingjacob's Avatar
    Join Date
    Apr 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you cause a div to float in the center?

    Is there a way to cause a div to "float:center;". I'm trying to get one sidebar on the left and one on the right but it just ends up merging. with the center.

    Example: http://opensciencefund.org/support/

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    float:center; is not a valid option. Objects can be floated to the left or right, but not in the middle. Just looking at that page, I'm not sure what you wanted to happen ... can you give us a bit more description?

  3. #3
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    There is no such thing. You have to give the div in question a width, then define it's margin as: x auto x auto, with x being how much you want the top & bottom margins respectfully. You can use shorthand if you want top & bottom be the same value
    Code css:
    div{
    margin: 0 auto;
    width:30%;
    }
    this gives the top and bottom a value of 0 and left/right a value of auto.
    Ryan B | My Blog | Twitter

  4. #4
    SitePoint Enthusiast kingjacob's Avatar
    Join Date
    Apr 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, Im aware there is no such thing thus the " &". What I'd like is the left sidebar to float left then 10px to the right of that the main content then 10px to the right of that be the right sidebar.

    Code:
    /*Basic Structure
    ------------------------------------------------------------ 
    
    */
    #wrapper {
    	width: 1300px;
    	margin: 0 auto;
    	text-align: left;
    	}
    
    
    #content {
    	float: left;
    	width: 650px;
    margin:0px 10px
    	padding-bottom: 10px;
    }
    
    
    #sidebar {
     float: right;
    width: 290px;padding-bottom: 10px;
    }
    
    #sidebar2 {
     float: left;
    width: 200px;
    padding-bottom: 10px;
    }
    
    #footer {
    	clear: both;
    }

  5. #5
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From your link, if you want to have the sidebar floated left and the content floated to the right of it, then this is one option.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
    
    #wrapper {
        border: 1px solid red;
        overflow: hidden
    }
    
    #sidebar {
       width: 25%;
        float: left;
        margin: 0px 0px 0px 0px;
        padding: 10px 10px 10px 10px
    }
    
    #content {
     width: 70%;
        float: right;
        margin: 0px 0px 0px 0px;
        padding: 10px 10px 10px 10px
    }
    </style>
    </head>
    <body>
     
    <div id="wrapper">
     
        <div id="sidebar">
        <h2>Sidebar</h2>
     Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel. 
    Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce 
    pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis
         </div>
     
         <div id="content">
          <h2>Content</h2>
     Vitae quis risus enim. Suspendisse a nulla a, vestibulum eros suspendisse. Magna wisi a ad molestie dolor. Quam vel mollis nulla 
    pharetra. Qui congue inceptos ut vehicula, feugiat ultricies in pellentesque eu, eros aliquid vel nec dis, risus quis feugiat 
    vestibulum praesent at. Ut nam aenean eu, etiam nonummy etiam tortor, arcu augue urna proident donec mattis praesent, vel commodo 
    nulla habitasse sapien ullamcorper condimentum. Ipsum nunc leo dictum magna molestie enim, lacus est, ante habitasse scelerisque 
    dolor leo sodales erat, tristique dapibus nulla vehicula elementum mauris velit, felis a est. Eget sit erat eget arcu donec, 
    montes varius. Volutpat nisl ligula in. Suspendisse nullam dictum suspendisse, ante quam tortor at sed eu. Condimentum pulvinar
         </div>
     
    </div>
    
    </body>
    </html>

  6. #6
    SitePoint Enthusiast kingjacob's Avatar
    Join Date
    Apr 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    From your link, if you want to have the sidebar floated left and the content floated to the right of it, then this is one option.
    Except Im trying to add 2 sidebars, one to the left and one to the right of the content. Thank you though.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    two ways:

    easy way

    html:
    left sidebar
    right sidebar
    content
    footer

    css:
    #leftsidebar {
    float: left;
    width: whatever;
    margin-right: 10px;
    }

    #rightsidebar {
    float: right;
    width: whatever;
    margin-left: 10px;
    }

    #content {
    you don't actually have to do anything here;
    }

    #footer {
    clear: both;
    }

    yay

    harder way
    content-first (for all those rabid SEO drugusers)

    html:
    wrapper
    content
    /wrapper
    left sidebar
    right sidebar
    footer

    css:
    #wrapper {
    float: left;
    width: 100%;
    }
    #content {
    margin: 0 widthofsidebars + 10pxMargins;
    }

    #leftsidebar {
    float: left;
    width: whatever;
    margin-left: -100%;
    }

    #rightsidebar {
    float: left;
    width: whatever;
    margin-left: -mywidth;
    }

    #footer {
    clear this crazy stuff;
    }

    okay done, except won't work well in IE6 unless the page is fixed width... I just give IE6 a fixed width page because I'm lazy and IE6 sucks

    The googles:
    css "holy grail"
    "css floats"
    "css three column layout"

    kthx


    *edit so basically your only problem was that you were also floating #content which means it didn't go fluid in the middle like you wanted but worse it could "see" the floats and you'd rather it had no idea they were there so leave it static and it'll be cool
    like sharks shooting laser beams out of their eyes

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's funny how things collide in this forum!

    there is another thread about the almost same thing.

    and there is a third way: stacked divs and the use of display: inline-block for some of them

  9. #9
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kingjacob View Post
    Except Im trying to add 2 sidebars, one to the left and one to the right of the content. Thank you though.
    You can add as many floated divs as you like for each column/sidebar you want in your page layout.

    I showed only 2 columns/sidebars for demo purposes.

  10. #10
    SitePoint Enthusiast kingjacob's Avatar
    Join Date
    Apr 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Stomme Poes, I went with the harder way and it almost worked.
    Except now the right sidebar is behaving oddly. the below left margin of -250px puts it here but changing it to a lesser value like -240px doesn't cause it to move until -200px which knocks it below the content on the left. I am befuddled.


    #wrapper {
    width: 980px;
    margin: 0 auto;
    text-align:left;
    }

    #contentwrapper {
    float:left;
    width:100&#37;
    }

    #sidebar2 {
    float:left;
    width:200px;
    margin-left:-118%;
    }

    #sidebar {
    float:left;
    width:250px;
    margin-left: -250px;
    }

    #content {
    width:650px;
    margin:0px 0px 0px 90px;
    }
    Last edited by kingjacob; Oct 10, 2010 at 11:15. Reason: stomme not storm

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Your page setup has your wrapper rather small, which is why you've got more than 100% for the left bar. When I look at your wrapper it doesn't look wide enough to fit everyone inside... you have 980px and content is 650px and that leaves you 330px left to fit two sidebars. So your math is weird and browsers mostly do ok with -100% but once you go more or less they start giving you vast differences cross browser (well this might be because in my case the wrapper is always a flexible width and yours is fixed so browsers might all be ending up at the same numbers here).

    To make this work your content box will need margins on both sides that are equal to the widths of your sidebars.
    wrapperr {
    width: 980px;
    }
    #contentwrapper {
    float: left;
    width: 100%; <-- or px width... this could be "980px" too
    }

    #content {
    width: 510px; /*980-200-250=530px; -20px for 10px sidemargins
    margin: 0 260px 0 210px; /* your sidebars plus 10px*/
    }

    #sidebar2 {
    *edit position: relative too;
    float:left;
    width:200px;
    margin-left:-100%; <-- this means 100% of the float above it, contentwrapper
    }


    #sidebar {
    *edit position: relative too
    float:left;
    width:250px;
    margin-left: -250px;<-- sometimes I need to make this a hair larger than the actual width, like -260px
    }

    Also, another thing I forgot: Safari and Chrome? someone else did not like me being able to click links inside these sidebars without adding "position: relative" to them. Not sure why, they should be "higher" than contentwrapper because they are later in source, but Safari insisted.

    Now if you're saying to yourself, 510px is NOT wide enough for #content... well remember you'd have that width anyway if you had the sidebars first and floated. You always have to add up the totals of all the boxes, their padding, their borders AND their margins and it has to not go over the total width of their parent container.

    Off Topic:

    Fritzing.org looks pretty awesome!

  12. #12
    SitePoint Enthusiast kingjacob's Avatar
    Join Date
    Apr 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It turns out there was an extra "div=content" that was mucking things up.


    Off Topic: Fritzing IS Awesome.


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
  •