Using Divisions to replace tables

**Death Slaught** · Dec 13 '10, 07:01 PM

Is your banner going to be taking up the entire banner space with the header positioned over it? What will you be using there: images, text, etc.

**KeredDrahcir** · Dec 14 '10, 10:26 AM

Yes. That's right the banner will be taking up the banner space and the header will be superimposed on top of it.
Actually don't worry about the header. I don't usually use it.

The banner gets a binary image from a database and uses it as the background image.

**Death Slaught** · Dec 14 '10, 11:14 PM

Alright, is it going to fill the full width of the screen, or only part of it and be centered?

My apologies for my replies taking so long. I'm very busy.

Thanks, Death

**KeredDrahcir** · Dec 15 '10, 10:25 AM

It going to be 980 pixels wide and be centered. As I said I was using a combination of tables and divisions. I'm including a template style sheet that I was using if that helps.

Code:

body          {                                                            height: 600px;  }

table.page    { position: relative; margin-left: auto; margin-right: auto; width: 980px; height: 600px; }
td.space      {                                                            height: 160px;  }
td.content    {                                              width: 740px; }
td.gap        {                                              width: 200px; }

#header       { position: absolute; top: 20px;  left: 0px;   width: 980px; height: 90px;   }
#banner       { position: absolute; top: 0px;   left: 0px;   width: 980px; height: 140px;  }
#main_menu    { position: absolute; top: 70px;  left: 400px; width: 580px; height: 20px;   }
#sub_menu     { position: absolute; top: 160px; left: 0px;   width: 200px; height: 300px;  }
#innerpage    { position: absolute; top: 8px;                width: 980px; height: 108px;  }
#copyright    { position: relative; top: 0px;   left: 0px;   width: 980px; height: 20px;   }

In some cases the height is there just to get a minimum height.
The page table is used to get the page centered.
The space cell was used to put a space at the top to put the header and menu in after (to get the content as close to the top as possible).
The gap cell is to leave a gap on the left to put the sub menu in after.
The innerpage division was something that I found I needed to get Firefox to center it which I didn't really understand.

**Death Slaught** · Dec 21 '10, 01:35 AM

Once again I apologize for taking so long to reply.

The CSS is based on what your provided with the height tweaked slightly. Otherwise it's self explanatory.

HTML~

Code:

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

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	</head>
	
	<body>
	
	<div id="wrapper">
	
		<div id="banner">
			<!-- banner inserted as background image -->
		</div>
	
		<div id="mainmenu">
			<!-- main navigation -->
		</div>
		
		<div id="submenu">
			<!-- secondary side navigation -->
		</div>
		
		<div id="content">
			<!-- pages content -->
		</div>
		
		<div id="footer">
			<!-- footer -->
		</div>
	
	</div>
	
	</body>
	
</html>

CSS~

Code:

* { /* Universal rule (*) - sets padding and margin for all elements to 0 */
	padding: 0;
	margin: 0;
}
#wrapper { /* width is needed for element to center */
	width: 980px;
	height: 600px;
	margin: 0 auto;
	border: 1px solid #000;
}
#banner {
	height: 140px;
	border-bottom: 1px solid #000;
	background-image: url('yourimg.extension');
}
#mainmenu {
	height: 40px;
	border-bottom: 1px solid #000;
}
#submenu { /* float removes elements from the normal flow of the page. Width and height are needed to expand across desired area */
	width: 200px;
	height: 320px;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	float: left;
}
#content {
	width: 779px;
	height: 320px;
	border-bottom: 1px solid #000;
	float: left;
}
#footer { /* will place the footer on the next line after elements being floated to the left */
	height: 97px;
	border-bottom: 1px solid #000;
	clear: left;
}

Of course this is only one simple variation, and a very limited one at that.

Regards, Death

**KeredDrahcir** · Jan 6 '11, 10:43 AM

Thansk Death. I've give that a go and get back to you. There is just one question, would it make a difference is I changed the order of the divisions? I'd like to get the content at the top so that it's easier for Search Engines to fnd.

**Death Slaught** · Jan 6 '11, 06:21 PM

Yes, that would completely throw off the design.

Regards, Death

**KeredDrahcir** · Jan 7 '11, 10:15 AM

I thought it would. The thing is, the design you've given me I was able to manage and used to use it, but was then asked the put the content as close to the top as possible and found that doing this, I couldn't get the division to expand properly and was forced to use a combination of division and tables.

I there any way of acheiving something like what I've done in my first post. The main thing I need to do is for the content to exapnd and the footer it fit on underneath. I know how much space the banner, menu and header are going to take up. It mainly the footer coming after to content and the submenu expanding down the same length. Is this possible?

Thank all the same.

**Death Slaught** · Jan 7 '11, 06:04 PM

The second part of your post doesn't make any sense to me. To move the content sections further up in the code requires either a different design or bad technique.

Like I said, what I provided is a simple variation. It can be changed to expand to its content (a fluid layout) rather than its current fixed layout.

Regards, Arkinder

**JKing** · Jan 7 '11, 09:19 PM

If you want to have your header below your content in the code but not visually all you need to do is use a little absolute positioning and some padding on the container.

Code:

<html>
	<head>
		<style type="text/css">
			#container {padding-top:100px;width:500px;}
			#header {position:absolute;top:0;background-color:red;width:500px;height:100px;}
			#content {background-color:blue;height:100px;}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="content">
			</div>
			<div id="header">
			</div>
		</div>
	</body>
</html>

**KeredDrahcir** · Jan 10 '11, 10:18 AM

Thanks JKing, I thought it might be something like that. I'll give it a try and let you know how I get on.

Using Divisions to replace tables

Using Divisions to replace tables

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment