Home/ Questions/Q 8047301
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T06:03:33+00:00

I am having trouble preventing a DIV from wrapping to the next line when

  • 0

I am having trouble preventing a DIV from wrapping to the next line when I shrink the browser window. There must be something small and simple I am missing, but I’ve been at it for a while now and I cannot figure it out. It appears to only kick down the “blog” div, but not the “info” div. Any suggestions?

Here is an example:
http://www.spynsycle.com/portfolio/

CSS:

/* Level 1 */
#container {
    min-width: 800px;
    width: 100%;
    min-height: 768px;
    height: 100%;
    background-color: lightgrey;
}

/* Level 2 */
#portfolio {
    min-width: 396px;
    width: 40%;
    min-height: 768px;
    height: 100%;
    float: left;
    background-color:lightgreen;

} 
#information {
    min-width: 108px;
    width: 20%;
    min-height: 768px;
    height: 100%;
    float: left;
    background-color: lightcoral;
}
#blog {
    min-width: 396px;
    width: 40%;
    min-height: 768px;
    height: 100%;
    float: left;
    background-color: lightblue;
}

HTML:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Portfolio</title>
        <link rel="stylesheet" href="css/index.css" type="text/css" />
    </head>
    <body>
        <div id="container">
            <div id="portfolio">
                Port       
            </div>
            <div id="information">
                Info
            </div>
            <div id="blog">
                Blog
            </div>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Because you’re assigning min-width in pixels, as your page gets smaller, eventually you’re running out of enough pixels to maintain the sum of your widths, and you browser is forcing your blog div to wrap. Your widths are totaling to 900px, so once the browser window dips below 900px you’ll start seeing wrapping.

    What’s happening is eventually your min-width of 396px becomes larger than 40% of the browser width.

    • 0