I'm facing an issue with my HTML code and need some help unraveling what's happening.
On my simple website, I have a container div, header div, and body div, but it seems like the HTML elements are not aligning properly within these divs (they are not nested correctly in the html markup).
I'm curious to understand why this behavior is occurring.
Here is the snippet of the HTML:
<html>
<head>
<title>Andy</title>
<link rel="stylesheet" href="style-andy.css" type="text/css" media="screen" />
</head>
<body>
<div id='container'>
<div id='header'>
<h1>Andy </h1>
</div>
<div id='image'>
<img src='main.jpg' />
</div>
</div>
</body>
</html>
And here is the corresponding CSS:
html, body
{
margin:0;
padding:0;
}
#container
{
width:1024;
margin:0 auto;
}
#header
{
width:1024;
padding-bottom:10px;
border:1px solid black;
}
#header h1
{
float: right;
display: inline;
color: black;
font-family: helvetica, arial;
font-weight: 100;
}
#image
{
width:1024;
height:100;
border:1px dotted yellow;
}