[Thinine]

I'm trying to redo my MUG's webpage and not having much luck with getting the elements positioned the way I want them. Essentially, I have a container class with three elements inside it, a banner, a nav column, and the main text area. The nav column and the text area should be right next to each other, with the banner above both of those, all inside the container. And I want the container to be centered on the page, but when I set the container margin to auto, I lose positioning control of the boxes inside it. But when I manually position the container, I lose the centering but keep the positioning control.

Any general styling tips or recommendations would be appreciated as well. And the page is very rough right now, since I want to get the positioning done first.

Old Page
New Page
New Page CSS

[CaptainHaddock]

Simple. Your container has to have position:relative if you want to use position:absolute on the items inside it. Otherwise, the items inside will position themselves according to the body and not to your container.

I wasted several hours trying to figure that out the first time I used CSS. Now I automatically make every div "position: relative" just in case I need to position something inside it.

[Synotic]

This is just a basic layout I made once when trying to help someone out. It isn't exactly like your design, but you should at least be able to adapt some of the ideas. Basically set a width for the #main div and give it 'margin: 0 auto'. Then you can simply cut out the right column and readjust #content's right margin accordingly. Alternatively, if this doesn't help at all, perhaps I'll take a closer look at your site and actually help you directly

Also CH, it doesn't seem like he's actually using absolute positioning, rather just specifying it with actually moving anything around... I might be missing something though.

[Diggory Laycock]

.

[Thinine]

Thanks for the suggestions, but I'd like to avoid any position: absolute's if I can. Ideally, the only manual positioning I'd need to do is the nav column, with the content automatically filling the rest of the space. I'll look at it some more tonight.

[Simon Mundy]

Originally posted by Thinine:
Thanks for the suggestions, but I'd like to avoid any position: absolute's if I can.

Any reason for that?

I like having a header absolutely positioned, as it means I can create markup in the order I want:-

e.g. (pseudo-markup)

< div id="layout" >

< div id="content" >
< h1 >My page title< /h1 >
< p >Copy....< /p >

< hr />

< div id="header" >
< ul >
< li >Nav #1< /li >
< li >Nav #2< /li >
< li >Nav #3< /li >
< /ul >

< hr />

< div id="footer" >
< ul >
< li >Nav #1< /li >
< li >Nav #2< /li >
< li >Nav #3< /li >
< /ul >

< /div >

In this example, I can leave my content in the 'correct' order (i.e. content first, nav and contextual links last). Because my 'header' would be set to 100px high and my content is positioned 100px from the top of the layout div.

If I wanted to be strict and only use floats then I am forced to have my headers first which I don't necessarily want for screen readers and other text-only browsers.

Absolute DIVs shouldn't be over-used, I'm not doubting that, but there is certainly a place for them if you want full control the structure of your markup.

[tsukurite]

okay, lessee...

margin for the container needs to be:
#container{
margin: 0px auto;
{

This sets the right and left margins only.

However, there's an issue in one of the IE5/Win's that ignores this. So, you also need to set:
body{
text-align: center;
}

This means you'll have to reset the text-alignment for the child elements, but you can do that in #container and you should be good to go.

Also, I noticed you didn't clear the floated elements. This isn't a big deal except that #container loses track of them, and won't extend itself far enough down the page to actually contain them. You can deal with this several ways, but I tend to use an empty div tag:
.clear{
clear:both;
width: 0px;
height: 0px;
line-height: 0px;
}

Note: you will have to put in a non-breaking space so the div actually renders in the page. Usually you only need to have one of these to show #container where the end of the floated content is. Not the best practice probably, but easy, quick and predictable.

Once #container extends far enough to surround the content, you can start messing with borders and width again. <personal opinion>If you know you have a fixed width layout, forgo using width: auto; I use that more with flexible layout, but browsers don't always get it right, and specifiying width is more reliable.</personal opinion>

Hope that helps!



Regards,
Ben V

edit: for typo

[Thinine]

Thanks for the help so far. It's getting closer to what I want, but it doesn't seem to like the nav column anymore. I'm including the markup and CSS. I just have the areas draw borders so I can see when they are positioning themselves. As you can see, the container now properly includes the main text area, but not the nav colum.

Test Page
Test CSS

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test MUG Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.jonshier.com/test.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<div class="clear"> </div>
<div id="masthead">
Banner
</div>
<div id="navcolumn">
<ul>
<li><a id="home" title="Return to the ISUMUG homepage." href="http://www.isumug.org/">Home</a></li>
<li><a id="members" title="Paid members and officers of the ISUMUG." href="http://www.isumug.org/members/">Members</a></li>
<li><a id="faq" title="Frequently asked questions about Macs at ISU." href="http://www.isumug.org/faq/">FAQ</a></li>
<li><a id="links" title="Links to popular and useful Mac sites." href="http://www.isumug.org/links/">Members</a></li>
<li><a id="feedback" title="Send us feedback!" href="http://www.isumug.org/feedback/">Feedback</a></li>
<li><a id="filmfestival" title="Main page for the ISUMUG film festival." href="http://films.isumug.org/">Film Festival</a></li>
<li><a id="forums" title="ISUMUG discussion forums." href="http://boards.isumug.org/">Forums</a></li>
</ul>
</div>
<div id="maintextarea">
<?php 
require('rss_fetch.inc');
$num_items = 5;
$url = 'http://www.macnn.com/rss/macnn16.rss';
$rss = fetch_rss($url);
$items = array_slice($rss->items, 0, $num_items);
foreach ( $items as $item ) {
        $title = $item[title];
        $url   = $item[link];
        echo "<a href=$url>$title</a></li><br>\n";
}
?>
</div>
</div>
</body>
</html>

Code:
body { 
	padding: 0;
	color: #000;
	background: #fff;
	text-align: center; /*IE5 fix for container margin*/
	font-family: arial, helvetica, sans-serif;
}

#container {
	margin: 0px auto; /* centers whole on pg */       
	border:1px solid #666;
	voice-family: "\"}\"";
	voice-family:inherit;
	text-align: left; /*return text alignment to normal*/
	width:750px;
}

