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!

Replace table layout with CSS 1

Status
Not open for further replies.
FesterSXS

FesterSXS

Programmer
Feb 4, 2002
2,196
GB
I'm looking to rewrite a TABLE heavy site using CSS for the layout instead - but I'm having trouble getting my head around it, especially the type of positioning I should be using.

I would like to have the following layout...

-----------------------------------
| HEADER |
-----------------------------------
| | |
| | |
| LEFT | MAIN |
| | |
| | |
| | |
-----------------------------------
| FOOTER |
-----------------------------------

HEADER, FOOTER and MAIN should fill the available width of the page.
LEFT should have a fixed width.
HEADER and FOOTER should have fixed heights.
LEFT and MAIN should fill the remaining available height of the page.

I have tried the following code but am getting unwanted scrollbars. I believe this is due to the 100% I have used for the LEFT (height) and MAIN (height and width). It seems to to allocating 100% of the total window rather than 100% of what's left over.

myPage.htm
Code: 
<html>
<head>
<title>Test Page</title>

<style>
body		{margin: 0px; padding: 0px; background-color: #FFFFFF;}

div.header	{position: absolute; top: 0px; width: 100%; height: 35px; background-color: #003399;}
div.left	{position: absolute; top: 35px; width: 160px; height: 100%; background-color: #993300;}
div.main	{position: absolute; top: 35px; left: 160px; width: 100%; height: 100%; background-color: #CEE3E6;}
div.footer	{position: absolute; bottom: 0px; width: 100%; height: 25px; background-color: #003399;}
</style>
</head>

<body>

<div class="header">
header text
</div> 

<div class="left">
left text
</div>

<div class="main">
main text
</div>

<div class="footer">
footer text
</div>

</body>
</html>


Tony
________________________________________________________________________________
 
Sort by date Sort by votes
From my archives...
Note: to do this with CSS you need to take advantage of the background image.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title>Two Columns: Left Navigation</title>

<style type="text/css">

body {
	margin: 15px;
	text-align: center;
	font-family: 'Trebuchet MS';
}

#wrapper {
	width: 450px;
	margin: 0 auto;
	background: #fff url(images/background.png) repeat-y top left;
	border: 2px solid #333;
	text-align: left;
}

#header {
	background: lime;
	width: 430px;
	font-size: 24px;
	font-weight: bold;
	padding: 10px;
}

#nav {
	width: 150px;
	float: left;
	font-size: 10px;
}

#nav ul {
	padding: 20px 0;
	margin: 0;
}

#nav ul li {
	list-style-type: none;
	margin: 0;
	text-indent: 10px;
}

#nav ul li.here {
	font-weight: bold;
	background-color: #fff;
}

#main {
	width: 280px;
	margin: 10px 10px 10px 155px;
	/*margin-left: 160px;*/
	font-size: 12px;
	text-align: justify;
}

#footer {
	background: orange;
	clear: both;
	width: 440px;
	font-size: 11px;
	padding: 5px;
	text-align: right;
}

</style>

</head>

<body>
	<div id="wrapper">
		<div id="header">Two Columns: Left Navigation</div>
		<div id="nav">
			<ul>
				<li class="here">Two Columns: Left Nav</li>
				<li><a href="TwoColumnsNavRight.html">Two Columns: Right Nav</a></li>
			</ul>
		</div>
		<div id="main">
		<p>As you can see, this page provides a good example of how to set up your new table-less HTML layout to still provide a <em>left</em> navigation column that stretches to the full content of the main area.
		</p>
		<p>
		To get a full understanding of how to do this, simply view the source code.  And don't forget to create your background image, or right-click in the navigation section and use mine.
		</p>
		</div>
		<div id="footer">Cory Arthus Archives, 2004.</div>
	</div>
</body>

</html>

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
clFlava

Thanks for your reply. I tried your code but it doesn't fill the page as I need it too. If I try using 100% for the width/height instead of the fixed values that you use, then the scrollbars appear.

Tony
________________________________________________________________________________
 
Upvote 0 Downvote
a) Thats exactly what I'm after regarding the width - thanks

b) Can the javascript go in the style sheet? If so - are there browser compatibility issues with this method. Or would I resize the MAIN and LEFT blocks after the page had loaded?

Tony
________________________________________________________________________________
 
Upvote 0 Downvote
b) JS would go outside the stylesheet. You are correct - when the page loads, resizes, reloads, you'll need to call a function that will test for available height and then reset the height of the main div.

Let me see if I can find one of the posts about this...

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
1) go here: thread215-944535
2) press Ctrl + F
3) type: here is my suggestion
4) search
5) read that post

that should show you how to do what you want.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
775
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
816
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
643
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
230
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top