CSS Table Width 100% Issue in IE

oohoohoohooh · Jun 26, 2005

Hi, I am trying to set up a three column structure for my website using CSS. The trouble I'm having is using the footer since I can't absolutely position the divs since I need the footer directly after the content. I've just seen an example on a website about floating them but then when I have a table inside with width="100%" it pushes the content down below the content in the right nav bar. Another slight glitch aswell is that the content inside the center column is also chuffed off about 1/2 pixels on the left side.

Here's a link for you to see:

http://www.flixon.com/test.htm

I'd appreciate if you could help. Thanks

BillyRayPreachersSon · Jun 27, 2005

There are probably many ways of solving this... possibly the easiest way would be to put a dummy floated element at the bottom of each of your columns, and have "clear:both" on your footer element.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

oohoohoohooh · Jun 27, 2005

Hi I tried doing what you said but it still does not work. Here's the code

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>
	<head>
		<title>Star-Buyer.com - Home</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<meta name="Description" content="" />
		<meta name="KeyWords" content="" />
		<link rel="stylesheet" type="text/css" href="main_theme.css" />
	</head>
	<body>
		<div id="header">
			<h1>Star-Buyer.com</h1>
		</div>
		<div id="container">
			<div id="left_navigation">
				<h1>Main Menu</h1>
				<ul>
					<li><a href="index.php">Home</a></li>
					<li><a href="shopping_cart.php">Shopping Cart</a></li>
					<li><a href="account.php">Your Account</a></li>
					<li><a href="help.php">Help</a></li>
				</ul>
				<p align="center"><a href="[URL unfurl="true"]http://jigsaw.w3.org/css-validator/validator?uri=http://www.punkcentre.com/users/isad304"[/URL] target="_blank"><img src="[URL unfurl="true"]http://jigsaw.w3.org/css-validator/images/vcss"[/URL] width="88" height="31" border="0" alt="Valid CSS!" /></a></p>
				<p align="center"><a href="[URL unfurl="true"]http://validator.w3.org/check?uri=referer"[/URL] target="_blank"><img src="[URL unfurl="true"]http://www.w3.org/Icons/valid-xhtml10"[/URL] width="88" height="31" border="0" alt="Valid XHTML 1.0!" /></a></p>
				<div id="dummy"></div>
			</div>
			<div id="right_navigation">
				<h1>Right Nav</h1>
				<div id="dummy"></div>
			</div>
			<div id="content">
				Yeah this is the content
			</div>
		</div>
		<div id="footer">
			<p align="center">&copy; Copyright 2005 All Rights Reserved. Website Designed and Maintained By <a href="[URL unfurl="true"]http://www.flixon.com"[/URL] target="_blank">Flixon Studios</a>.</p>
		</div>
	</body>
</html>

And here is the content of main_theme.css

Code:

body {
	margin: 0px;
	background-color: #FFFFFF;
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 75%;
	color: #000000;
}

a {
	color: #187CA8;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

#header {
	position: relative;
	left: 0px;
	top: 0px;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color: #F0F0F0;
	border-bottom: 1px solid #000000;
}

#container {
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%;
}

#left_navigation {
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 5px;
	width: 150px;
}

#content {
	position: relative;
	top: 0px;
	margin-left: 161px;
	margin-right: 161px;
	padding: 5px;
	border-left: 1px dashed #000000;
	border-right: 1px dashed #000000;
}

#right_navigation {
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 5px;
	width: 150px;
}

#footer {
	position: relative;
	left: 0px;
	top: 0px;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color: #F0F0F0;
	border-top: 1px solid #000000;
	clear: both;
}

#footer p {
	margin: 0px;
	padding: 0px;
}

h1 {
	margin: 0px;
	font-size: 110%;
	font-weight: bold;
}

form {
	margin: 0px;
	padding: 0px;
}

#dummy {
	position: relative;
}

BillyRayPreachersSon · Jun 28, 2005

You are using the id "dummy" more than once - do not do this - it is not right. Use a class instead.

You also have no element at the end of the content div - so what happens when the content is longer than the side boxes?

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

ChrisHunt · Jun 28, 2005

Try using this method:

http://www.tanfa.co.uk/css/layouts/flexi-floats-3col.asp

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

oohoohoohooh · Jun 28, 2005

Cheers ChrisHunt that website works fine but there's a couple bits I don't fully understand. What exactly is a fluid design in CSS?

