Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Fixed-width DIV centred over 100% width DIV 1

Status
Not open for further replies.
strivejason

strivejason

Programmer
Jan 22, 2005
10
CA
Hi there. I'm trying to get my DIV layout to let me centre 3 fixed-width DIVs in three full-screen-width DIVs: a header, a content section, and a footer which is pushed to the bottom of the content. So far, I've been unable to get the bottom DIVs to stretch across the screen without messing up the centred DIVs.

Here's what I'm working with:
Code: 
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	margin-top: 0;
	margin-left: 0;
	background-image: url(/images/indx_body_bg.gif);
	background-repeat: repeat-x;
	}
/*I cheated; I want the header to have a background, so I put it in the body.*/
#content {
	margin-left: 0px;
	margin-right: 0px;
	position: relative;
	background-image: url(/images/Tile_cloudsfade.jpg);
	background-repeat: repeat-x;
	background-color: #B1CDF3;
	}
#wrapper {
	width: 780px;
	margin-left: 0px;
	position: relative;
	}
#sample {
	width: 388px;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: lightgreen;
	}
/* -------------------------------
TOP/BOTTOM DIVS
--------------------------------*/
#header {
	width: 780px;
	height: 51px;
	margin-left: 0px;
	position: relative;
	}
#bottom {
	position: relative;
	background-image: url(/images/indx_subnav_bg.jpg);
	background-repeat: repeat-x;
	}
/*Just a solid-color, beveled bar across the screen*/
#subnav {
	width: 780px;
	height: 40px;
	margin-left: 0px;
	position: relative;
	}
#footer {
	width: 780px;
	margin-left: 0px;
	position: relative;
	}
/* -------------------------------
GENERAL
--------------------------------*/
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	margin-left: 0px;
	margin-bottom: 10px;
	color: #000000;
}
p, li, td {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	line-height: 1.2;
}
a {
	color: #00304B;
	text-decoration: none;
	font-size: 12px;
}
a:hover {
	color: #7DA42E;
	text-decoration: none;
}
</style>
</head>

<body>
<div id="header">
	<div style="position: absolute; right: 10px; top: 15px"><p><a href="#">link 1</a> | 
	<a href="#">link 2</a> | 
	<a href="#">link 3</a> | 
	<a href="#">link 4</a></p>
	</div>
</div>

<div id="content">
	<div id="wrapper">
	<div id="sample">
		<p>Lorem ipsum dolor sit amet, 
		consectetuer adipiscing elit. Sed augue 
		lectus, nonummy sit amet, elementum sed, 
		mollis eget, leo. Curabitur elementum erat
 		quis quam. Pellentesque sollicitudin tortor
		a neque. Suspendisse facilisis facilisis 
		tortor. Nam sem elit, molestie et, mattis 
		id, porttitor eget, velit. Class aptent 
		taciti sociosqu ad litora torquent per 
		conubia nostra, per inceptos hymenaeos. 
		Maecenas diam sem, ultrices vitae, laoreet 
		eget, blandit ut, nulla. Praesent pede 
		justo, sollicitudin ut, suscipit vel, 
		pellentesque et, elit. Aliquam id wisi 
		ullamcorper nisl rutrum consectetuer. Cras 
		mi libero, tempus in, commodo dictum, 
		auctor at, eros. Ut sed augue. Nulla 
		tincidunt. In eu odio. Nunc ultricies justo 
		at eros. Nullam quis sapien nonummy enim 
		feugiat fringilla. Curabitur mi.
		</p>
	</div>
</div>
</div>	

<div id="bottom">	
	<div id="subnav">
		<p><a href="#">link 1</a> | 
		<a href="#">link 2</a> | 
		<a href="#">link 3</a> | 
		<a href="#">link 4</a></p>
	</div>
	<div id="footer">
		<p>Footer information here. Footer information here. Footer information here.</p>
  </div>
</div>
</body>

Suggestions/comments/threats against my life?
I'd appreciate any input.

Thanks,
Jason
 
Sort by date Sort by votes
Jason, what browser are you using? On the code you gave, my Mozilla and IE6 choke up completely and basically display everything in one place. My suggestion:

1. Place a doctype at the top of the document. Ensure cross browser compatibility before you get too much code.
2. Start simple, check often. The example you gave looks so messed up I don't know where to begin debugging it.
 
Upvote 0 Downvote
I'm using IE6 - the code I put there is a simplification of an actual site that I'm working on. But, it's a mess, I agree. See this page for a better view of what I'm trying to do. My attempt is for each container div to stretch across the screen but center the content (a 780px fixed width div in each of them). Each of the full-width DIV's will repeat a background image: the header, a simple black border; the content, a blue gradient fading into solid blue; and the footer, a navy beveled bar. I'm going at it the wrong way, I'm sure, because I don't have the underlying DIVs stretch the whole way, and the footer sits on top of the content.
 
