Jump to content


Photo

How do I align div tags?


  • Please log in to reply
12 replies to this topic

#1 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 23 September 2006 - 10:39 PM

I'm creating a site where there is a left and a right colum.
This is what it should look like:
||

However, this is what is looks like:
|
|

The "|" is a colum. Youll notic how the they are on the corect sides, but the one is under the other. How do I fix this?

Here is my css:
body
{
	background-image: url('water.png');
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: #0000ff;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}


#outer_shell
{
	background-image: url('green.png');
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: #00ff00;
	margin: 0px;
	margin: auto;
	width: 700px;
}


#inner_left_shell
{
	width: 500px;
	margin-top: 0px;
	margin-right: 200px;
	margin-bottom: 0px;
	margin-left: 0px;
}


#inner_right_shell
{
	background-color: #333300;
	width: 200px;
	height: 200px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 500px;
}


#second_links
{
	color: #000000;
	line-height: 15pt;
	word-spacing: 2pt;
	font-family: courier;
	text-decoration: underline;
	font-weight: bold;
	text-align: center;
	margin: 3px;
}


#top_banner
{
	background-image: url('grass.png');
	margin: 0px;
	width: 700px;
	height: 188px;
}


p
{
	color: #000000;
	text-indent: 20pt;
	line-height: 15pt;
	word-spacing: 2pt;
	font-family: courier;
	margin: 5px;
}

And here is my html:
<?php
session_start();
$database_hostname = "localhost";
$database_username = "root";
$database_password = "";

if (!isset($_GET['page']))
{
	$_GET['page'] = "home";
	$page = "home";
}
else
{
	$page = $_GET['page'];
}

if ($page == "home")
{
	$title = "Home - Welcome To Environmental Class!";
}
elseif ($page == "mad")
{
	$title = "M.A.D. - Makeing A Diffrence";
}
elseif ($page == "flash")
{
	$title = "Flash Movies";
}
elseif ($page == "joke")
{
	$title = "Jokes - HA, HA, I Laugh At You!";
}
elseif ($page == "ge")
{
	$title = "Gory Glory Games Galore";
}
?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<link href="css.css" rel="stylesheet" type="text/css" />
		<title><?php echo $title; ?></title>
	</head>
	<body>
		<div id="outer_shell">
			<div id="inner_left_shell">
				<div id="top_banner"></div>
				<p>Welcome to Mr. Crows class, where enviromental science is a thing of the now!</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
			</div>
			<div id="inner_right_shell">
			<div id="second_links">Related Links</div>
			</div>
		</div>
	</body>
</html>

-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#2 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 24 September 2006 - 05:06 PM

If you want #inner_left_shell and #inner_right_shell to line up side by side to each other. You'll wnat to float them so add this to your CSS:
#inner_left_shell, #inner_right_shell {
    float: left;
}

If add anything after a floated object. The object will go underneath the float. To stop this you need to clear the float, so add clear: both CSS to the object you place after a floated object. Or just add <br style="clear: both"> before the closing tag for <div id="outer_shell">

#3 redarrow

redarrow
  • Members
  • PipPipPip
  • Advanced Member
  • 7,308 posts
  • Locationlondon

Posted 24 September 2006 - 06:24 PM

had a sneak preview at your css as valadated they say this:

Line : 7 (Level : 1) You have no color with your background-color : body
Line : 21 (Level : 1) You have no color with your background-color : #outer_shell
Line : 23 (Level : 2) Redefinition of margin-top : #outer_shell
Line : 23 (Level : 2) Redefinition of margin-left : #outer_shell
Line : 23 (Level : 2) Redefinition of margin-right : #outer_shell
Line : 23 (Level : 2) Redefinition of margin-bottom : #outer_shell
Line : 40 (Level : 1) You have no color with your background-color : #inner_right_shell
Line : 52 (Level : 1) You have no background-color with your color : #second_links
Line : 55 font-family: You are encouraged to offer a generic family as a last alternative
Line : 55 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #second_links
Line : 74 (Level : 1) You have no background-color with your color : p
Line : 78 font-family: You are encouraged to offer a generic family as a last alternative
Line : 78 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : p
Wish i new all about php DAM i will have to learn
((EMAIL CODE THAT WORKS))
http://simpleforum.ath.cx/mail2.inc
((PAYPAL INTEGRATION THAT WORKS))
http://simpleforum.a...aypal1_info.inc

