So I'm using CSS on my website to try and make a div float to the right hand side but it screws up the entire page and makes the footer move upward and the content move outside of the div.

 

Here is the site:

 

http://albumfreak.com/dev/artists.php?id=2

 

You can see the div structure from the source of that site but here it basically is:

 

<main>

 

<artistpage>

 

</artistpage>

 

<footer>

 

</footer>

 

</main>

 

And here is the CSS I'm using

 

.main {
margin: 0 auto;
background-color: #FFFFFF;
padding: 10px;
height: auto;
width: 800px;
border-width: 1px;
border-style: solid;
}

.artistpage {
position: relative;
width: 400px;
float: right;
text-align: justify;
}

.footer {
position: relative;
font-size: 9px;
padding-top: 5px;
}

 

Any help would be greatly appreciated

I has similar problems creating my website, somehow if you add the float property to a div it no more effect on the vertical position of the other divs.

 

Here is a tutorial on how to create a column layout with divs, might help you out.

 

http://www.webdesignerforum.co.uk/index.php?showtopic=1254

 

Greetz R-J

If you use float then I assume you want another div to float left? If not, then I think all you want is for the content of the div to align right. Don't use float for one div in a row, there's no point, you can achieve space by using padding, margin and aligning the text/content.

 

If you have 2 divs next to each other; one floating left the other floating right and are having problems, then usually adding a

<div style="clear: both;"></div>

just under both of them should fix it.

If you use float then I assume you want another div to float left? If not, then I think all you want is for the content of the div to align right. Don't use float for one div in a row, there's no point, you can achieve space by using padding, margin and aligning the text/content.

 

If you have 2 divs next to each other; one floating left the other floating right and are having problems, then usually adding a

<div style="clear: both;"></div>

just under both of them should fix it.

I was going to put a div on the left for an image later but wanted it to go to the right for now. Adding that code you gave me to the bottom fixed everything though Thanks!

 

If it wasn't too much trouble, could you just explain to me what exactly that code does to fix it? (Just for future reference)

It kind of acts like a 'clean start'. It says "OK, all that float business going on above, forget all that from now on. Clear it from your mind Mr Browser. We're sticking with normal non-float divs so don't muck me around."

 

Unless code and browsers talk to each other in funny cartoon voices with personalities I can't get my head around anything

It kind of acts like a 'clean start'. It says "OK, all that float business going on above, forget all that from now on. Clear it from your mind Mr Browser. We're sticking with normal non-float divs so don't muck me around."

 

Unless code and browsers talk to each other in funny cartoon voices with personalities I can't get my head around anything

Thanks for your interesting explanation

 

So I will have to put this at the end of all my floats so that mr. browser doesn't get confused and mess everything up?

Exactly. Not all floated divs are the same height, so say your left one is longer than your right then your footer div will be aligned immediately below the right div which could be next to the left one, so you get a screwy layout.

 

clear:both says - end all the float business here regardless of heights and also closes up the containing div.

 

I did a search and here is a much better explanation - http://www.djangoandflex.org.uk/2007/07/wr...floats_i_1.html

Thanks a bunch for your help