Grow your CSS skills. Land your dream job.

centering a floated item

  • # May 7, 2008 at 5:45 pm

    Hi everybody,

    My situation is this: I got a pagewrap with in it three div’s. A left div, a main div and a right div. The left one is about 200px widt and must be on the left :geek: the right one must be on the right :geek: and as you expected the main div must become in the middle of them. My question is: how can you center that main div? Because it will float left automatically. Here is a sample code to show what I want.

    P.S. To be one step before some critics: I don’t use inline style-elements normally, but just for now to test and post this example I used them ;)

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    left
    this must be centered between those other div’s

    # May 8, 2008 at 9:31 am

    Hi,

    how about this for an answer, got it from ‘CSS Cookbook’

    Code:

    left
    this must be centered between those other div’s

    CSS to get the effect is:

    Code:
    #page-wrap {
    width:900px;
    background:#000;
    }
    #enclose {
    width:700px; /*total width of left and maincontent divs*/
    background:#000099;
    float: left; /*floats it to the left of the page – leaving room for the right column */
    }

    #left {
    width:200px;
    background:#000099;
    float: left;
    }

    #maincontent {
    width:500px;
    background:#009900;
    float: right; /*floated to the right of the left column (but will still position to the left of the rightmost column /*
    }

    #right {
    width:200px;
    background:#990000;
    float: right;
    }

    So basically this method works by enclosing the left and maincontent divs in an additional div which is then floated to the left.

    hope that helps.

    # May 8, 2008 at 10:27 am

    Thanks for the fast response, but here on mac and safari / firefox this is the result:

    [img]http://img294.imageshack.us/img294/9718/afbeelding1ll7.th.jpg[/img]

    the centered div pushes the right div down…

    Somebody else have an idea?

    # May 8, 2008 at 10:50 am

    This is the image i get on XP, FF

    don’t know why it doesn’t work, should do.

    Could you have floated the ‘enclose div’ to the right instead of the left?

    # May 9, 2008 at 3:46 am

    I didn’t test it further yet (very busy these days) but by reading the code, another question came:

    Quote:
    /*total width of left and maincontent divs*/

    What if I only have the width of the left en the right and want the maincontent div variable, only a min-width of 500px. Will this work then too?

    P.S. I am gone this weekend, speak you all next week again :)

    Edit: I now tested it and it worked. But it’s still not a solution, cause when I want to have the whole thing 100% width and only have the width of the left and right div’s this won’t work. You cant’ make a flexible thing of this…

    # May 9, 2008 at 4:06 am

    You missed a </div> in the code you sended ;)

    I’ve played a little with the css and I think this is more what I want it to be:

    Code:
    #page-wrap {
    width:100%;
    background:#000;
    color: #ffffff;
    font: 11px verdana;
    }
    #enclose {
    width:90%; /*total width of left and maincontent divs*/
    background:#blue;
    float: left; /*floats it to the left of the page – leaving room for the right column */
    text-align: center;
    }

    #left {
    width:10%;
    background:red;
    float: left;
    }

    #maincontent {
    width:80%;
    background:#009900;
    float: right; /*floated to the right of the left column (but will still position to the left of the rightmost column /*
    }

    #right {
    width:10%;
    background:green;
    float: right;
    }

    But it’s still not perfect, It won’t work if you give the div’s minimum-widths…

    I was thinking… Isn’t this something like the sticky-footer? You know the header, you know the footer, but you don’t know the content…

    I tried something like this:

    div#enclose {
    width: 100%;
    margin: 0 -25em 0 0;
    float: left;
    }

    But it didn’t work allready ;)

    Another point with this, is I think that we must think about not using to many empty divs…

    # May 9, 2008 at 6:18 am

    Considering you’d only know the width of the sidebars, you could float the divs (left and right) above the main content-div. This, of course, wouldn’t be good for SEO nor accessibilty as you’d have to heap through the sidebars before the content.

    Right after the body-start:

    Code:

    This is above the #page-wrap

    This is below the #page-wrap

    …then the CSS:

    Code:
    body { margin: 0; padding: 0; }
    #page-wrap { width: auto; border-top: 1px black solid; border-bottom: 1px black solid; }
    #left { width: 200px; float: left; background-color: #0f0; }
    #right { width: 200px; float: right; background-color: #c0c; }
    #main { width: auto; padding: 0 5px; margin: 0 205px; background-color: #0fe; }
    .clearboth { clear: both; height: 1px; }
    p { font-weight: bold; }

    In this example you only give the #main margins, and the sidebars gets fixed widths. If you’d use this I’d recommend using overflow: hidden; on the sidebars, to not interrupt with the main content area.

    # May 9, 2008 at 11:18 am

    Ok then,

    As i understand it, you are creating this 3 column display.
    the left and right column are fixed and the maincontent div is variable.

    If that is correct then why not simply use the max / min-width selectors in the maincontent div.

    eg

    Code:
    div #maincontent {
    min-width:10%;
    max-width:80% /*assuming left column is 20%*/
    }

    This should also work if you want to set the widths to either em, px etc.

    see here for further explanation: http://reference.sitepoint.com/css/max-width

    # May 13, 2008 at 10:16 am

    I am not sure if this is exactly what you are looking for, but your story sounds alot like the "holy grail" to me.

    So you may find this interesting, and maybe it helps:
    http://www.alistapart.com/articles/holygrail

    # May 14, 2008 at 1:12 pm
    "Argeaux" wrote:
    I am not sure if this is exactly what you are looking for, but your story sounds alot like the "holy grail" to me.

    So you may find this interesting, and maybe it helps:
    http://www.alistapart.com/articles/holygrail

    I am going to study that article and let you know if it solved the problem. Thanks in forward!

    # May 15, 2008 at 1:30 pm

    The reason why your centre column is not centering is due to the fact that there are 2 major errors in your code that you need to fix first.

    1. You have a div with ID of ‘page-wrap’ that contains floated elements.
    You have given all your ‘columns’ a fixed width but not the containing div. One of the CSS rules states that when a element contains floated, in needs to have a fixed width (or em based). What is happening is your right ‘column’ is floated right but has no boundaries as to what point it will float. The wider your browser is made the further that ‘column’ floats.
    So therefore, add a 800px width to div ‘page-wrap’ and give it the boundary it needs. (200px + 400px + 200px = 800px)
    That will now but all three ‘column’ right against each other. That takes care of one problem.

    2. The next problem in your code is pertaining to the above mentioned containing ‘page-wrap’ div.
    As it contains floated elements, you not only need to give it a fixed with like we have done, but, you also need to take care of it´s position in the ‘flow’ of the document. Your three ‘columns’ are floated and are taken out of the ‘flow’ of the document. The problem is this: ‘page-wrap’ has no float but contains floated elements and therefore does not ‘wrap’ the floated elements it contains. In order to do this, add ‘position: relative’ to page-wrap’ or float it too. One or the other would do but I would use the first mentioned property. The reason why i would use ‘position: relative’ is that if you wanted to place a ‘footer’ div below that needs to ‘clear’ all your ‘columns’, it would clear the containing ‘page-wrap’ div too, witch is not what you want.

    Hope that helped you and did not put you to sleep.

    Q.

    # May 15, 2008 at 4:31 pm

    Set the page-wrap div with a width as a percentage, that way your centre column could be fluid.

    # May 15, 2008 at 4:46 pm

    I’ve red the article about the holy grail and tested it. It’s working perfect in Firefox and Safari here :)
    I am still working on my elastic website, when it’s ready I’ll post a link here in the forum.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".