Float This? Or...


#54401964 Posted on: 02/10/11 at 5:00pm
Badger


Avatar
Post (0)

269
668

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.



#54401963 Posted on: 02/12/11 at 9:20pm
MishieMoo
is lonely


Avatar
Post (0)

326
461

@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.



#54401962 Posted on: 02/12/11 at 11:49pm
Amy
is a SUPER USER!!!


Avatar
Post (0)

805
209

@Kiwako

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:

Code:

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

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


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

Quote:
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!
NOT CLEARED


Hope that helps? :)



#54401961 Posted on: 02/26/11 at 12:17am
v0id
only has room for one


Avatar
Post (0)

132
151

@Kiwako

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.