Skip to main content

Forums

This topic contains 12 replies, has 0 voices, and was last updated by  Edwin 11 years, 4 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #22648

    Edwin
    Member

    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

    #47365

    Nodster
    Member

    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.

    #47367

    Edwin
    Member

    This reply has been reported for inappropriate content.

    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?

    #47368

    Nodster
    Member

    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?

    #47384

    Edwin
    Member

    This reply has been reported for inappropriate content.

    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…

    #47387

    Edwin
    Member

    This reply has been reported for inappropriate content.

    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…

    #47390

    koewnet
    Member

    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.

    #47393

    Nodster
    Member

    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

    #47401

    Argeaux
    Participant

    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

    #47416

    Edwin
    Member

    This reply has been reported for inappropriate content.

    "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!

    #47432

    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.

    #47435

    Adam
    Member

    This reply has been reported for inappropriate content.

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

    #47436

    Edwin
    Member

    This reply has been reported for inappropriate content.

    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.

icon-link icon-logo-star icon-search icon-star