Need some CSS layout assistance

Discussion in 'Web Design and Development' started by torndownunit, Mar 12, 2009.

  1. torndownunit macrumors regular

    Joined:
    Jan 4, 2009
    #1
    While new to CSS, I am generally decent at figuring out layouts either on my own, or by working from examples I find online. I just can't get a layout I am working on right though. There are a few too many factors going on with positioning and floats. I can get parts of it to work, but can't seem to combine everything I want to do.

    From the screenshot below:

    The 'wrapper' div is centered, and it's width is a fixed size (800 px). The height is supposed to be autosized to fit the content.

    I seem to be able to get the wrapper, and the logo correct. When I try to add more than that I just get into a mess. I thought I almost had it at one point, then the wrapper would not auto size in height with the content.

    I think there are 2 main problems I am having difficulty with position, z-index, and any floats I need to use. 2nd, I don't know how to set up the divs properly in the html so that are in the correct order. There are samples around like this one: http://www.code-sucks.com/css layouts/fixed-width-css-layouts/2-column-css-layouts/fw-14-2-col/ but I want to have the navigation top aligned with the logo.

    Here is a mockup of what I am going for. Any tips would be HUGELY appreciated as I am ripping out my hair trying to get it.


    [​IMG]

    This is the CSS I have that is working, anything I add from here turns into a mess:

    Code:
    #wrapper { background-color: #333; height: auto; width: 795px; top: 10px; position: relative; z-index: 1; visibility: visible; margin: auto; padding: 0; border: solid 3px #fff; -moz-border-radius: 1em; border-radius: 1em; }
    
    #logo { background-image: url(../media/iclogo_black.png); background-repeat: no-repeat; height: 200px; width: 205px; position: absolute; visibility: visible; float: left; margin-left: 8px; }
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    From the snippet of CSS that looks mostly alright. On the #logo, since you have it positioned absolute the float assigned to it is pointless. I don't think it has any negative impacts, but just saying.

    You seem to be on the right track. The logo is getting absolute positioned. Then you can apply a logo size margin (or even padding) left to the navigation and content parts. Then the footer won't have that margin and so fills the full width. That's the theory anyways.
     
  3. miles01110 macrumors Core

    miles01110

    Joined:
    Jul 24, 2006
    Location:
    The Ivory Tower (I'm not coming down)
    #3
    I will work on the details of your layout, but you should try to find a different way to do rounded corners. -moz-border-radius isn't standard yet...
     
  4. miles01110 macrumors Core

    miles01110

    Joined:
    Jul 24, 2006
    Location:
    The Ivory Tower (I'm not coming down)
    #4
    Ok, your main problem was probably that you set the width of the wrapper div but then the other divs plus the margins didn't fit in the remaining space.

    So here's your simple HTML;

    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>Wrapping Divs</title>
    	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    
    <body>
    
    <div id="wrapper">
    
    	<div id="logo">
    	logo
    	</div>
    
    	<div id="nav">
    	nav
    	</div>
    
    	<div id="content">
    	content
    	</div>
    
    	<div id="footer">
    	footers
    	</div>
    
    </div>
    
    </body>
    </html>
    
    
    And here's the accompanying CSS.

    Code:
    #wrapper {
        width:800px;
        height: auto;
        padding:10px 0;
        border:1px solid #000;
        margin:auto;
        background-color: #eeeeee;
     }
     
    #wrapper:after {
        content:'';
        display:block;
        clear:both;
     }
     
    #logo {
    	background-color: #aaaaaa;
        float:left;
        display:inline; /*required by IE6*/
        width:200px;
        height: 205px;
        margin:0 10px 0 10px;
        text-align: center;
     }
     
    #nav {
    	background-color: #aaaaaa;
        float:left;
        display:inline; /*required by IE6*/
        width:565px;
        height: 60px;  /* Can be set to anything */
        margin:0 5px 0 5px;
        text-align: center;
     } 
     
    #content{
     	background-color: #aaaaaa;
        float:left;
        display:inline; /*required by IE6*/
        width:565px;
        height: 300px;  /* Can be set to anything */
        margin:10px 0px 0px 5px;
        text-align: center;
     }
     
    #footer {
    	background-color: #aaaaaa;
        float:left;
        display:inline; /*required by IE6*/
        width:780px;
        height: 40px;  /* Can be set to anything */
        margin:10px 10px 0 10px;
        text-align: center;
     } 
    If you change the margins you'll most likely have to change the widths of the divs as well. If the divs don't display in line, they are too wide.
     
  5. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #5
    miles01110, thanks for the help. I am looking at your example and learning a lot. I find it REALLY tough to figure out floats, display, and positioning without looking at examples I am working on.
     
  6. miles01110 macrumors Core

    miles01110

    Joined:
    Jul 24, 2006
    Location:
    The Ivory Tower (I'm not coming down)
    #6
    No problem. Even after doing this for a while, I still find it very helpful to just do toy examples like the one I posted. It's a lot less frustrating to see colored boxes not do what you want instead of your entire webpage looking like a Picasso.
     
  7. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #7
    Miles, just one more quick question.

    I noticed that the wrapper's height is set to auto but #content has a set height of 300 px . If I want the wrapper to increase in height when content is added to it (eg a lot of text), does the content need a height that is not fixed as well?

    Thanks
     
  8. miles01110 macrumors Core

    miles01110

    Joined:
    Jul 24, 2006
    Location:
    The Ivory Tower (I'm not coming down)
    #9
    Yes, you could set

    Code:
    #content{
        height: auto;
    }
    or since auto is the default option you could just eliminate it all together. I just used a fixed height in the example so it would show up.
     
  9. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #10
    You can also use the min-height property if you don't want the container getting too small.

    Though it's not supported by IE6 (as usual) so see here for info on combating that if needed.

    However as longs your site still works and remains functional and accessible, I wouldn't worry about making it 100% the same in defunct browsers such as IE6. (Graceful degradation & progressive enhancement)
     
  10. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009

Share This Page