Hi everyone, im an 18 year old guy thats doing his first major HTML/CSS work. Basically im designing a basic website with not that much content, however I do want it to look clean and sleek.

My problem is with floating objects, it displays how I want it to in IE8 but not in firefox/chrome. The CSS is displayed below:

body
img
{
float:right;
}

#content
{
float:left;
}

div

{
border: 4px solid gray;
padding: 0;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px
}

#content
{
font-family: Verdana;
size: Small;
border: 4px solid gray;
padding: 0;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px
}

#menu
ul {list-style: none;}
li {border: 4px solid gray;
font-family: Verdana;
size: Small;
display: inline;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

That expert drawing above shows basically what I want, the text box inline with the picture.

Help much appreciated.

First, never use IE, any version, as your measurement of what is correct rendering, 99% of the time it is WRONG. Make it work in GOOD browsers, such as Firefox, Chrome or Safari, then kick IE into compliance as needed.

Next, when you float an element, you need to give it a width, images being an exception as long as the width and height are properly specified in the html.

Put your image INSIDE of the #content div, floated, and you'll get what you want, the photo to the right of the text. If you want to leave the image outside of the #content div, then you're going to have to specify a width for #content that is narrow enough to allow for the width of the image to the right.

Thanks for the quick response, ill give it a go.