Aligning problems with CSS

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Ben C
Forum Newbie
Posts: 7
Joined: Sat Mar 29, 2003 5:16 am

Aligning problems with CSS

Post by Ben C »

http://www.challenor.f9.co.uk/bby/


I want three rows, with a header, content and footer section. When the content is more than the window length, the header and footer are on the top and bottom; when the content is smaller, the footer is at the bottom of the window.

All three are contained within a 'frame' section that is 600px wide, is centered on the body, and has a couple of borders.

And it should be simple, but...?

The two pics in 'header' and 'footer' are meant to be inside the 'frame', and I can't work out why they are not (they are nested inside in the code). Oh, and I commented out the content div (with 'ahem') to show you the weird things that happen depending on whether the content div is there or not.

I think it's poor absolute positioning on my part, but is it possible to do what I want with relative?


Cheers
Ben :)

Code: Select all

#ahem
{
display: none;
}

/* Above causes the browser update text to be invisible, if read by a CSS browser */


body
{
margin: 0;
padding: 0;

height: 100%;
width: 100%;

background-color: #fff;

text-align: center;
}


#frame
{
margin: 0;
padding: 0;

height: 100%;
width: 600px;

border-left: 2px solid #039;
border-right: 2px solid #039;

background-color: #edf6ff;
}


#header
{
position: absolute;

margin: 0;
padding: 0;

height: 140px;
width: 600px;

top: 0;
}


#content
{
margin: 0;
padding: 0;

width: 600px;

text-align: justify;
}


#footer
{
position: absolute;

margin: 0;
padding: 0;

height: 71px;
width: 600px;

bottom: 0;
}

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
	<title>:.Broadband Yealmpton.:</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


<!-- CSS COMPATIBLE BROWSERS WILL NOT DISPLAY THIS: -->

<span id="ahem">

<center>
<h1>
This site will look much better in a browser that supports 
<a href="http://www.webstandards.org/upgrade/" title="Download a browser that complies with Web standards." target="_blank">
web standards
</a>
, but it is accessible to any browser.
</h1>
</center>

<br>
<hr>
<br>

</span>

<!-- /END CSS COMPATIBILITY -->




<!-- main section -->
<div id="frame">



<div id="header">
	 <img src="title_bar.gif" alt="title_bar">
</div>

<div id="ahem">
	 content goes here
</div>

<div id="footer">
	 <img src="base_bar.gif" alt="base_bar">
</div>



</div>
<!-- /end main section -->



</body>
</html>
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

Have a look at how they do it with articles at the International Herald Tribune website (http://www.iht.com). Probably the most beautiful and userfriendly use of CSS and Javascript I have seen on the web.
The way they display the articles is pretty much exactly what you are looking for.
Post Reply