Results 1 to 7 of 7

Thread: 4 Column Float Issue

  1. #1
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 4 Column Float Issue

    Hey,
    My Situation:
    4 divs. Widths=Fixed. Heights=Not specified. Float=All left

    My Problem:
    If div 3's height is greater than div 2's, and div 4 is pushed to a new line it will sit with a gap below div 2. (see image for the 1000 words)



    FAQ is div 4. Ideally would nest up under div one.
    Anyone Solutions??
    Thanks in advance.

  2. #2
    Join Date
    Feb 2009
    Posts
    303
    Thanks
    18
    Thanked 36 Times in 36 Posts

    Default

    Make sure that in your code, there's no clear:left tags or anything...

    Try setting flash objects to float as well, it may be clearing the fourth sidebar from floating.

    Hope that helps..

    //X96 WD\\
    Alex Blackie, X96 Design
    My Website
    I specialize in: HTML5, CSS3, PHP, Ruby on Rails, MySQL, MongoDB, Linux Server Administration

  3. #3
    Join Date
    Apr 2009
    Location
    India
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    i think! you will adjust the size of div 3.

  4. #4
    Join Date
    Apr 2009
    Location
    Near Edmonton, Alberta
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Expected behaviour.

    This seems to me to be what the usual behaviour is: Doesn't an item pushed to the next line usually line up only to the bottom of the lowest edge in the line above?

    Would you not be better to structure this page as

    HTML Code:
    <div id=column1>
       <div>
            Top left box
        </div>
        <div>
             FAQ
         </div>
    </div>
    
    <div id=column2>
       <div>
            Specs
        </dvi>
        <div>
            Flash box
        </div>
    </div>
    This way even if the box heights vary from item to item, the boxes occur at predictable places on the page.

    This also allows you to use a liquid layout, styling both columns with a percentage. If you style image widths with a percent to, your layout should work on low and high resolution screens.
    Last edited by Snookerman; 04-27-2009 at 02:33 PM. Reason: added [html] tags

  5. #5
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey Guys!
    Thanks for the tips.
    I think it is the default behaviour, as i have seen it before.
    The only styling i have is the float:left and the width:XXpx and the margins.

    The reason for the order of divs is that is full width they are in the right order. But when on smaller screens i would like them to nest nicely together.

    Looks like it might be stiff luck...

    Or can i make div 2 the same height as div 3 some how, so that they are in row. Without setting a fixed height? So the maximum height div will set the rest??

  6. #6
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

  7. #7
    Join Date
    Apr 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ANy other ideal for the layout are most welcomed too!!
    Thanks again
    Jason

Bookmarks

Posting Permissions

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