Upvote 0 Downvote
Sounds like chronic frameset avoidance to me [3eyes]

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head><title>TITLE</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<frameset rows="20px,*,20px">
<frame scrolling="no"  src="header.htm" />
<frame scrolling="yes" src="body.htm" name="BODY" />
<frame scrolling="no"  src="footer.htm" />
</frameset></html>

Clive
 
Upvote 0 Downvote
I've been conditioned against using framesets... either in hearing of the "inherent evils" of frames, or the "apparent absolute truth" of css. I'd like to try to do it with CSS - doesn't using framesets cause trouble with browsers / bookmarking. I'm not really sure. Its not a matter I know much about; I just made an uninformed convert of myself to CSS.
 
Upvote 0 Downvote
Vragabond's point about DOCTYPEs is well made, and his advice to "Start simple, check often" should be framed (which should please Clive) and hung above your PC. Beware of building complexity on complexity when what you should really be doing is going back to the start.

One thing I'd add is to avoid absolute positioning wherever possible. It's badly implemented by several popular browsers (popular with the public, that is, not web developers!) and will just cause you extra headaches. You don't need anything so complicated in this case.

So, if I've got you right, you want a succession of three 100% width <div>s, each of which contains a centred 780px wide <div>. Something like this should work...
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
body {
   margin: 0;
   padding: 0;
}

#top, #middle, #bottom {
   width: 100%;
   margin: 0;
   padding: 0;
   text-align: center;  /* Centres child divs in IE (wrongly) */
}

/* set different background colours for the three containers */
#top {
   background: red;
}
#middle {
   background: yellow;
}
#bottom {
   background: blue;
}

#header, #content, #footer {
   width: 780px;
   margin: 0 auto;           /* Centres Firefox and other modern browsers */
   text-align: left;         /* Undoes IE-only fix */
   padding: 0.5em;           
   border: 1px solid #CCC;   
   background: white;
}

</style>
</head>
<body>
<div id="top">
   <div id="header">
      This is the Header
   </div>
</div>
<div id="middle">
   <div id="content">
      Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Sed augue
      lectus, nonummy sit amet, elementum sed,
      mollis eget, leo. Curabitur elementum erat
      quis quam. Pellentesque sollicitudin tortor
      a neque. Suspendisse facilisis facilisis
      tortor.
   </div>
</div>
<div id="bottom">
   <div id="footer">
      This is the footer
   </div>
</div>

</body>
</html>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
I must say that no matter how I try, I cannot understand why Jason's attempts should be considered as avoiding the frames. His website does not imply one thing that would constitute the use of frames and can be done by simple html (hardly any css) as demonstrated by Chris above. Clive, I think we all embraced the "frames don't really suck" but when you will keep pushing frames at people when there's absolutely no need for them to use it. Why create three pages when one is more than enough?
 
Upvote 0 Downvote
Thanks Chris - that's exactly the kind of thing I was after. I'm still working at moving to DIV layouts versus table layouts, and although I see the obvious benefits of them, they are proving a little tricky to adapt to at first (especially differing between absolute and relative positioning). I will bear your comments in mind about that.

Clive, I'd agree with Vragabond that frames are not the solution for this page. I guess there are times when frames are the best option, but everything I've done hasn't needed them.

Thanks everyone for your help with this!
 
Upvote 0 Downvote
This is getting a bit off topic, but here's the only way I've found that works getting the footer pushed to the bottom with a liquid (lots of %) design. As you can see, it is a little hairy, but works well with every browser I've tried and the html is simple enough to ensure non-css compliant browsers fail gracefully and still get all the content and in the right order:
HTML:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Justin Williams" />
<meta name="keywords" content="div,test" />
<meta name="description" content="Liquid Div Test." />
<meta name="robots" content="all" />
<title>Liquid Test</title>
<script type="text/javascript"></script>
<style type ="text/css" media="all">
 @import "default.css";
</style>
</head>
<body onload="window.defalutStatus='Liquid Test';" style="color: #DDDDDD; background-color: rgb(0, 0, 0);">

<div id="topbackground">
Top div.
</div>

 <div id="maincontainer">
<div id="sidebar">
This is a sidebar.<br />Testing the sidebar<strong>.</strong><br /><strong>Testing</strong> the sidebar.<br />Testing <strong>the</strong> sidebar.  Testing the <strong>sidebar</strong>.
</div>

<div id="content">Content div. <br />
The quick, brown fox jumped over the lazy dog. The quick, brown fox jumped over the lazy dog.The quick, brown fox jumped over the lazy dog.
<br /><br /><br /><br />
The quick, brown fox jumped over the lazy dog. The quick, brown fox jumped over the lazy dog.The quick, brown fox jumped over the lazy dog.
</div>

</div> <!-- end of maincontainer -->

<div id="bottomdiv">
Bottom div.
</div>

