• Locked
3 replies [Last post]
Sun, 2009-07-12 00:47
sa
Offline
newbie
Last seen: 13 years 46 weeks ago
Joined: 2009-07-12
Posts: 4
Points: 0

Hi all, first post!

I'm about ready to throw the towel in with this one. I need to do a layout that fills the browser with a fixed size header, a fixed size footer and a fixed size content block centered (horizontally/vertically) in the middle. I've tryed a few things, including tables :blushing: , here's what I currently have:

<!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>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1" />
<title>CSS 100% Height</title>
 
<style type="text/css">
 
  html, body { margin: 0; padding: 0; height: 100%; }
 
  #wrap {min-height:100%; margin-bottom:-72px;}
 
  /* for IE not Mac \*/
  * html #wrap { height:100%; }
  /* end for IE */
 
  #header { height: 40px; padding: 1px 0; background:red;}
 
  #content { height:490px; width:900px; background:green; 
  top:50%; left:50%; margin-top:-245; margin-left:-450px; 
  position:relative; }
 
  #footer {height:70px; padding: 1px 0; background:red;}
 
</style>
 
</head>
<body>
 
<div id="wrap">
 
  <div id="header"> header </div>
  <div id="content"> content box </div>
 
</div>
 
<div id="footer"> footer </div>
 
</body>
</html>

Any ideas?

Top
Tags:
Mon, 2009-07-13 12:52
#1
sa
Offline
newbie
Last seen: 13 years 46 weeks ago
Joined: 2009-07-12
Posts: 4
Points: 0

Oh well, tables in quirls

Oh well, tables in quirks mode it is then.

Top
Mon, 2009-07-13 21:33
#2
Geoff Tyrer
Geoff Tyrer's picture
Offline
newbie
UK
Last seen: 12 years 44 weeks ago
UK
Timezone: GMT+1
Joined: 2009-07-13
Posts: 1
Points: 0

Vertical Centering

Take a look at this: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

I played with the sample code (following) and in Firefox at least it displayed something that might be close to what you're looking for...

Vertical and horizontal centering in valid CSS

#outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%; width: 100%; text-align: center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%; text-align: left;} /* for explorer only */
#inner {width: 200px; margin-left: auto; margin-right: auto;} /* for all browsers*/
/* optional: #inner[id] {position: static;} */

/* just format */
div.greenBorder {border: 1px solid green; background-color: ivory;}
body, html
{
height: 100%;
}
*html
{
height: 100%;
}

any text
any height, set width,
any content, for example generated from DB
everything is both vertically and horizontally centered

Top
Mon, 2009-07-13 21:41
#3
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 38 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Quote:fills the browser with

Quote:

fills the browser with a fixed size header, a fixed size footer and a fixed size content block

If you want the layout to fill the page, you cant do it with fixed widths. It needs to be fluid with %, not px. use width: 100%; to fill the screen. You can have a container div that holds everything, then add margin: 0 auto; to center that container.

i get confused when you say you want fixed dimensions, but you also want them to fill the screen. And then you say later that you want a large block of content that is centered on the screen. Which is it, fluid layout, or fixed?

Top
  • Locked