14 replies [Last post]
kallywag
Offline
Regular
Last seen: 14 years 28 weeks ago
Timezone: GMT-6
Joined: 2004-07-09
Posts: 19
Points: 0

I have my site set up tentatively using absolute positioning, but I want to make the site centered with the following requirements:
1. I want all of my divs to have fixed, static widths as they do now.
2. I want the height of the #middle div to stretch to fit #middleinner and #leftmenu, whichever is longer. So if there is no content in #middleinner, the height of #middle will be determined by the content of #leftmenu, and vice versa.

Based on those two requirements, how would I center the #container div and format the #middle, #middleinner and #leftmenu as indicated above. Would I use relative positioning, floats, what and how?

On a minor note. If you're viewing the page in Netscape, you'll notice the copyright text in the footer is not vertically centered within the footer div. How do I vertically align text in a div like that?

jamiep
Offline
newbie
Last seen: 17 years 20 weeks ago
Joined: 2004-07-16
Posts: 3
Points: 0

layout question

hey bro,

hopefuly this is your answer.

i would do it like this.

i wont use your code but ill lay it out as simply as possible (in my head so hopefully it works Smile

<div id="container">
<div id="leftmenu"></div>
<div id="middleinner"></div>
<div id="footer"></div>
</div>

those are basically the divs you need.

to get the centered layout do

body{
text-align:center;
}

to get the layout back to left alignment for the text do

#container{
margin:0 auto;
text-align:left;
}

to get your left nav and maincontent in the right place

#leftmenu{
width:150px;
float:left;
}

#middleinner{
float:left;
}

#footer{
clear:both;
}

then the trick (called FAUX columns) to get your layout to give the illusion that the menu and the content are the same size, you use a background image on your container.

make a 1px high image like your middle content background (basiclaly 150px of brown then white). Add this to the container div

#container{

margin:0 auto;
text-align:left;
background:url(bg.gif);
}

and that should do it from memory.
heres the place to learn it if ive missed something...
http://www.alistapart.com/articles/fauxcolumns/

kallywag
Offline
Regular
Last seen: 14 years 28 weeks ago
Timezone: GMT-6
Joined: 2004-07-09
Posts: 19
Points: 0

layout question

yeah the float: left on both of the divs seems to work good, except in netscape and mozilla, where the background of #middlediv doesn't show up. Any idea why this is? Use netscape to open this page: http://stromengineering.com/new/taupe/ and you'll see what I mean.

If you need to look at the css: http://stromengineering.com/new/taupe/stylesheet.css

Also, the vertical-align attribute doesn't seem to work with the copyright text on the bottom (i think that might be for css3?). And why is it that you can't say, float the left column :left and the right column :right. Why do you have to float them both left?

timhobbs
timhobbs's picture
Offline
Regular
Monterey, CA
Last seen: 18 years 5 weeks ago
Monterey, CA
Timezone: GMT-8
Joined: 2003-10-27
Posts: 37
Points: 0

layout question

If you assign a background image to #middlediv it will not automatically show up. In order to force the background image to show you will need to assign a height to #middlediv. That way, if there is not enough content the div height will still allow the background image to show. If this is strictly a problem for you with netscape/mozilla, you can use "min-height" as IE does not support it.

Hope this helps,
Tim

kallywag
Offline
Regular
Last seen: 14 years 28 weeks ago
Timezone: GMT-6
Joined: 2004-07-09
Posts: 19
Points: 0

layout question

but #middlediv doesn't have any content, just other divs, and i want #middlediv to stretch to the height of the longest of its child divs. how would i do this without setting a fixed height on middlediv to keep the center section fluid?

timhobbs
timhobbs's picture
Offline
Regular
Monterey, CA
Last seen: 18 years 5 weeks ago
Monterey, CA
Timezone: GMT-8
Joined: 2003-10-27
Posts: 37
Points: 0

layout question

The problem is that your content divs inside #middlediv are both floated. You can do two things:

1) Insert a "clearing div" right before you close the #middlediv
2) Do not float #content, but simply give it a left margin greater than the total width of #leftnav.

I prefer method #2 myself, but it only works if the content is always longer than the navigation.

Here is your page in working order using method #2:

