Web Design Forums

JonnyE · 16-01-2006, 10:30

Hi guys,

Noticed that there are quite a few different threads on positioning, but mine is quite specific so I hope you don't mind if I post a thread.

Basically, I want a three column layout for my site - with a larger central column. I have managed to do this so far - the banner is in a div which stays central. However, I can't seen to work out how I would code the three main content boxes - what I've got so far is pretty messy, and I'd really appreciate any help. It only works on my size screen, and won't work on smaller resolutions.

Having just moved over from tables to CSS, and being 17 years of age, I think it's time I start to learn something different if I want my Web Designing to become anything other than a hobby in the future.

Code:

body
{ 
background-color: #000000
}
#parentdiv {
	MARGIN: 0px auto;
	WIDTH: 100%;
	HEIGHT: 100%;
}
#bannerimg {
	vertical-align: middle;
	text-align: center;
	PADDING-TOP: 40px;
}
#newscenter {
	background-image: url(newscentrepic.jpg); 
	background-repeat: repeat-x;
	margin-left: 455px;
	padding-top: 18px;
	padding-left: 17px;
	padding-right: 16px;
	text-align: justify;
	WIDTH: 315px;
}
#left {
	background-image: url(sidetabshome.jpg); 
	background-repeat: repeat-x;
	margin-left: 253px;
	margin-top: 10px;
	padding-top: 18px;
	padding-left: 17px;
	padding-right: 16px;
	text-align: justify;
	WIDTH: 160px;
}
#right {
	background-image: url(sidetabshome.jpg); 
	background-repeat: repeat-x;
	margin-left: 400px;
	margin-top: 10px;
	padding-top: 18px;
	padding-left: 17px;
	padding-right: 16px;
	text-align: justify;
	WIDTH: 160px;
}

/*Text Styling*/
}
H1 {
	FONT: 14px Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #FFFFFF; FONT-WEIGHT: Bold;
	}
}
H2 {
	FONT: 13px Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #9e9abe; FONT-WEIGHT: Bold;
	}
H3 {
	FONT: 13px Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #DD4A20; FONT-WEIGHT: Bold;
	}

p {
    FONT: 12px Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #FFFFFF; FONT-WEIGHT: Normal;

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url(style.css);
-->
</style>
</head>

<body>
<DIV id=parentdiv>
	
  <DIV id=bannerimg><img src="banner.jpg"></DIV>
    <DIV id=left>
    <H3>New:</H3><p>DayPlanner</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </DIV>
  <DIV id=right>meh</DIV>
  <DIV id=newscenter align="center">
<h1>New for 2006, Thorpe Park: Stealth</h1>
    <p>Find Out more about Project Stealth <img src="link.gif" width="8" height="9"> 
      Go </p>
    <h2>Welcome to Thrill Factor - your fix for all things Thorpe Park and Chessington 
      World of Adventures.</h2>
    <p>Thorpe Park and Chessington World of Adventures are both prominent Theme 
      Parks in the South of England. We aim to provide a wealth of information 
      for these parks - whether you are a regular visitor, or are planning your 
      first visit. To navigate through our content, use the Menu above.</p>
    <h2>News and Updates:</h2></DIV>	
</DIV>
</body>
</html>

Thanks a lot

finbarr · 16-01-2006, 10:47

example

thats just one but there are plenty if you do a search on google:

more examples

all depend on whether youre using absolute positioning, fixed width, fluidlayout etc. Make up your mind as to which youre gunning for and stick to it

emil · 16-01-2006, 11:00

Can you provide a link?

EDIT: Also consider losing the empty paragraphs.

JonnyE · 16-01-2006, 11:13

Thanks for the help so far - I don't want a fluid layout, though.

So far all I have is this, the small content box I want centralised, with two columns either side, with a width of 160px each. I know the middle box won't centralise (unless you have the same resolution as me).

Any help would be appreciated.

Edit: Um it seems to be totally broken in Firefox

emil · 16-01-2006, 11:21

First off, try and start without filling the images, just a simple colored layout.
Don't use margins to align things, just use floats.
You haven't added the missing left and right columns in your source, but this should do the trick, once you add them.

Quote:

body
{
text-align:center;
}
div {text-align:left;}
#parentdiv {
MARGIN: 0px auto;
WIDTH: 760px;
HEIGHT: 100%;
border:1px solid;
}
#bannerimg {
}
#newscenter {
border:1px solid;
WIDTH: 315px;
float:left;
}
#left {
WIDTH: 160px;
height:500px;
border:1px solid;
float:left;
}
#right {

WIDTH: 160px;
height:500px;
border:1px solid;
float:left;
}

Code for Firefox, then hack fo IE.

At this stage, try and get the elements to fall into place. Like so
http://randomcolors.com/uploads/pauravi/

JonnyE · 16-01-2006, 11:48

Thanks a lot - just what I needed. I've had a look around and quite a bit of experimentation with the code but I can't shift that middle box into the centre between the two side divs. Any ideas?

Edit: Updated Site

adras · 16-01-2006, 14:57

Your html is wierd. Why not:
<div left> <div center> <div right>

Use margin setting for the center div to move it to the right.

pgo · 16-01-2006, 19:25

Even better might be <div id="center">, <div id="left">, <div id="right">

16-01-2006, 14:57	#7 (permalink)
adras Zły Join Date: May 2004 Location: Toronto, Canada Posts: 2,091	Your html is wierd. Why not: <div left> <div center> <div right> Use margin setting for the center div to move it to the right. __________________ Be Crisp (tm)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

16-01-2006, 10:47	#2 (permalink)
finbarr who the fuck am i? Join Date: Apr 2005 Location: london Posts: 2,660	example thats just one but there are plenty if you do a search on google: more examples all depend on whether youre using absolute positioning, fixed width, fluidlayout etc. Make up your mind as to which youre gunning for and stick to it

16-01-2006, 11:00	#3 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 7,482	Can you provide a link? EDIT: Also consider losing the empty paragraphs.

16-01-2006, 11:13	#4 (permalink)
JonnyE Registered User Join Date: Jan 2006 Location: London Posts: 36	Thanks for the help so far - I don't want a fluid layout, though. So far all I have is this, the small content box I want centralised, with two columns either side, with a width of 160px each. I know the middle box won't centralise (unless you have the same resolution as me). Any help would be appreciated. Edit: Um it seems to be totally broken in Firefox

16-01-2006, 11:48	#6 (permalink)
JonnyE Registered User Join Date: Jan 2006 Location: London Posts: 36	Thanks a lot - just what I needed. I've had a look around and quite a bit of experimentation with the code but I can't shift that middle box into the centre between the two side divs. Any ideas? Edit: Updated Site

16-01-2006, 19:25	#8 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	Even better might be <div id="center">, <div id="left">, <div id="right">

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)