3 column like layout problem...

**Moshambi** · 09-10-2008, 09:20 PM

Hi

I am trying to make a site where there is a div (#wrap) that acts as if it is the page, so that i can size it and stuff and place all my other elements inside of it. I want to do this so that when I put another div inside with margins I can change the background-color of the #wrap and it will create a nice looking 3 column like looking layout. Now the way I have it set up so far works fine, except for one thing. When my #content div has too much in it the height of the page changes but it doesnt get styled correctly. I hope I am explaining this well enough, here is a look at my code so far:

HTML Code:

Code:

<html>

<head>
<title>Game Site!!</title>

<link rel="stylesheet" type="text/css" href="main_style.css" media="screen" />

</head>

<body>
<div id="wrap">
	<div id="mainframe">
		<div id="banner">
			<img src="images/banner.png" />
		</div>
		
		<div id="nav">
			<ul>
				<li><a href="#"> Home </a></li>
				<li><a href="#"> Games </a></li>
				<li><a href="#"> Chat </a></li>
				<li><a href="#"> Forums </a></li>
				<li><a href="#"> About </a></li>
				<li><a href="#"> Contact </a></li>
			</ul>
		
	
			<div id="content">
				<h1> Game Title </h1>
				<hr id="double" />
				<hr />
				<h3> Images </h3>
				<hr />
				<div id="screenies">
					<img src="images/Britneys-Dance-Beat.png" />
					<img src="images/Britneys-Dance-Beat.png" />
					<img src="images/Britneys-Dance-Beat.png" />
					<img src="images/Britneys-Dance-Beat.png" />
					<img src="images/Britneys-Dance-Beat.png" />
					<img src="images/Britneys-Dance-Beat.png" />
					<img src="images/Britneys-Dance-Beat.png" />
					<img src="images/Britneys-Dance-Beat.png" />
					<img src="images/Britneys-Dance-Beat.png" />
				</div>
				<hr />
				
				<h3> Details </h3>
				<p>
					Manufacturer: Nintendo <br />
					Console: GBA <br />
					Release Date: TOday <br />
					Etc. <br />
					Etc. <br />
					Etc. <br />
				</p>
				
				<hr />
				<h3> Review </h3>
				<p style="text-indent: 25px;">
				When I first picked this game up I thought it was going to be a lot different than it actually turned out to be....
				Of course the MUSIC was AMAZING, GRAPHICS were nothing spectacular (but this is GBA)...Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah...
				</p>
				
				<p style="text-indent: 25px;">
				...Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah...
				</p>
				
				<p style="text-indent: 25px;">
				...Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
				Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah...
				</p>
				
				<hr />
				<h3> Review Score: </h3>
				<p>
				This: xxx <br />
				That: xxxxx <br />
				Blah: xx <br />
				-------- <br />
				Overall: xx out of xxxxx<br />
				</p>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Linked CSS File:

Code:

html, body
{
	width: 100%;
	/*height: 100%;*/
	margin: 0px;
	padding: 0px;
	overflow: auto;
}

#nav
{
	position: relative;
	top: 10px;
	left: 10px;
}

#nav ul
{
	list-style-type: none;
}

#nav ul li
{
	border: 1px solid white;
	background-color: black;
	display: block;
	width: 100px;
	height: 25px;
	float: left;
	text-align: center;
}

#nav a
{
	text-decoration: none;
	color: white;
	display: block;
	width: 100px;
	height: 25px;
}

#screenies
{
	width: 875px;
	overflow: auto;
	white-space: nowrap;
	position: relative;
	/*left: -600px;*/
	border: 1px solid yellow;
}

#mainframe
{
	margin: 0px 150px 0px 150px;
	background-color: black;
	height: 100%;
}

#wrap
{
	background-color: gray;
}

#banner
{
	border: 3px solid white;
}

#banner img
{
	border: 3px solid white;
}

#content
{
	padding: 20px 20px 20px 20px;
	margin: 20px 20px 20px 20px;
	position: relative;
	top: 60px;
	left: 0px;
	border: 1px solid red;
	color: white;
}

#double
{
	border-style: groove;
	/*color: limegreen;*/
}

If you are gonna try and help and have questions about my problem I will try to explain it better or provide images of what is happening. Thank you in advance!

**Nile** · 09-11-2008, 03:20 AM

Try adding this to #wrap:

Code:

position: absolute;
z-index: -1;

And change position: relative, in content to absolute;

**Moshambi** · 09-11-2008, 04:51 AM

thank you for the respose Nile but that did not fix my problem...actually making the #wrap absolute positioned made it worse than before. I have included some screenshots in this post so you can see what is going wrong.

img1.jpg is the top view and img2.jpg is what happens when i scroll down...

**Eternal_Howl** · 09-11-2008, 08:13 AM

I'm having a look at the scripting- I'm still a novice myself, but checking what you had in firefox AND IE (i'm using 8) - wasn't cross-browser compatible. I'm still seeing what I can come up with but from what I understand you're wanting the black box centred with a grey border on either side that extends full length of page like a three col layout. I found the only way to achieve this well was to simply make a gif of the colour of my choosing and have it on repeat as other ideas involved hacks which just look messy.

**Eternal_Howl** · 09-11-2008, 08:22 AM

Try adding this

html, body
{
width: 100%;
/*height: 100%;*/
margin: 0px;
padding: 0px;
overflow: auto;
background:#000000 url(/black.gif) repeat;
position:relative;/* for ie7*/

#wrap
{
background-color: #c0c0c0 url(/gray.gif) repeat;
}

You'd need to make a small gif of each of the background colours - but this was the only way I was able to extend out all 3 cols in colours I wanted consistently to bottom of page.

As for the rest of it, like I said, I'm still a novice.

**Moshambi** · 09-12-2008, 07:26 AM

Thank you that helped out a lot actually...It still is messing up at the bottom though with the text overflowing the div but the colors work all the way through now...anyone have ideas of what i can do to fix this? here is my new code:

html code is the same as before

and the CSS:

Code:

html, body
{
	/*width: 100%;*/
	/*height: 100%;*/
	margin: 0px;
	padding: 0px;
	/*overflow: auto;*/
	background-image: url("images/tile.gif");
}

#nav
{
	position: relative;
	top: 10px;
	left: 10px;
}

#nav ul
{
	list-style-type: none;
}

#nav ul li
{
	border: 1px solid white;
	background-color: black;
	display: block;
	width: 100px;
	height: 25px;
	float: left;
	text-align: center;
}

#nav a
{
	text-decoration: none;
	color: white;
	display: block;
	width: 100px;
	height: 25px;
}

#screenies
{
	width: 875px;
	overflow: auto;
	white-space: nowrap;
	position: relative;
	/*left: -600px;*/
	border: 1px solid yellow;
}

#mainframe
{
	margin: 0px 150px 0px 150px;
	background-color: white;
	/*overflow: visible;*/
	/*height: 100%;*/
}

#wrap
{
	/*background-color: #5e80ff;*/
	/*background-image: url("images/tile.gif");*/
	/*background-repeat: repeat;*/
}

#banner
{
	border: 3px solid white;
}

#banner img
{
	border: 3px solid white;
}

#content
{
	padding: 20px 20px 20px 20px;
	margin: 20px 20px 20px 20px;
	position: relative;
	top: 60px;
	left: 0px;
	border: 1px solid red;
	color: black;
}

#double
{
	border-style: groove;
	/*color: limegreen;*/
}

Thanks!

**Eternal_Howl** · 09-12-2008, 07:29 AM

What's the URL so I can see how it's messing up. I had a few hassles with the same kind of thing I think you're dealing with so happy to have a look as it helps me learn more too.

**Moshambi** · 09-12-2008, 07:54 AM

Wow I was not expecting to see someone respond already! Well as for the URL...I'm currently just working on it offline, but the reason I came to post here was I found out how to fix it:

I just added this line:

Code:

#mainframe
{
	margin: 0px 150px 0px 150px;
	padding: 0px 0px 50px 0px;
	background-color: white;
	/*overflow: visible;*/
	/*height: 100%;*/
}

Hopefully this might help you with some of the problems you said you have had before too! Thanks so much for all the help!

**Eternal_Howl** · 09-12-2008, 08:03 AM

Just happened to be on line.

So now all columns extending to bottom of page in chosen colours and no text overwrapping places they shouldn't be?

Cool!

When you do publish it, really helpful site called Browser shots, which enables you to view your page in various different browsers by getting screenshots off different computers/ OS's/resolutions etc. Good if you're learning CSS as well as you can see how it distorts in some browsers and can help you fine tune it by seeing that not everyone sees what you see. (can also make you tear your hair out trying to make it right lol)

**Eternal_Howl** · 09-12-2008, 08:04 AM

For one site, I think I have my issues fixed - the other site - another matter altogether - I think perhaps my question is too complex. So back to the drawing board so to speak. I don't know that I've seen what I want to do done yet.

Thread: 3 column like layout problem...

Thread Tools

Search Thread

3 column like layout problem...

The Following User Says Thank You to Eternal_Howl For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions