CODEWITHSUNDEEP
csscss-float
DSM811
DSM811

Reputation: 1

CSS Floats not going as planned

So I'm pretty new to both css and html but this is not the first time that I have used floats to achieve 2 divs sitting next to each other. This time it is not working properly and I've been tinkering around for about 3 hours and I figure I should call on some help.

I have edited the portion of my website in jsFiddle to assist in describing my problem:

http://jsfiddle.net/9QRcP/10/

Upvotes: 0

Views: 84

Answers (4)

Aaron Newton
Aaron Newton

Reputation: 2306

I had a fiddle with your code: http://jsfiddle.net/9QRcP/15/

I haven't bothered to correct the alignment, but left is now on left and right is now on right.

By my own admission this isn't a very good approach to this. A few pointers:

  1. you can use 'clear: left' to force an element on the left to move to a new line http://www.w3schools.com/cssref/pr_class_clear.asp
  2. you should probably contain your left and right elements in 2 seperate containers (e.g. class="container left" and class="container-right" ). Clear left for any sub-element in the left container that you want to move to the next vertical level, and likewise for elements in the right container. This will allow you to easily break your page up into columns. Here 's one I prepared earlier http://jsfiddle.net/9QRcP/19/ from http://www.quirksmode.org/css/clearing.html
  3. you could probably save yourself a lot of work by using a grid system, e.g. http://960.gs/

Upvotes: 0

Clinton Green
Clinton Green

Reputation: 9977

I found that you need to float #greeting_wrapper and #about_wrapper. These wrappers are the important elements. As far as I can tell, the children of these divs shouldn't need to be floated as well.

Also currently those divs are taking on the width of the body which is 960px thus forcing both divs onto a new line.

Upvotes: 1

Nightfirecat
Nightfirecat

Reputation: 11610

The problem isn't that you're not assigning your divs to float: right, but that your divs are small enough that you can fit multiple of them within the page width, so they're doing exactly what they should do.

To fix this, though, we would add clear:right to #about_side and #about_side_footer, but that won't force them to be level, so it doesn't quite fix the problem.

To fix that problem as well, instead of floating each individual piece of your #greeting_wrapper and #about_wrapper left and right, respectively, float the wrappers left and right instead.

#greeting_wrapper {
  float: left;
}

#about_wrapper {
  float: right;
}

#greeting_header, #greeting, #greeting_footer, #about_side_header, #about_side, #about_side_footer {
  float: none;
}

Upvotes: 2

Christophe
Christophe

Reputation: 28114

The issue is with the width of your wrapper. If you increase the width, the floated div will take its place on the right.

Upvotes: -1

Related Questions