<!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">
<head>
<title>Welcome to Strom Engineering Corporation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Erik Kallevig" />
<meta name="description" content="text goes here" />
<meta name="keywords" content="keywords go here" />
<meta name="robots" content="all" />
<link rel="shortcut icon" href="http://stromengineering.com/new/taupe/images/favicon.ico" />
<style>
/******  Basic Elements  ******/

body {
	margin: 0px;
	background-color: #e3e0d9;
	min-width: 684px;
	font-family: verdana, tahoma, arial, times new roman;
	font-size: 11px;
	}

h1 {
	font-family: century gothic, verdana, tahoma, arial, times new roman;
	font-size: 18px;
	color: #5e5e5e;
	text-align: left;
	margin: 0;
	}

h2  {
	font-family: verdana, tahoma, arial, times new roman;
	font-size: 16px;
	color: #5e5e5e;
	padding: 10px 0 10px 0;
	text-align: left;
	}

hr  {
	height: 1px;
	color: #dedede;
	}

p {
	color: #303030;
	font-family: verdana, tahoma, arial, times new roman;
	text-align: justify;
	font-size: 11px;
	margin: 0;
	}

ul {
	list-style-image: url(http://stromengineering.com/new/taupe/images/bullet.gif);
	text-align: left;
	font-size: 11px;
	line-height: 15px;
	color: #514b40;
	}

img { 
	margin: 0px;
	padding: 0px;
	border: 0px;
	}

a 		{text-decoration: none}
a:link		{color: blue}
a:visited		{color: magenta}
a:hover		{color: black}

a.footer		{text-decoration: none}
a.footer:link	{color: #514b40}
a.footer:visited	{color: #514b40}
a.footer:hover	{color: #2d2a23}

/******  Classes  ******/

.copyright {
	font-size: 11px;
	font-family: tahoma, verdana, century gothic;
	color: #514b40;
	}

.lm {
	color: #514b40;
	}

.hlm {
	color: #514b40;
	font-weight: bold;
	background-color: #bcb5a4;
	display: block;
	padding: 3px 4px 1px 4px;
	font-family: tahoma, verdana, century gothic;
	}	

/******  IDs  ******/


#container  {
	width: 684px;
	margin: 0 auto;
	border: 1px solid #bcb5a4;
	height: 100%;
	}

#header {
	text-align: center;
	}

#navbar  {
	text-align: left;
	}

#middle {
	background-image: url(http://stromengineering.com/new/taupe/images/mainbg.gif);
	background-repeat: repeat-y;
	height: 100%;
	}

#content {
	padding: 0 20px 30px 25px;
	width: 445px;
	height: 100%;
	margin: 0px 0 0 170px;
	}

#leftnav {
	width: 166px;
	height: 100%;
	float: left;
	margin: 30px 0 0 0;
	padding: 0 10px;
	}

#footer {
	background: url(http://stromengineering.com/new/taupe/images/footerbg.gif) repeat-x;
	height: 28px;
	text-align: right;
	vertical-align: middle;
	padding: 0;
	clear: both;
	}

/***** Navbar *****/

#innernav {
	width: 684px;
	height: 35px;
	}

#ce {
	background-image:  url(http://stromengineering.com/new/taupe/images/contract-engineering-over.gif);
	background-repeat: no-repeat;
	float: left;
	}

#solutions {
	background-image:  url(http://stromengineering.com/new/taupe/images/solutions-over.gif);
	background-repeat: no-repeat;
	float: left;
	}

#partners {
	background-image:  url(http://stromengineering.com/new/taupe/images/partners-over.gif);
	background-repeat: no-repeat;
	float: left;
	}

#labor {
	background-image:  url(http://stromengineering.com/new/taupe/images/labor-consulting-over.gif);
	background-repeat: no-repeat;
	float: left;
	}

#aboutus {
	background-image:  url(http://stromengineering.com/new/taupe/images/about-us-over.gif);
	background-repeat: no-repeat;
	float: left;
	}

#contact {
	background-image:  url(http://stromengineering.com/new/taupe/images/contact-over.gif);
	background-repeat: no-repeat;
	float: left;
	}

.cssnav a {
	display: block;
	}

