#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    6
    Rep Power
    0

    CSS Float Resizing issue


    When the window is maximized it displays 3 of my "widgets" as I make the window smaller the last widget drops to the next row (everything is fine)... But when the .widgets div tries to get smaller than 800 pixels the whole thing bumps down below my navigation column... I've been reading up on the box model and really I'm just practicing but I am really stuck here... Here is my code I have already validated it and have decently detailed comments:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    
    <title>Test</title>
    <style type="text/css">
    
        /* Resets */
        * {
            padding: 0;
            border: 0;
            margin: 0;
            overflow: hidden;
        }
    
        /* Wrapper div to keep the whole shebang centered */
        #main_wrapper {
            width: 85%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            min-width: 600px;
        }
    
        /* Left column styles for navigation */
        #left_col {
            float: left;
            width: 20%;
            min-width: 200px;
            height: 100%;
        }
    
        /* Main content column styles */
        #main_col {
            float: left;
            width: 80%;
            min-width: 400px;
            height: 100%;
        }
    
        /* Container for the widgets */
        #widgets {
            background-color: #add8e6;
            width: 100%;
            min-width: 400px;
        }
    
        /* Reusable class for all widgets */
        .widget {
            float: left;
            height: 100px;
            width: 400px;
        }
    </style>
    
    </head>
    
    <body>
    
        <!-- Outer container for our two column layout -->
        <div id="main_wrapper">
    
            <!-- Left column for navigation -->
            <div id="left_col">
                    navigation
            </div>
    
            <!-- Right column is the main content column -->
            <div id="main_col">
    
                <!-- Everything up until this point would be put into a header template and reused for multiple pages -->
    
                <!-- Container for the widgets just to add a background that contains them all and whatnot -->
                <div id="widgets">
    
                    <!-- 5 Widgets each one's width is 400px when the display drops below 800 it should shift every 2nd one down.
                         It works for going from 3 widgets to 2 widgets wide why doesn't it work for going from 2 to 1 widget wide? -->
                    <div class="widget">
                        widget 1
                    </div>
    
                    <div class="widget">
                        widget 2
                    </div>
    
                    <div class="widget">
                        widget 3
                    </div>
    
                    <div class="widget">
                        widget 4
                    </div>
    
                    <div class="widget">
                        widget 5
                    </div>
    
                </div>
    
            </div>
    
        </div>
    
    </body>
    
    </html>
    Thanks in advance for any help you can offer.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    Your minimum widths for your left_col and main_col are too wide for the smaller screen when you have your overall width set to 85%. I actually can't work out exactly why as 85% of 800px is 680px so it should fit but if you remove the minimum widths form these 2 divs you will see that the site works as expected and still displays as expected.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    6
    Rep Power
    0
    I'm a bit confused ...
    On the main wrapper i have: min-width: 600px;
    The left & main col divs have min widths of 200px and 400px respectively.... It should fit right? Maybe I am misunderstanding how min width works...

    Main wrapper has width: 85% but also has min width 600px.... I have no idea why it being less than 800px would factor in at all.... When I have min-width 600px that means it doesn't matter if 85% is less than 600 px, the div must stay at least 600 px(which is enough for the left and main cols to fit) right?

    Edit: Also removing the min widths from the main and left cols allows for it to go to 1 widget wide... but then if i make it really small it drops the main col down below the nav one which is undesireable
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    As I said, it doesn't make sense to me regarding the width available and your minimum widths either as they should fit.

    With regard to the widgets appearing beneath the navigation on an even small resolution then that will happen as you minimum widths won't fit and as you have both the left and main cols floated left it will drop down below.

    Float your main content div to the right and that won't happen, though you will ned up with horizontal scroll bars.

    Comments on this post

    • uzumakinaruto agrees
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    6
    Rep Power
    0
    Thanks a lot
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    It doesn't work because the ratios of widths and min-widths for the two columns are different. The wider column never gets down to its min-width. When the "#main_wrapper" gets to it's min-width of 600px, the width of "#main_col" is 480px.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    6
    Rep Power
    0
    Originally Posted by Kravvitz
    It doesn't work because the ratios of widths and min-widths for the two columns are different. The wider column never gets down to its min-width. When the "#main_wrapper" gets to it's min-width of 600px, the width of "#main_col" is 480px.
    Thank you very much sir. I had no idea that the minimum widths in pixels would have to be equal in ratio to the widths which were in %. I guess I thought there was some magic to where the min widths would not let it go smaller than the widths even if the percentages were off.. Thank you very much this was very enlightening.

    Here is the source with the modifications so that they work. I Just updated the nav to be min width 100(20%) which is indeed 1/5th of the main column 500(80%).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    
    <title>Test</title>
    <style type="text/css">
    
        /* Resets */
        * {
            padding: 0;
            border: 0;
            margin: 0;
            overflow: hidden;
        }
    
        /* Wrapper div to keep the whole shebang centered */
        #main_wrapper {
            width: 85%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            min-width: 500px;
        }
    
        /* Left column styles for navigation */
        #left_col {
            float: left;
            width: 20%;
            min-width: 100px;
            height: 100%;
        }
    
        /* Main content column styles */
        #main_col {
            float: left;
            width: 80%;
            min-width: 400px;
            height: 100%;
        }
    
        /* Container for the widgets */
        #widgets {
            background-color: #add8e6;
            width: 100%;
            min-width: 400px;
        }
    
        /* Reusable class for all widgets */
        .widget {
            float: left;
            height: 100px;
            width: 400px;
        }
    </style>
    
    </head>
    
    <body>
    
        <!-- Outer container for our two column layout -->
        <div id="main_wrapper">
    
            <!-- Left column for navigation -->
            <div id="left_col">
                    navigation
            </div>
    
            <!-- Right column is the main content column -->
            <div id="main_col">
    
                <!-- Everything up until this point would be put into a header template and reused for multiple pages -->
    
                <!-- Container for the widgets just to add a background that contains them all and whatnot -->
                <div id="widgets">
    
                    <!-- 5 Widgets each one's width is 400px when the display drops below 800 it should shift every 2nd one down.
                         It works for going from 3 widgets to 2 widgets wide why doesn't it work for going from 2 to 1 widget wide? -->
                    <div class="widget">
                        widget 1
                    </div>
    
                    <div class="widget">
                        widget 2
                    </div>
    
                    <div class="widget">
                        widget 3
                    </div>
    
                    <div class="widget">
                        widget 4
                    </div>
    
                    <div class="widget">
                        widget 5
                    </div>
    
                </div>
    
            </div>
    
        </div>
    
    </body>
    
    </html>
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    You're welcome.

    You really only need the min-width on "#main_wrapper". Setting it on the columns as well is redundant.

    I should mention that using that reset rule, especially with "overflow:hidden", is likely to cause problems. For example, setting the padding and borders to "0" for all elements causes problems with some form controls, e.g. the <select> element, in some browsers.

    P.S. Welcome to DevShed Forums, uzumakinaruto.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    6
    Rep Power
    0
    Thanks for the warm welcome Kravvitz. I have one more question... By setting the min-widths on the inner containers I was hoping that they would never go lower than a certain # of pixels. My reasoning was that if I make my browser ultra tiny aka a phone display I would want it to show scroll bars so the user could view the content still... but it seems with my approach the columns will not stay open but instead choose to obey the percentages. Do you have any advice?

    Thanks!
  18. #10
  19. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    but it seems with my approach the columns will not stay open but instead choose to obey the percentages.
    Do you have any reason to expect that they might not "obey the percentages"?

    I would recommend using CSS3 Media Queries to make any needed adjustments for the small screens of mobile/handheld devices:
    http://www.onextrapixel.com/2012/04/...media-queries/
    http://www.techrepublic.com/blog/web...eb-design/1789
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo