Right probable stupid and easy ansewer but I just cant seem to get my floats too go where i want them too

 

My css code is

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;


}

#wrapper

{
   width:1024px;
   height:0 auto;
}

#header

{
   width:1024px;
   background-color:black;
   font-color:white;


}

 #nav

  {
  width: 400px;
  height: 0 auto
  float:inline;
  background:black;
  margin: 0px 0px 0px 0px;
 }

      #header2


       {
          width: 400px;
          height: 0 auto
          float:  right;
          margin: 0px 0px 0px 0px;
      }

 

and my html is

<!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" xml:lang="en" lang="en">

<head>

 <title></title>
 <link rel="stylesheet" href="C:/Documents and Settings/Stewart/My Documents/photography/main.css" type="text/css" />
</head>

<body>

<div id="wrapper">
<div id="header">
<img src="C:/Documents and Settings/Stewart/My Documents/photography/header.jpg" width="1024" height="200" alt="header" />


</div>

<div id="nav">
hey gfhdhjdskdfdjfjsdfsj fgjdfgfds gjdfgjfgf  hghdhggdhfh
</div>


<div id="header2">
       hhey jefhwdf dwfhjdgfv fgfdgechbsdghcsh fgnjkjfdghjdfg fdgbfgfgesged

       </div>


</div>
</body>

</html>

 

Any help apreciated

 

Thanks

Hello perfect, how ya doing?

 

First off mate....you can only float elements either left or right (side by side). I don't know where you got "inline" from?

Try doing that first and see what you get? One piece of advice i would give is to get a couple of small images, no more than 50 x 50 pixels and mess about with the float property!

 

It won't be long before you understand how an image or any element pushes each other around on the page.

 

- neil

 

EDIT: I just had another look at your code and wanted to give some pointers on a few more things......

 

I noticed you have set the wrapper to a width of 1024px. If you have done this to fit that resolution (1024 x 768)? then you are mistaken. You need to set it to 955px as this will allow room for the browsers vertical scroll bars. Also another subtle one is when you set the margin to "0px" Instead of writing: margin: 0px 0px 0px 0px;....... just write in... margin: 0; Job done!

 

It might not seem worth it but when you have hundreds of rules in multiple stylesheets, this will free-up the file size a little.

 

Just a few subtle things mate.......carry on!

Yeh i was just messin about with the code thats why it has inline lol

ahh sorted it forgot to put ; at end of one of the lines silly me