.clear{
	clear:both;
	width: 0px;
	height: 0px;
	line-height: 0px;
}

#masthead {
	font-family: times;
	height: auto;
	font-size: 32px;
	background: red;
	color: white;
	border: 1px solid #666;
	padding: 1px 10px 1px 10px;
}

#navcolumn {
	width: 125px;
	margin: 0px auto;
	border: 1px solid #666;
	font-family: times;
	float: left;
	text-align: center;
	position: relative;
}

#navcolumn ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#navcolumn li {
}

#navcolumn li a {
	display: block; /* lines go all the way */
	text-decoration: none;
	padding: 1px  10px 1px 10px;
	color: white;
	background: red;
}
        
#navcolumn li a:hover {
	text-decoration: none;
	background: white;
	color: red;
}
        
#maintextarea {
	font-family: times;
	border: 1px solid #666;
	width: 625px;
	margin: 0px auto;
}

[Synotic]

Originally posted by Thinine:
As you can see, the container now properly includes the main text area, but not the nav colum.

The clearer div affects the floated items, it says that no floated items can be floated next to it. The way you have it right now:

Code:
|--------clearerdiv--------|
|floateddiv<<<<<<<<<<<<<<<<|
|<<<<<<<<<<<<<<<<<<<<<<<<<<|
|<<<<<<<<<<<<<<<<<<<<<<<<<<|
|<<<<<<<<<<<<<<<<<<<<<<<<<<|
|<<<<<<<<<<<<<<<<<<<<<<<<<<|
|<<<<<<<<<<<<<<<<<<<<<<<<<<|

If that makes any sense Basically 'clearerdiv' shows the full width of the the div, the '-' are impenetrable barriers. Right now, your floated div starts after your impenetrable barrier. The "<" somewhat represents the 'free area'. Because the sidebar is floated, it no longer takes up any space in the layout, which is why the content occupies the free space. It is also why it doesn't affect the height of the container div.

Normally, if you were to put a div after the sidebar/floated div, it would simply occupy the free space, just like the content div right now. But if you were to stick the clearerdiv in, with its impenetrable walls, it wouldn't allow any free space to the left or the right of it. And because the clearer div itself isn't floated, it does occupy space. And since it is directly after the floated div, it expands the height of its container, to that of both it's floated and and nonfloated elements.

Using a few tricks (line-height, height, font-size etc...), the div doesn't actually take up any visual space.

Keeping that all in mind (if you didn't get lost along the way), you should put the clearer div after both your sidebar and main text area. If you need any clarification, feel free to ask

[Thinine]

Thanks for the help. I seem to have the elements positioned like I want them. I'll probably be back to ask how to position things within the the main text area, but that'll be later.

[Thinine]

I'm back again and need more positioning help. This time, I need to position two small columns of links next to each other within another positioned area. Once they're side by side, I'd like to have the both of them be centered within the larger area. It should be clear what I want to do when you look at the page. Again, your help would be appreciated.

Site
CSS

[Chuckit]

I think what's screwing you up is the margin on the <h1> tag. Set that to 0 and the boxes will be right up against each other.

[Synotic]

Originally posted by Thinine:
I'm back again and need more positioning help. This time, I need to position two small columns of links next to each other within another positioned area. Once they're side by side, I'd like to have the both of them be centered within the larger area. It should be clear what I want to do when you look at the page. Again, your help would be appreciated.

Site
CSS

Try wrapping your two news/events columns in a "columns" div and give that div a width of say 415px, and then set "margin: auto" on that wrapper div. Then individually set the news column to float to the left and the events column to the right.

[Thinine]

Thanks. Everything looks good now, aside from the fact that I don't know anything about good design. So right now everything is red and white.