As for my original post this is for BillyRayPreachersSon. It still does not work. I've tried the following but with no success. Would you be able to test it to get a solution that works in IE. Cheers

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>
	<head>
		<title>Star-Buyer.com - Home</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<meta name="Description" content="" />
		<meta name="KeyWords" content="" />
		<link rel="stylesheet" type="text/css" href="main_theme.css" />
	</head>
	<body>
		<div id="header">
			<h1>Star-Buyer.com</h1>
		</div>
		<div id="container">
			<div id="left_navigation">
				<h1>Main Menu</h1>
				<ul>
					<li><a href="index.php">Home</a></li>
					<li><a href="shopping_cart.php">Shopping Cart</a></li>
					<li><a href="account.php">Your Account</a></li>
					<li><a href="help.php">Help</a></li>
				</ul>
				<p align="center"><a href="[URL unfurl="true"]http://jigsaw.w3.org/css-validator/validator?uri=http://www.punkcentre.com/users/isad304"[/URL] target="_blank"><img src="[URL unfurl="true"]http://jigsaw.w3.org/css-validator/images/vcss"[/URL] width="88" height="31" border="0" alt="Valid CSS!" /></a></p>
				<p align="center"><a href="[URL unfurl="true"]http://validator.w3.org/check?uri=referer"[/URL] target="_blank"><img src="[URL unfurl="true"]http://www.w3.org/Icons/valid-xhtml10"[/URL] width="88" height="31" border="0" alt="Valid XHTML 1.0!" /></a></p>
				<div class="dummy"></div>
			</div>
			<div id="right_navigation">
				<h1>Right Nav</h1>
				<div class="dummy"></div>
			</div>
			<div id="content">
				Yeah this is the content
				<div class="dummy"></div>
			</div>
		</div>
		<div id="footer">
			<p align="center">&copy; Copyright 2005 All Rights Reserved. Website Designed and Maintained By <a href="[URL unfurl="true"]http://www.flixon.com"[/URL] target="_blank">Flixon Studios</a>.</p>
		</div>
	</body>
</html>

main_theme.css:

Code:

body {
	margin: 0px;
	background-color: #FFFFFF;
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 75%;
	color: #000000;
}

a {
	color: #187CA8;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

#header {
	position: relative;
	left: 0px;
	top: 0px;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color: #F0F0F0;
	border-bottom: 1px solid #000000;
}

#container {
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%;
}

#left_navigation {
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 5px;
	width: 150px;
}

#content {
	position: relative;
	top: 0px;
	margin-left: 161px;
	margin-right: 161px;
	padding: 5px;
	border-left: 1px dashed #000000;
	border-right: 1px dashed #000000;
}

#content p {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 0px;
}

#content .main_box {
	padding: 5px;
	background-color: #F8F8F9;
	border: 1px solid #0083C1;
}

#content .table_box {
	border: 1px solid #0083C1;
}

#content .table_row {
	background-color: #F8F8F9;
}

#content .error {
	padding: 5px;
	background-color: #F4E7EA;
	border: 1px solid #986265;
}

#content .important {
	color: #FF0000;
}

#right_navigation {
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 5px;
	width: 150px;
}

#footer {
	position: relative;
	left: 0px;
	top: 0px;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color: #F0F0F0;
	border-top: 1px solid #000000;
	clear: both;
}

#footer p {
	margin: 0px;
	padding: 0px;
}

h1 {
	margin: 0px;
	font-size: 110%;
	font-weight: bold;
}

form {
	margin: 0px;
	padding: 0px;
}

#dummy {
	float: left;
	width: 100%;
	content: "."; 
	display: block; 
	height: 0px;
	clear: both; 
	visibility: hidden;
}

rpgfan3233 · Jun 28, 2005

oohoohoohooh said:
What exactly is a fluid design in CSS?

A fluid design is also known as a liquid design. It basically means that a user on any (modern) browser viewing at any of the most widely-used resolutions (usually starting at 800x600 now and getting larger, AFAIK) see the page (almost) exactly the same if he/she were at a different resolution.

ChrisHunt · Jun 28, 2005

Just to clarify a little...

A "fixed" design is where the main content has a set width, which doesn't change when you resize the browser. My work site is one example. Fixed sites are a bit easier to code (IMO).

A "fluid" site is sized to a percentage of the available browser width (usually, but not always 100%). If you don't have your browsers full-screen, and drag the edges to change the width, you'll see a fluid site adjust its content to fit. Tek-Tips is an example of a fluid site.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

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 Table Width 100% Issue in IE

oohoohoohooh

Programmer

BillyRayPreachersSon

Programmer

oohoohoohooh

Programmer

BillyRayPreachersSon

Programmer

ChrisHunt

Programmer

oohoohoohooh

Programmer

rpgfan3233

Technical User

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor