Posted: 07/11/05 02:46:24pm
Being summer and all, I really wanted to get down with CSS and XHTML cause I'm a nerd like that. This is a lot harder than I initially conceived. Here is my code.
| CODE |
<html>
<head>
<!-- CSS For page layout -->
<style type="text/css">
.leftContent
{
background : #090;
width : 486;
margin-top : 0;
float : left;
}
.rightContent
{
background : #900;
width : 304;
margin-top : 0;
}
</style>
</head>
<body>
<div class ="leftContent">
<p>
Blah to the blizzah<br />
Hey to the whizzay!<br />
This be in the left column
</p>
</div>
<div class="rightContent">
<p>
Blah to the blizzah<br />
Hey to the whizzay!
</p>
</div>
</body>
</html>
|
Now, from what I've read on
some site, this should work, and there should be a column of text on the right with a red background, and a column on the left with a green background.
This is not the case. There are two divs one on top of another, and different colors. Not to mention, the green box on top has weird margins at the top and bottom that I do not want.
So, what's wrong here?
Posted: 07/12/05 02:52:54am
You have to float both of the columns. use the property float:left; for the left column and then make it float right for the right column.
they are different colours because your hex codes are different. you have #090 and #900.
Posted: 07/12/05 09:54:01am
When I floated the right column right, it would stick to the right side of the browser.
And Rory, I know the colours are different, I wanted that so I could see the difference.
Posted: 07/12/05 10:41:09pm
I wanted the right side column to sit right beside the left side column.
I don't mean to the right side of the left most column, it was sticking to the extreme right side. There was a gap between the left and right columns.
Posted: 07/13/05 04:20:41am
Sorry about the colours thing, i interpreted something you said slightly wrong.
If you want the right column next to the left one, then float that left as well (just place it after the left column).
