www.webdeveloper.com
Results 1 to 5 of 5

Thread: CSS Floats Problem

  1. #1
    Join Date
    Jun 2008
    Posts
    36

    Thumbs up CSS Floats Problem

    This should be really easy. I cant get the blue box to go into the white area using floats.

    http://jsfiddle.net/QWqsH/

    Thanks!
    killerwallpapers

  2. #2
    Join Date
    Aug 2006
    Posts
    1,917
    I'm not sure there's a way, as you have it. If you put a wrapper around the red box, and put the red and blue boxes inside it, then you could float orange and yellow to the right of them.

    Dave

  3. #3
    Join Date
    Mar 2011
    Posts
    1,144
    Hardly a fix, but closer: http://jsfiddle.net/QWqsH/1/
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    Jul 2012
    Location
    Florida
    Posts
    22
    Assuming you want the blue box to be directly under the white and red boxes like a column your problem is that your container height is set too low for the height of the three boxes. I played with it and set the container box to 73px and it fit the blue box right under the white one of the same width. There is a second alternative than setting the height, this involves making a clear div just before the closing of the container tag and removing the height setting altogether on the container.

  5. #5
    Join Date
    Jul 2012
    Posts
    10
    the solution i suggest to rearrange the code
    and it will be like follow
    <div id="container">
    <div id="red"></div>

    <div id="yellow"></div>
    <div id="orange"></div>
    <div id="blue"></div>
    </div>
    and float yellow and orange right
    this will fix your problem

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles