Warning: Creating default object from empty value in /www/subeta.net/forums/index.php on line 49 Float This? Or... - Subeta
Float This? Or...
#1 :: February 10th, 2011 @ 5:00 PM

User Avatar: 526634
668 Posts
269 Achievements


This is what I need help with.
Click Me!

This is for my XHTML/CSS class I started a few weeks ago. I'm trying to figure out how to get the far left box (the circled one) to line up with the far right box, so they both sit at the top next to eachother. Should I add a float tag to my code? Or is there something else I need to do?

Thanks in advance. :)

P.S. I will be gone for a few hours, so I'll respond when I log back on.

Bedtime | Somni | Mister Once-ler | Personal Tumblr

#2 :: February 12th, 2011 @ 9:20 PM
is lonely

User Avatar: 291437
446 Posts
303 Achievements


@Kiwako Yes that should be floated to the left. Make sure to put the html of that box before the other box, though, as some browsers will do funky things if it comes after.

#3 :: February 12th, 2011 @ 11:49 PM
is a SUPER USER!!!

User Avatar: 228479
209 Posts
805 Achievements



Like MishieMoo said, you'll have to add "float: left" to the div.

I am not sure how your coding looks, but you will also want to have a fotter that clears the 2 divs. So your code looks something like this:


#container { width: 600px; }
#left { float: left; }
#right { float: right; }
#footer { clear: both; } /* left, and right are the other values */

<div id="container">
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<div id="footer"> FOOTER THAT CLEARS</div>

I could explain the clear property, but I think that W3 Schools does a better job:

The clear property specifies which sides of an element where other floating elements are not allowed.

This will make so that any other divs you create after those, will be below those two divs and not move over to fill the space that is left when one div becomes longer.

Example Images:

CLEARED **Oops! The text in the footer in this one said it isn't cleared, but it really is..I just forgot to change the text!

Hope that helps? :)

Last Edit by: User not found (1): Amyish 2/12/11 - 11:51:25 pm

#4 :: February 26th, 2011 @ 12:17 AM
only has room for one

User Avatar: 565626
148 Posts
126 Achievements



You will also need to be careful about how close you put the two floating divs in your container. If they look alright in your browser, they might 'jump' and appear one below the other in a different browser. (Look for 'box model' in Google).

I notice all the time in Linux/Chrome that layouts appear wonky because of linux default fonts and stuff. For that stuff you can prevent weird behaviour by using a CSS reset here. This will 'clear' all default styles so you can set your own.

Furthermore, I would recommend running your website through a service like browsershots (unfortunately covered in ads as of late) to test your layout in other browsers.