CSS Fixed Layout Core: Should be a simple fix.... 1

rockyroad · Jan 10, 2007

Hi

Goal is simple, fixed layout that spans a fixed, centered width, and full 100% height of browser. The code here works in IE but not Firefox, why? The column container column should be centered. What is the problem? [hairpull]

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

body{
 text-align: center;
}

html, body {
height: 100%;
background-color:#333333;
margin:0;
}

#container { /* div you want to stretch */
min-height: 100%;
background-color:#CCCCCC;
width:770px;
}

#container {
height: 100%;
}

</style>

</head>

<body>
<div id="container">
test
</div>
</body>
</html>

Thanks,

RR

Vragabond · Jan 10, 2007

Code:

#container { /* div you want to stretch */
  min-height: 100%;
  background-color: #CCCCCC;
  width: 770px;
  [blue][b]margin: 0 auto;[/b][/blue]
}

The following addition shows how one centres a block level in css to work in standards-compliant browser. This method will work in every browser (provided you use a valid doctype) since IE6.

rockyroad · Jan 11, 2007

Thanks, that did it, new it was something simple

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!

CSS Fixed Layout Core: Should be a simple fix.... 1

rockyroad

Programmer

Vragabond

Programmer

rockyroad

Programmer

Similar threads

Part and Inventory Search

Sponsor