Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Need some CSS layout assistance

T

torndownunit

macrumors regular
Original poster
Jan 4, 2009
242
0
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.


layout.png


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; }
 
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.
 
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.
 
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.
 
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.
 
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
 
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?
Click to expand...

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.
 
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)
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back