[SOLVED] 2 columns side be side under a header in a parent element... Impossible!!? No...

bobleny · February 28, 2007

Ok, so here is my problem..

I have 2 columns side be side under a header in a parent element that houses everything.

My two columns are "#text_house" (Left) and "#related_links" (Right).

The parent element that the two columns are to be under is "#main_body".

I have tried setting the position of the to child elements to absolute, but they are lining up to the browser window much like "position: fixed;" would line up... They aren't supposed to do that...

It should look something like this:

___
| | |

My problem, they are static by default and the look much like this:

_
| |
_
| |

One right under the other.

Here is my HTML:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link href="css.css" rel="stylesheet" type="text/css" />
	<title>Welcome!</title>
</head>
<body>
<div id="main_body">
	<div id="header"></div>

	<div id="text_house">
		Hello, it is I, Mr. Frustrated.
	</div>

	<div id="related_links">
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
		</ul>
	</div>
</div>
</body>
</html>

Here is my CSS:

body
{
background-color: #ffffff;
width: 100%;
height: 100%;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}


#main_body
{
background-color: #ffffff;
width: 80%;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding: 0px;
}


#header
{
background-color: #009900;
width: 100%;
height: 80px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}


#text_house
{
background-color: #99ffff;
width: 80%;
margin-top: 0px;
margin-left: 0px;
margin-right: 5px;
margin-bottom: 5px;
border-style: solid;
border-color: #000000;
border-width: 1px;
}


#related_links
{
background-color: #996600;
width: 20%;
margin-top: 0px;
margin-left: 5px;
margin-right: 0px;
margin-bottom: 5px;
border-style: solid;
border-color: #000000;
border-width: 1px;
}

This is a link to the page so you can see what it is doing:

http://www.firemelt.net/crow/

Note: the blue box should be left of the brown box.

How do I fix this?

Thanks!

ToonMariner · February 28, 2007

the border on the related links means that it will be wider than 20%

try this...

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link href="css.css" rel="stylesheet" type="text/css" />
	<title>Welcome!</title>
</head>
<body>
<div id="main_body">
	<div id="header"></div>

	<div id="related_links">
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
		</ul>
	</div>
	<div id="text_house">
		Hello, it is I, Mr. Frustrated.
	</div>

</div>
</body>
</html>

#main_body
{
background-color: #ffffff;
width: 80%;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding: 0px;
}


#header
{
background-color: #009900;
width: 100%;
height: 80px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}

#text_house ,
#related_links
{
margin: 0 0 5px 5px;
border: 1px solid #000;
}

#text_house
{
background-color: #99ffff;
}


#related_links
{
background-color: #996600;
float: right;
width: 20%;
}

bobleny · February 28, 2007

What you suggested didn't work, but I did get close. I didn't know the 20 - 80 % thing would be a problem...

This is what I got:

http://www.firemelt.net/crow/

With this:

body
{
background-color: #ffffff;
width: 100%;
height: 100%;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}


#main_body
{
background-color: #ffffff;
width: 80%;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding: 0px;
}


#header
{
background-color: #009900;
width: 100%;
height: 80px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}


#text_house
{
background-color: #99ffff;
width: 80%;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 5px;
border-style: solid;
border-color: #000000;
border-width: 1px;
float: left;
}


#related_links
{
background-color: #996600;
width: ;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 5px;
border-style: solid;
border-color: #000000;
border-width: 1px;
float: right;
}

How can I make related_links span that whole distance?

bobleny · March 1, 2007

Ok, I set the #related_links to a minimum value and it now works right.

Thanks!

Sign In

[SOLVED] 2 columns side be side under a header in a parent element... Impossible!!? No...

Recommended Posts

bobleny

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

bobleny

Link to comment

Share on other sites

bobleny

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information