#4 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 24 September 2006 - 06:30 PM

Why wouldnt you want the inner_right_shell to float right?

"You have no color with your background-color :" What does that mean!?

When I add the float to the css the background of the outer_shell disaperas and the to colums are still under each other?
-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#5 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 24 September 2006 - 06:50 PM

had a sneak preview at your css as valadated they say this:

Line : 7 (Level : 1) You have no color with your background-color : body
Line : 21 (Level : 1) You have no color with your background-color : #outer_shell
Line : 23 (Level : 2) Redefinition of margin-top : #outer_shell
Line : 23 (Level : 2) Redefinition of margin-left : #outer_shell
Line : 23 (Level : 2) Redefinition of margin-right : #outer_shell
Line : 23 (Level : 2) Redefinition of margin-bottom : #outer_shell
Line : 40 (Level : 1) You have no color with your background-color : #inner_right_shell
Line : 52 (Level : 1) You have no background-color with your color : #second_links
Line : 55 font-family: You are encouraged to offer a generic family as a last alternative
Line : 55 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #second_links
Line : 74 (Level : 1) You have no background-color with your color : p
Line : 78 font-family: You are encouraged to offer a generic family as a last alternative
Line : 78 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : p


Those are just warnings. His CSS is valid. The warnings do not have to be fixed.

#6 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 24 September 2006 - 07:20 PM

had a sneak preview at your css as valadated they say this:

Line : 7 (Level : 1) You have no color with your background-color : body
Line : 21 (Level : 1) You have no color with your background-color : #outer_shell
Line : 23 (Level : 2) Redefinition of margin-top : #outer_shell
Line : 23 (Level : 2) Redefinition of margin-left : #outer_shell
Line : 23 (Level : 2) Redefinition of margin-right : #outer_shell
Line : 23 (Level : 2) Redefinition of margin-bottom : #outer_shell
Line : 40 (Level : 1) You have no color with your background-color : #inner_right_shell
Line : 52 (Level : 1) You have no background-color with your color : #second_links
Line : 55 font-family: You are encouraged to offer a generic family as a last alternative
Line : 55 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #second_links
Line : 74 (Level : 1) You have no background-color with your color : p
Line : 78 font-family: You are encouraged to offer a generic family as a last alternative
Line : 78 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : p


Those are just warnings. His CSS is valid. The warnings do not have to be fixed.


Thats fine, I really dont want warnings either. However, I dont know what thoes warnings mean. What do they mean?


If you want #inner_left_shell and #inner_right_shell to line up side by side to each other. You'll wnat to float them so add this to your CSS:

#inner_left_shell, #inner_right_shell {
    float: left;
}

If add anything after a floated object. The object will go underneath the float. To stop this you need to clear the float, so add clear: both CSS to the object you place after a floated object. Or just add <br style="clear: both"> before the closing tag for <div id="outer_shell">


When I add the "float" to the css, the background of the outer_shell disaperas and the to colums are still under each other? Why is it doing that? How do I fix it?
-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#7 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 24 September 2006 - 08:12 PM

Thats fine, I really dont want warnings either. However, I dont know what thoes warnings mean. What do they mean?


They mean exactly what they say.

For example, if you define a font as font-family:arial, helvetica you should include a default font, e.g. font-family: arial, helvetica, sans-serif (since both named fonts are sans-serif type).

You have no background color/you have no color mean that you have incompletely defined the use of colours in an element. You need a declaration for both, e.g.

#thing {
color:#fff;
background-color: inherit;
}

And so on.
Legend has it that reading the manual never killed anyone.
My site

#8 redarrow

redarrow
  • Members
  • PipPipPip
  • Advanced Member
  • 7,308 posts
  • Locationlondon

