Andy
Andy

Reputation: 1179

Whats keeping these elements from being inside certain divs?

Something interesting is happening with my HTML code and I was hoping someone could explain what is going on here.

I have a very simple website with a container div, header div, and body div and it looks like the html elements aren't responding at all to the divs(They aren't going in the div they are between in the html markup).

Was wondering why its behaving this way.

Here is 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>

Here is the 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;
}

Upvotes: 0

Views: 51

Answers (1)

Lucas
Lucas

Reputation: 10646

Your HTML looks fine, but your CSS is missing the px measurement on your widths and heights and your h1 tag is being made to float: right; meaning that the header div probably won't have a height (You will need to 'clear' the header div)

Edit:

FYI, a simple way to clear is to just put a div with a class of clear under the content you need to clear, then use the CSS to tell that div to clear, for example:

HTML:

<div id="header">
    <h1>Andy</h1>
    <div class="clear"></div>
</div>

CSS:

.clear {
    clear: both;
}

There are other ways of doing this, for example: http://www.webtoolkit.info/css-clearfix.html

Upvotes: 1

Related Questions