I'm having trouple with <p>s and <div>s

foul5town · Joined: 07 Apr 2009 Posts: 4

The layout consists of divs. The side bar has an <h3> heading, and the content has an <h3> heading. But when I look at the site, the two headings do not line up evenly. The "content" heading is dropped down one line (which is obvious since the <p> automatically does that), but the side bar heading is unaffected and stays where it's at...at the top of the div.

here is a link to the "test" site

The side bar is labled as "left"
And content is labled as "content"

here is the code for the page...and I highlighted the divs and the style codes. Thanks a lot in advance...

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">

<html>
<head>
<title>layout 2</title>
<style type=text/css>

body {
background-color:white;
font-family:candara;
font-size:13px;
color:rgb(125,125,135)}

/*headings*/
h1,h2,h3,h4,h5,h6 {padding:0px;margin:0px}

/*links*/
a.menu {color:rgb(75,185,220);text-decoration:none}
a.menu:hover {color:rgb(115,215,255)}

/*layout*/
#container {width:700px;margin-left:auto;margin-right:auto}
#header {background-color:rgb(75,185,220);color:white;margin:0;border:0;padding:15px}
#headpic {border:0;margin:0;padding:0}
#menubar {background-color:white;margin:0;padding:3px;text-transform:uppercase;word-spacing:60px;text-align:center;font-weight:bold;font-size:23px}
#left {width:200px;padding:10px;margin:0;border:0;float:left;text-align:center}
#content {padding:10px;margin-left:200px;border:0}
#footer {background-color:white;font-size:8px;color:rgb(150,150,150);clear:left;padding:3px}

/*images*/
img.space {margin:25px}

</style>

</head>
<body>

<div id="container">
<div id="header">
<h1>layout number 2</h1></div>
<div id="headpic"><img src="http://www.foul5town.webs.com/plant.jpg"></div>
<div id="menubar"><a class="menu" href="http://www.google.com/">test</a> <a class="menu" href="http://www.google.com/">test</a> <a class="menu" href="http://www.google.com/">test</a> <a class="menu" href="http://www.google.com/">test</a> <a class="menu" href="http://www.google.com/">test</a> <a class="menu" href="http://www.google.com/">test</a></div>
<div id="left">
<p><h3>Side Bar</h3></p>
</div>
<div id="content">
<p><h3>Content</h3></p>
<p>
<h3>samples</h3>
</p>
<p><img class=space height=100 src="http://www.foul5town.webs.com/flower.jpg" width=100> <img class=space height=100 src="http://www.foul5town.webs.com/flower.jpg" width=100> <img class=space height=100 src="http://www.foul5town.webs.com/flower.jpg" width=100></p></div><div id="footer">copyright info 2009 </div></div>

</body>
</html>

sticks464 · Joined: 31 Dec 2006 Posts: 2311

Correct these errors and it will probably work correctly in IE (it is ok in Firefox).

Remove the blank line at the top of the code. There cannot be any space before the doctype or browsers go into quirks mode rendering code as they see fit.

You cannot put an h3 element inside a p element nor can you put a p inside an h3.

Using xhtml img tags must use the short tag closing method

foul5town · Joined: 07 Apr 2009 Posts: 4

Dude thanks a lot man that worked.