.cssnav img {border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
</style>
</head>

<body>

<div id="header"><a href="index.html"><img src="http://stromengineering.com/new/taupe/images/header.gif" alt=" Home " width="684" height="57" /></a></div>

<div id="container">
	<div id="navbar">
		<div id="innernav">
			<div id="ce" class="cssnav"><a href="ce.html"><img src="http://stromengineering.com/new/taupe/images/contract-engineering.gif" /></a></div>
			<div id="solutions" class="cssnav"><a href="#"><img src="http://stromengineering.com/new/taupe/images/solutions.gif" /></a></div>
			<div id="partners" class="cssnav"><a href="#"><img src="http://stromengineering.com/new/taupe/images/partners.gif" /></a></div>
			<div id="labor" class="cssnav"><a href="#"><img src="http://stromengineering.com/new/taupe/images/labor-consulting.gif" /></a></div>
			<div id="aboutus" class="cssnav"><a href="#"><img src="http://stromengineering.com/new/taupe/images/about-us.gif" /></a></div>

			<div id="contact" class="cssnav"><a href="#"><img src="http://stromengineering.com/new/taupe/images/contact.gif" /></a></div>
		</div>
	</div>

	<div id="middle">
		<div id="leftnav">
			<p class="hlm">Lorem Ipsum</p>
			<p class="lm">
		  <ul>

					<li>Link 1 will go here</li>
					<li>Link 2 will go here</li>
					<li>Link 2 will go here</li>
					<li>Link 2 will go here</li>
		  </ul>
			<p class="hlm">Vitae Magna</p>

			<p class="lm">
		  <ul>
					<li>Link 1 will go here</li>
					<li>Link 2 will go here</li>
					<li>Link 2 will go here</li>
					<li>Link 2 will go here</li>
		  </ul>

		</div>

		<div id="content">
			<img class="h" src="http://stromengineering.com/new/taupe/images/lorem.gif" alt="Lorem" width="146" height="25" /><hr />

			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque eu nibh at turpis blandit porta. In sit amet dolor. Quisque gravida fermentum mauris. Integer bibendum fringilla elit. Donec vestibulum leo id urna. Integer ut lorem. Integer eget turpis. Phasellus malesuada gravida ligula. Ut nonummy euismod tellus. Vestibulum vitae dui quis nisl fermentum mattis. Curabitur elit. Nam fringilla convallis magna. Aenean molestie. Aliquam consectetuer tempus lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam in mauris. Maecenas fermentum. Duis felis tortor, hendrerit at, faucibus at, sollicitudin in, erat. Nam non velit.<br /><br />

Duis ut arcu vitae magna hendrerit elementum. Nulla enim. Aliquam erat volutpat. Etiam gravida lobortis mauris. Curabitur luctus, nulla tempus sodales consectetuer, wisi nulla pulvinar pede, vel dignissim leo diam ut wisi. Donec vulputate placerat metus. Aenean in eros. Mauris cursus mi eget sapien. Sed dapibus urna at risus. Duis augue sem, iaculis sed, fermentum placerat, semper eu, diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam sit amet risus sit amet lorem pulvinar aliquet. Cras libero sem, commodo quis, dictum ut, tempus eget, diam. Vivamus imperdiet ligula. <br /><br />

Duis ultrices erat sit amet metus. Fusce tortor sapien, lobortis eget, vulputate nec, placerat a, pede. Vestibulum a elit non justo mollis fringilla. Proin elit felis, blandit eu, facilisis et, tincidunt ut, elit. Curabitur tincidunt wisi id odio. Suspendisse vestibulum semper quam. Cras nibh. Etiam augue mi, molestie sit amet, venenatis nec, euismod vitae, magna. Sed eget nulla. Proin scelerisque, massa a eleifend imperdiet, ligula libero congue tellus, ac lobortis arcu massa in augue. Mauris quis quam. Donec pellentesque. Donec velit sem, posuere id, sodales non, posuere a, mauris. Nulla pulvinar lacus dictum dui. Donec non lacus. 
</p>

					
		</div>
		

	</div>

	<div id="footer">
		<span class="copyright">Copyright © Strom Engineering 2004. All Rights Reserved. <a
		href="#" class="footer">Privacy Statement</a>.</span>
	</div>
</div>

</body>
</html>

timhobbs
timhobbs's picture
Offline
Regular
Monterey, CA
Last seen: 18 years 5 weeks ago
Monterey, CA
Timezone: GMT-8
Joined: 2003-10-27
Posts: 37
Points: 0

Re: layout question

kallywag wrote:
On a minor note. If you're viewing the page in Netscape, you'll notice the copyright text in the footer is not vertically centered within the footer div. How do I vertically align text in a div like that?

You have #footer set to text-align: right. Simply change it to text-align: center and you should be all set.

kallywag
Offline
Regular
Last seen: 14 years 28 weeks ago
Timezone: GMT-6
Joined: 2004-07-09
Posts: 19
Points: 0

layout question

ok, on the footer i have it set to horizontally align right. the question was how to vertically align text within a div.

And there has to be a way to get a container div to stretch to the height of it's longest child div, and have all of its child divs stretch to that height, right? This isn't a complicated request. I want a header, two columns of fixed widths and a footer. I just want the two columns to be able to stretch to accomodate content on either side, and have them retain the same height. Basically I want it to behave like a table would, but since everybody seems to be raving about how great css is, i thought i'd give it a try. is this impossible?

timhobbs
timhobbs's picture
Offline
Regular
Monterey, CA
Last seen: 18 years 5 weeks ago
Monterey, CA
Timezone: GMT-8
Joined: 2003-10-27
Posts: 37
Points: 0

layout question

Doh, sorry, I misread that :oops:. I'd just add some padding-top to get the text where you want it.

As for your other part: there is no way to get the two columns the same height, but there are ways to make it appear as such. The background image you are currently using makes it appear as though you have two columns that are 100% height, and this is the best way to do it. I guess your issue is with whether or not you can safely say the content will always have a height greater than the navigation, correct? If this is the case, then simply place a "clearing div" after the content div and you'll be set.

It really is not all that difficult when you get the hang of it, and you can do pretty much anything with CSS that you can do with tables. However, some things are easier with tables, and in the end it is really just what you prefer. I mean, if you just cannot stand CSS, or if you just don't get it, then should you use it just because everyone else thinks it is cool? Just decide that you want and then use the tool best suited for achieving that outcome.

Hope this helps,
Tim

kallywag
Offline
Regular
Last seen: 14 years 28 weeks ago
Timezone: GMT-6
Joined: 2004-07-09
Posts: 19
Points: 0

layout question

ok well if there really isnt a way to achieve this, fine. i'll do with my background hack. now i have everything set up the way i want in internet explorer. but of course netscape likes to interpret the code differently, and the background image doesn't show up in my #middle div. Anybody know why?

timhobbs
timhobbs's picture
Offline
Regular
Monterey, CA
Last seen: 18 years 5 weeks ago
Monterey, CA
Timezone: GMT-8
Joined: 2003-10-27
Posts: 37
Points: 0

layout question

Please see my second comment (and code). You'll need to add the clearing div if your navigation is longer than your content. This will solve your problem.

I should also clarify that there is not an easy way to get columns the same height. I have seen many sites that show various methods which require different hacks for IE. It is my own personal preference to not muck up my code with hacks.

kallywag
Offline
Regular
Last seen: 14 years 28 weeks ago
Timezone: GMT-6
Joined: 2004-07-09
Posts: 19
Points: 0

layout question

what's a clearing div please

timhobbs
timhobbs's picture
Offline
Regular
Monterey, CA
Last seen: 18 years 5 weeks ago
Monterey, CA
Timezone: GMT-8
Joined: 2003-10-27
Posts: 37
Points: 0

layout question

A clearing div would be an empty div that "clears" the floated navigation. I am not sure if you need more information on how floats work, but if you do try performing a search here. There is a ton of info on floats here Wink

So, what you would want to do is add something like this:

Add the below to your CSS:

.clear {
   clear: left;
}

Then add this after your content div:
<div class="clear"></div>

This will "clear" (place the next block item below the bottom of the float) the navigation div.

bfaust
Offline
newbie
Manassas, VA
Last seen: 17 years 21 weeks ago
Manassas, VA
Joined: 2004-07-12
Posts: 5
Points: 0

layout question

I'm trying to figure out where you even had to use the background -column hack. Your page appears to only have two rows, not columns. Or am I looking at an old page, after the fact?

kallywag
Offline
Regular
Last seen: 14 years 28 weeks ago
Timezone: GMT-6
Joined: 2004-07-09
Posts: 19
Points: 0

layout question

i figured out that i should have had my DTD set as Strict. This fixed most of my problems. If I decide to I'll use the Box Model Hack later to make it pretty on IE5.x. So it was interpreting it in Quirks (Quirky?) mode, which was messing with my miiiiind maaan!

I do have another question about my site that I posted on this forum here.