How do I align div tags?

bobleny · September 23, 2006

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]

wildteen88 · September 24, 2006

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]

redarrow · September 24, 2006

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

bobleny · September 24, 2006

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?

Daniel0 · September 24, 2006

[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.

bobleny · September 24, 2006

[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?

AndyB · September 24, 2006

[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.

redarrow · September 24, 2006

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]

bobleny · September 24, 2006

I don't understand, why did you make that?

bobleny · September 26, 2006

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]

wildteen88 · September 26, 2006

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]

bobleny · September 26, 2006

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!

wildteen88 · September 26, 2006

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)

Sign In

How do I align div tags?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information