</body>
</html>
And CSS:
Code: 
html {
     height: 100%;
     padding: 0;
     margin: 0;
     }
body {
      height: 100%;
      padding: 0;
      margin: 0;
      background: cyan;
      }

#topbackground {
	       position: absolute;
	       z-index: 2;
	       top: 0;
	       left: 0;
	       margin: 0em 0em 0em 0em;
	       padding: 0em 0em 0em 0em;
	       background: red;
	       width: 100%;
	       height: 230px;
	       }

#maincontainer {
	       z-index: 1;
	       height: 100%;
	       min-height: 100%;
	       top: 0;
	       left: 0;
	       margin: 0px 4% -100px 4%;
	       padding: 0;
	       background: blue;
	       }

body>#maincontainer {
	       height: auto;
	       }
#content {
	 margin: 0;
	 padding: 234px 8px 100px 8px;
	 background: transparent;
	 }
#sidebar {
	 margin: 0px 8px 4px 0px;
	 padding: 234px 4px 4px 4px;
	 float: left;
	 width: 110px;
	 height: 210px;
	 background: white;
	 color: black;
	 }
#bottomdiv {
	   position: relative;
	   width: 100%;
	   clear: both;
	   height: 100px;
	   margin: 0;
	   padding: 0;
	   background: green;
	   }

Took me forever to get every little piece right. Hope it is useful. Try with varying resolutions and amount of content to really get a sense for the effects.
 
Upvote 0 Downvote
Hi Oppcos,

I was working on a similar approach using the "height: auto;".

Unless I copied your code inncorrectly, I could not get it to work.

I do not believe that it can be done without knowing the height of the screen using javascript. However, whenever someone says something like that is impossible, some genius comes along with a solution.

As a programmer of going on 40 years, I am all for standards. However, this effect has been achievable for over a decade using a frameset (with standards) or using tables without the doctype tag.

One day I am sure that things will get better, but right now you could tear your hair out trying to get validated code to work on all browsers.

Clive
 
Upvote 0 Downvote
I think the standards were not thought out, myself, and so I agree with you that things can surely get better. Nevertheless, frames do choke on a lot of browsers out there and clients don't want to hear that the site needs to be done using them. Not much you can do about that. Not using a doctype is asking for future trouble, even if you manage to hack everything to work currently.

A big advantage of using simple html and putting your effort into the css is that, first, css is easier, even if it does get to looking a little hacky. Second, it makes it a lot easier to update the content or plug in a content management system that gets its content from a database. Finally, it saves a lot of bandwidth. Especially when you can use one style sheet across several pages, thus it can be cached on the client. Looking at a page done with css and divs vs. the same with tables will make it immediately apparent how much space is saved.

If you've been programming for 40 years, then you are use to sane programming languages that actually match the standards. I've only been programming professionally for nine years but I share your frustration with a language that is loosely defined and purposefully broken or buggy. *sigh*

As for the code I posted, should be working fine. I've uploaded it here so you can see it live. I've tested it on IE, FireFox, Opera, Mozilla, and my PDA (PalmOS) and works great. I would be very interested if it doesn't work for you and which browser you are using. The idea is that the bottom div is always pushed to the bottom, so if there is lots of content, then you scroll down but not lower than the bottom div, and if there is a wide browser window with little main content, then the bottom div still stays at the bottom of the window and there is no scroll bar.
 
Upvote 0 Downvote
Are you thinking of a different effect? I’ve definitely tested on that browser / OS (what I primarily use myself). I went to a lot of trouble to get the div to push down in the above example. If you want more of a frame effect where the bottom stays statically glued to the bottom and the top content changes, check this out instead:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Justin Williams" />
<meta name="keywords" content="vertical,test" />
<meta name="description" content="Vertical Test." />
<meta name="robots" content="all" />
<title>Liquid Test</title>
<script type="text/javascript"></script>
<style type ="text/css" media="all">
 @import "default5.css";
</style>
</head>
<body>


<div id="one"> 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br /><br /><br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br /><br /><br />blah blah blah blah 

blah blah blah blah blah blah blah blah blah blah blah<br /><br /><br />blah blah blah blah blah blah blah blah 

blah blah blah blah blah blah blah<br /><br /><br />
</div>

<div id="two"> </div>

</body>
</html>
With CSS:
Code: 
html {
height: 100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
padding: 0;
margin: 0;
}



#one {
  position: absolute;
  height: 100%;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  margin: -50px 0 0 0;
  padding: 0;
  background-color: #0020F3;
  overflow: auto;
  }

body>#one {
  height: auto;
  }

#two {
  padding: 0;
  margin: 0;
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: #F20030;
  bottom: 0px;  
  }
Also uploaded a test here.
 
Upvote 0 Downvote
Oops, get rid of the
Code: 
body>#one {
  height: auto;
  }
on that last one...
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
767
3esolar
3
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
657
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
206
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
145
tyutghf
tyutghf
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
229
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top