CSS Float

Aruffell · 19 Sep 2008 at 13:53

http://92.40.83.70/irc2web/

Link should work, please tell me if it doesn't as im hosting locally.

As you can see where it says blah blah i want to have a box hovering over to the right, i'm on the understanding that this should be a CSS float command.

Can anyone shed some light and possibly hand me the code to do this?

Thanks,

Andy

GravyMonster · 19 Sep 2008 at 13:54

linky no worky

markeh · 19 Sep 2008 at 14:03

For me as well.

you got something like:
<div>
<div style="float:right;">Stuff on the right</div>
Stuff in middle.
</div>

?

Aruffell · 19 Sep 2008 at 14:04

Try this one - http://www.blade-uk.pwp.blueyonder.co.uk/irc/

You can see i put a box in, just wondering how i can move that over to the left slightly so its not flush up against the right hand side and so that it starts nearer the top of instead of being confined to the bottom of that part of the page.

Thanks,

Andy

mattgaunt · 19 Sep 2008 at 14:13

Heres something I would try,

Set the table cell that contains the main content "blah blah " and grey box to have a class name like pageContent

Then have a container inside the table for content (Which will be the blah blah bit) and set that to float left, then add your float right to the grey box. to offset it use either padding-right or margin-right - I always get confused which one to use.

Hope that helps a lil - also download the web developer tool for firefox, excellent to use when making a website and seeing where divs etc are being placed

markeh · 19 Sep 2008 at 14:32

Try:

Code:

.floatright {
float: right;
width: 100px;
height: 100px;
background-color: #c0c0c0;
margin-right:10px;
}

and change:

Code:

<td colspan="9" bgcolor="#EEEEEE"> <p>&nbsp;</p>
	    <p>blah blah..<div class="floatright"></div></p>
      <p>&nbsp;</p></td>

to

Code:

<td colspan="9" bgcolor="#EEEEEE">
              <div class="floatright"></div>
                 <p>&nbsp;</p>
	    <p>blah blah..</p>
      <p>&nbsp;</p></td>

t31os · 19 Sep 2008 at 18:15

You could just slim it all down and do it without tables. Working with DIVs inside tables can be a nightmare when it comes down to cross browser compatibility.

You're also defining the margin for the body in the CSS and the HTML, why do it twice?

Also if you're going to define one side of an element, ie. margin-right, assign the other sides to. You can use shorthand like this in CSS....

margin:0 10px 0 0;

top - right - bottom - left (or how i remember it, North, East, South, West).

Test your design in various browsers using...(it supports loads, be sure to pick the ones you need to test)
http://browsershots.org/

Saves having to install them all...