Forums

  • # 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">


    float

    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: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 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 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.

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag