Jump to content

How do I align div tags?

bobleny

By bobleny
in CSS Help

 Share

Recommended Posts

bobleny Regular Member

bobleny

Posted
Posted
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]
Link to comment
https://forums.phpfreaks.com/topic/21817-how-do-i-align-div-tags/
Share on other sites
wildteen88 Regular Member

wildteen88

Posted
Posted
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 Advanced Member

redarrow

Posted
Posted
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
Daniel0 Advanced Member

Daniel0

Posted
Posted
[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 Regular Member

bobleny

Posted
  • Author
Posted
[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 Regular Member

AndyB

Posted
Posted
[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 Advanced Member

redarrow

Posted
Posted
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 Regular Member

bobleny

Posted
  • Author
Posted
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 Regular Member

wildteen88

Posted
Posted
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]
wildteen88 Regular Member

wildteen88

Posted
Posted
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)
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

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.