Jump to content

Archived

This topic is now archived and is closed to further replies.

bobleny

How do I align div tags?

Recommended Posts

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:
[code]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;
}[/code]

And here is my html:
[code]<?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>[/code]

Share this post


Link to post
Share on other sites
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:
[code]#inner_left_shell, #inner_right_shell {
    float: left;
}[/code]

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 [b]clear: both[/b] CSS to the object you place after a floated object. Or just add [nobbc]<br style="clear: both">[/nobbc] before the closing tag for [nobbc]<div id="outer_shell">[/nobbc]

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
[quote author=redarrow link=topic=109229.msg440388#msg440388 date=1159122293]
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
[/quote]

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

Share this post


Link to post
Share on other sites
[quote author=Daniel0 link=topic=109229.msg440417#msg440417 date=1159123825]
[quote author=redarrow link=topic=109229.msg440388#msg440388 date=1159122293]
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
[/quote]

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

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


[quote author=wildteen88 link=topic=109229.msg440347#msg440347 date=1159117603]
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:
[code]#inner_left_shell, #inner_right_shell {
    float: left;
}[/code]

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 [b]clear: both[/b] CSS to the object you place after a floated object. Or just add [nobbc]<br style="clear: both">[/nobbc] before the closing tag for [nobbc]<div id="outer_shell">[/nobbc]
[/quote]

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?

Share this post


Link to post
Share on other sites
[quote]Thats fine, I really dont want warnings either. However, I dont know what thoes warnings mean. What do they mean?[/quote]

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.

Share this post


Link to post
Share on other sites
I made this for you ok.

[code]

<?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>
[/code]

Share this post


Link to post
Share on other sites
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:
[code]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;
}[/code]

And here is my html:
[code]<?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>[/code]

Share this post


Link to post
Share on other sites
Okay. I go it to work how I think you want it:
CSS:
[code]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;
}[/code]
HTML/PHP:
[code]<?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>[/code]

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites
I moved [i][nobbc]<div id="top_banner"></div>[/nobbc][/i] 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)

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.