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
Post a Comment