Posted 24 September 2006 - 10:07 PM

I made this for you ok.


<?php ?>

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

<head>

<title>test page</title>

<style type="text/css">

body
{
margin: 1px 80px;
color: black;
background-position: center;
background-color: blue;
text-align: center;
}


table.heading_one
{
margin: 1px 80px;
color: red;
background-color: blue;
text-align: center;
font-size: 80%;

}

p.setting
{
margin: 1px 80px;
color: black;
background-color: blue;
text-align: left;
border-style: dotted;
width: 500\px;
}

table.links
{
border-color: black;
border-style: dotted;

margin: 1px 80px;
width: 250px;
color:black;
background: blue;
text-align: center;
}

table.header
{
border-color: black;
border-style: dotted;

margin: 1px 80px;
color:black;
background: blue;
text-align: center;
width: 500px;
}

table.copy_right
{
border-color: black;
border-style: dotted;
margin: 1px 80px;
color:black;
background: blue;
text-align: center;
width: 500px;
}

</head>
</style>

	

<body>

<p>

<table class="header"><tr><td>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. 

Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. 

Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. 

Some text.</table></tr></td>
		
		
<h3 class="heading_one">Welcome to Mr. Crows class, where enviromental science is a thing of the now!</h3>

<table class="links"><tr><td>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. 

Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. 

Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. 

Some text.</table></tr></td>

<p>


<p class="setting">Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.</p>
				

<p class="setting">Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.</p>
				

<p class="setting">Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.</p>
				

<p class="setting">Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.</p>
				

<p class="setting">Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.</p>
				

<p class="setting">Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some 

text.</p>

	

<p>

<table class="header"><tr><td>

copyright act admin@what_ever.com 

</table></tr></td>

		
				
	</body>
</html>

Wish i new all about php DAM i will have to learn
((EMAIL CODE THAT WORKS))
http://simpleforum.ath.cx/mail2.inc
((PAYPAL INTEGRATION THAT WORKS))
http://simpleforum.a...aypal1_info.inc

#9 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 24 September 2006 - 10:58 PM

I don't understand, why did you make that?
-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#10 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 26 September 2006 - 12:59 AM

Ok, lets try this again. float: left; didnt work. I still have the same problem. Here it is...

I'm creating a site where there is a left and a right colum.
This is what it should look like:
||

However, this is what is looks like:
|
|

The "|" is a colum. Youll notic how the they are on the corect sides, but the one is under the other. How do I fix this?

Here is my css:
body
{
	background-image: url('water.png');
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: #0000ff;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}


#outer_shell
{
	background-image: url('green.png');
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: #00ff00;
	margin: 0px;
	margin: auto;
	width: 700px;
}


#inner_left_shell
{
	width: 500px;
	margin-top: 0px;
	margin-right: 200px;
	margin-bottom: 0px;
	margin-left: 0px;
}


#inner_right_shell
{
	background-color: #333300;
	width: 200px;
	height: 200px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 500px;
}


#second_links
{
	color: #000000;
	line-height: 15pt;
	word-spacing: 2pt;
	font-family: courier;
	text-decoration: underline;
	font-weight: bold;
	text-align: center;
	margin: 3px;
}


#top_banner
{
	background-image: url('grass.png');
	margin: 0px;
	width: 700px;
	height: 188px;
}


p
{
	color: #000000;
	text-indent: 20pt;
	line-height: 15pt;
	word-spacing: 2pt;
	font-family: courier;
	margin: 5px;
}

And here is my html:
<?php
session_start();
$database_hostname = "localhost";
$database_username = "root";
$database_password = "";

if (!isset($_GET['page']))
{
	$_GET['page'] = "home";
	$page = "home";
}
else
{
	$page = $_GET['page'];
}

if ($page == "home")
{
	$title = "Home - Welcome To Environmental Class!";
}
elseif ($page == "mad")
{
	$title = "M.A.D. - Makeing A Diffrence";
}
elseif ($page == "flash")
{
	$title = "Flash Movies";
}
elseif ($page == "joke")
{
	$title = "Jokes - HA, HA, I Laugh At You!";
}
elseif ($page == "ge")
{
	$title = "Gory Glory Games Galore";
}
?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<link href="css.css" rel="stylesheet" type="text/css" />
		<title><?php echo $title; ?></title>
	</head>
	<body>
		<div id="outer_shell">
			<div id="inner_left_shell">
				<div id="top_banner"></div>
				<p>Welcome to Mr. Crows class, where enviromental science is a thing of the now!</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
			</div>
			<div id="inner_right_shell">
			<div id="second_links">Related Links</div>
			</div>
		</div>
	</body>
</html>

-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#11 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 26 September 2006 - 09:18 AM

Okay. I go it to work how I think you want it:
CSS:
body
{
	background-image: url('water.png');
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: #0000ff;
	margin: 0px auto;
}


#outer_shell
{
	background-image: url('green.png');
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: #00ff00;
	margin: 0px auto;
	width: 700px;
}


#inner_left_shell
{
	width: 495px;
	margin: 0px;
    float: left;
}


#inner_right_shell
{
	background-color: #333300;
	width: 195px;
	height: 200px;
	margin: 0px;
    float: right;
}



#second_links
{
	color: #000000;
	line-height: 15pt;
	word-spacing: 2pt;
	font-family: courier;
	text-decoration: underline;
	font-weight: bold;
	text-align: center;
	margin: 3px;
}


#top_banner
{
	background-image: url('grass.png');
	margin: 0px;
	width: 100%;
	height: 188px;
}


p
{
	color: #000000;
	text-indent: 20pt;
	line-height: 15pt;
	word-spacing: 2pt;
	font-family: courier;
	margin: 5px;
}
HTML/PHP:
<?php
session_start();
$database_hostname = "localhost";
$database_username = "root";
$database_password = "";

$page = (isset($_GET['page']) && !empty($_GET['page'])) ? $_GET['page'] : 'home';

switch($page)
{
    case 'home':
        $title = "Home - Welcome To Environmental Class!";
    break;

    case 'mad':
        $title = "M.A.D. - Makeing A Diffrence";
    break;

    case 'flash':
        $title = "Flash Movies";
    break;

    case 'Jokes':
        $title = "Jokes - HA, HA, I Laugh At You!";
    break;

    case 'ge':
        $title = "Gory Glory Games Galore";
    break;

    default:
        $title = "Home - Welcome To Environmental Class!";
    break;
}

?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<link href="css.css" rel="stylesheet" type="text/css" />
		<title><?php echo $title; ?></title>
	</head>
	<body>
		<div id="outer_shell">
            <div id="top_banner"><H1>Helklo</H1></div>
			<div id="inner_left_shell">
				<p>Welcome to Mr. Crows class, where enviromental science is a thing of the now!</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
				<p>Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.Some text. Some text.</p>
			</div>
			<div id="inner_right_shell">Related Links</div>
            <br style="clear: both" />
		</div>
	</body>
</html>


#12 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 26 September 2006 - 10:58 AM

OOOOO  :o! A function. I don't know why I didnt make one of thoes a while ago.  ;)

You got it to do what I wanted it do do for the looks, I will have to figuer out what is diffrent!

Thanks!
-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#13 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 26 September 2006 - 11:40 AM

I moved <div id="top_banner"></div> out of the left_inner_shell div and into the outer shell dive. Then I floated the left inner shell left and the right inner shell to the right.  I then reduced the with of left and right inner shells by 5 pixels each which produces a 10pixel gap between the two columns. This will allow the two columns to have a bit of breathing space. If you set the left and right col to 500px and 200px respectively there will be no space for the cols to move and thus the smallest column will move down underneath the biggest column.

Note: If add any padding to left or the right of the two columns you'll have to change the columns left or right columns width accordingly. For example say you added 5 pixels of padding to the left and right of the inner left shell you'll have to reduce the width of the inner shell by 10px. As padding gets added on to the width, same applies for margin.
Total width = width + (padding + margin + border)




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users