html - Prevent DIV from Wrapping with Fluid Layout -


i having trouble preventing div wrapping next line when shrink browser window. there must small , simple missing, i've been @ while , cannot figure out. appears kick down "blog" div, not "info" div. suggestions?

here 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> 

because you're assigning min-width in pixels, page gets smaller, you're running out of enough pixels maintain sum of widths, , browser forcing blog div wrap. widths totaling 900px, once browser window dips below 900px you'll start seeing wrapping.

what's happening min-width of 396px becomes larger 40% of browser width.


Comments

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

gmail - Is there any documentation for read-only access to the Google Contacts API? -

php - Controller/JToolBar not working in Joomla 2.5 -