Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Oct 2005
    Posts
    3
    Member #
    11746
    I'm trying to create a centered absolute-positioned layout with a header and a main column that will be offset 150% o the left from the center.

    I put that column within a wrapper with a width of 100% and then I set main column's width to 100% as well, wich I think should stretch it to the width of the containing div. It works fine in the Explorer, but Firefox actually thinks that 100% is the width of the viewing area, which stretches the column way to the right and breaks the whole layout.

    I can't figure out what am I doing wrong..=( Any help will be greatly appreciated!


    Doctype is "strict".
    The page itself is here: http://www.uvainstruments.com/index_v2.html
    CSS for positioning is here:
    http://www.uvainstruments.com/includes/position.css

    HTML:

    <body>
    <div id="header">
    <!--horizontal nav-->
    <div id="menu">
    Menu items
    </div>
    </div>

    <div id="wrapper">
    <div id="home">Some text</div>
    </div>

    </body>

    CSS:

    body, html {
    height: 85%;
    }

    #header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    text-align: center;
    }
    #wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 131px;
    }

    #home {
    height: 663px;
    position:relative;
    top: 8px;
    left: 50%;
    margin-left: -150px;
    height: 100%;
    width: 100%;

    }

  2.  

  3. #2
    Senior Member Rince's Avatar
    Join Date
    Nov 2004
    Posts
    183
    Member #
    8318
    offset 150% o the left from the center.
    I assume you mean offset 150px to the left from the center.

    The firefox redition of your page is the correct one. If you set #home to width:100% then that means "make #home exactly the same size as it's parent", which is wraper, which is 100% of the screen width. Ergo, #home is the screen size but shifted out by 50% to the right and back 150px to the left.

    Remember you box model. Width is the size of the content inside the element. Then you add margin, add border width and add padding on top of that. You're probably too used to the old table box model where the padding was subtracted form the box model.

    You have position:relative the #home. I suspect you have miss understood what position relative means. But realy, do you need to position anything? For example, look at you #wrapper. Could you delete that div completly. It's not actually doing anything. You don't need to position and tell the top to be 131px cause you have a header in there. If you don't position the header and remove the top and left form it, then add 31px padding on the botom of the header then you'll find the #wraper div is located in the correct part of the screen. Nothing positioned, no left, no top settings. Just use height, width, padding and margin and allow things to come one after the other.

    The more tags and css you use the more likely there will be a problem. So just use the minimum that creates the look you want. e.g.
    Code:
    body, html {
    height: 85%;
    }
    
    #header {
    height: 100px;
    text-align: center;
    margin-bottom: 31px;
    }
    #wrapper {
    /* just don't need this */
    }
    
    #home {
    /* Not quite sure how you really want this bit. */
    /* Maybe this would give you want you want. I'm assuming there's gona be another column going into the 150px gap on the left, in which case, left just add that extra column. */
    }
    #additionalcolumn{
    float:left
    width:150px;
    }
    <body>
    <div id="header">
    <!--horizontal nav--> 
    <div id="menu">
    Menu items
    </div> 
    </div>
    
    <div id="wrapper"> 
    <div id="additionalcolumn"> stuff </div>
    <div id="home">Some text</div>
    </div>
    
    </body>

  4. #3
    Junior Member
    Join Date
    Oct 2005
    Posts
    3
    Member #
    11746
    Thank you, Rince, for your suggestions!

    Tha cleaned my code a lot!
    Also it doesn't solve the 100% width problem..=(

    what I want to do is for the "home" div to be offset from the center point by 150px to the left - and I don't know how to explain this better. My left column will be 250px, so that way the content will be centered at any screen resolution and it will take up the whole screen at 800X600. It will take up 400px to the left of the center point and all the space available to the right.

    I guess I might just have to redesign the layout and give "home" a set width =(

  5. #4
    Senior Member Rince's Avatar
    Join Date
    Nov 2004
    Posts
    183
    Member #
    8318
    Also it doesn't solve the 100% width problem
    It does. You don't want the #home to be 100% width. You want to pick a smaller number.

    In general, mixing px and % together makes a mess. You want the left edge of your #home to be a set distance in px form the center of the page, but at the same time you want to have the rigth hand edge of #hom to grace the right hand side of the screen. Problem is, you don't know how far the right is form the center. You can't set width:50%+150px; which I think is what you are trying to get.

    What you can do, is set the left colum to a set width, float it left and then the content in #home will naturally take up whatever space is left.

    Also, don't think so much in columns. If you want colums use a table. If you don't want tables, then don't try to emulate tables. Cause then you just end up with poor quallity tables when you could have done a better job with the real thing. Play with you layout. Be creative. Things don't have to line up in rows and columns any more. Let the html do what it normally does and tweek it only when you have to.

    My tip for people struggling with css is to not do the layout of your page yet. Do the content. Just put everthing one after the other down the page. Then add some css to move just the bits you need to move. It's better to use your content to layout your page than to build a load of boxes in a layout into which you then shoehorn in your content.

    Content, colours, hight and widths then lastly thing about position or float if you need it.

  6. #5
    Junior Member
    Join Date
    Oct 2005
    Posts
    3
    Member #
    11746
    thank you Rince!

    This is good advice.
    I ended up redesigning the layout of the page to make the content fixed width and centered.

    It is a good think that this is actually my own project.

    Most of the time I have to word with a designer, and I HAVE to go with tables just because of the nature of the designs..=((

    It's tough.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:42 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com