Div not Floating Right as Intended

HTML & CSS
1

Hi All,

I’m working on the following page: Tricorp

As you can see, the aboutcontent DIV is following below the bar picture instead of floating to the right of it. Should I include the bar picture inside the div as a nested div to remedy this issue? Or, is there another approach to setting up the layout so that the aboutcontent DIV floats to the right of the bar picture?

Thanks,
Sid

2

I am having additional challenges wrapping the text around the image. The first 1-2 <p> tags need to align to the right of the picture. How do I change my CSS to make this happen?

3

If you are talking about having the text wrap this image (<img src=“css/images/AboutRestaurantImg.jpg” alt=“TGIF Restuarent” class=“img-TGIFPic” id=“TGIFPic”>) then add a class to it andf float it left width with a small right and bottom margin to keep the text away.

4

Hi,

You have floated the aboutcontent but you haven’t given it a width so it will be as wide as its content. As its content is 100% wide then the float will be 100% wide and can never be next to anything and will occupy the whole line.

Either give the float a width (440px approx) or don’t give it a width and don’t float it at all and it will automatically wrap the floated image.

Don’t mix old and new. You have used align=left on the image but align is deprecated in strict and you should float that image. Also clear:all is also deprecated and you should use css and use clear:both but avoid empty clearer divs in the mark up when there are much better methods available (such as overflow:hidden on the parent or the :after routines - see css faq on floats for more info).

Be careful with your dimensions as some of your inner elements have widths greater than their parents and won’t fit.

Is this necessary:


<!--main-->
<div id="main">

I would never have guessed :slight_smile:
Don’t state the obvious and only comment where needed. IE6 has lots of bugs with comments so only comment when really needed.

That’ll do to start with :slight_smile:

5

Hi Paul,

Thanks for your suggestions. I’ve removed the deprecated align properties and made changes to the CSS. The page is still not flowing well as the text and restaurant picture are still floating to the right. What further changes should be made to polish this up?

Thanks,
Sid

6

Hi,

You removed the align properties but you didn’t add the float properties. align=left is much the same as float:left so you need to add a class to those images and then set them to float left and give them some margin to repel the text a bit.

e.g.


img.test {float:left;margin:0 10px 10px 0;}
7

That did the trick. Thanks much for your help:)