asked on

Two Divs Side by Side, Text Not Lining Up, CSS

I am makeing a website that requires two div's side by side. Making the div's appear side by side worked just fine, but the problem I am having is that when I put text in each one of the div's, the div on the right starts the text in the correct place, but the div on the left has the text starting about 20px down. I cannot figure out why. Below is some example HTML, w/ the CSS in the head. Any advice would be appreciated.

--------------------------------------------------
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<style type="text/css">
#homecolumncontain {
      width: 740px;
      height: 250px;
      font-size: 120%;
}
#homeleftcolumn {
      float: left;
      width: 360px;
      height: 250px;
      background: red;
}
#homerightcolumn {
      width: 360px;
      height: 250px;
      margin-left: 380px;
      background: blue;
      }
</style>
</head>

<body>
<div id="homecolumncontain">
<div id="homeleftcolumn">
<p>Should Lineup w/ Text 1</p>
<p>Should Lineup w/ Text 2</p>
<p>Should Lineup w/ Text 3</p>
</div>
<div id="homerightcolumn">
<p>Text 1</p>
<p>Text 2</p>
<p>Text 1</p>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------

ASKER CERTIFIED SOLUTION

JF0

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Mike_Plug

ASKER

That works 100%. Thanks you.

Do you know why the text was not lined up the way I had it coded?