html - Why are my columns wrapping? -
i had quick question website taking design code. using simple grid layout few fixed-width columns, reason when browser wraps below 1500 pixels, columns start wrapping. i'm super confused why happening have width set on container , columns fixed-width.
here link site on staging server: http://staging.slackrmedia.com/halfpast/
here link jsfiddle: http://jsfiddle.net/pafkw/
please note "external resources" located in jsfiddle
here code:
html:
<body class="transition"> <div class="container center"> <header class="row"> <div class="col-1-3-fixed"> <nav> <ul class="inline text-left"> <li> <a href="">the chronique</a> </li> <li> <a href="">boutiques</a> </li> </ul><!-- .inline .text-left --> </nav> </div><!-- .col-1-3-fixed --> <div class="col-1-3-fixed"> <a href=""> <img src="http://staging.slackrmedia.com/halfpast/images/logo.png" class="img-center transition" alt="halfpast logo" /> </a> </div><!-- .col-1-3-fixed --> <div class="col-1-3-fixed"> <ul class="inline text-right"> <li> <a href="">login</a> </li> <li> <a href="">register</a> </li> </ul><!-- .inline .text-right --> <nav> <ul class="inline text-right"> <li> <a href="">reviews</a> </li> <li> <a href="">features</a> </li> </ul><!-- .inline .text-right --> </nav> </div><!-- .col-1-3-fixed --> </header><!-- .row --> </div><!-- .container .center --> <div class="row"> <div class="col-1 masthead background-cover"> <div class="container center"> <h1 class="text-center">use halfpast find local luxury watch dealers.</h1> <h2 class="text-center">register below or <a href="">log in here</a></h2> <form action="" class="center"> <input type="text" name="name" placeholder="first & last name:" /> <input type="email" name="email" placeholder="email address:" /> <input type="password" name="password" placeholder="password:" /> <input type="submit" value="create account" class="btn" /> </form> </div><!-- .container .center --> </div><!-- .col-1 --> </div><!-- .row --> <div class="row how-does-halfpast"> <div class="container center"> <div class="col-1-fixed"> <img src="http://staging.slackrmedia.com/halfpast/images/seperator.png" /> <h1 class="tk-ltc-bodoni-175 text-center">how halfpast work?</1> </div><!-- .col-1-fixed --> <div class="col-1-2-fixed"> <img src="http://staging.slackrmedia.com/halfpast/images/imac.png" /> </div><!-- .col-1-2-fixed --> <div class="col-1-2-fixed"> <p><span class="text-red">halfpast works brands , retailers simplify way shop luxury watches</span></p> <p>browse through our articles , request "product details" connect our network of manufacturer authorized dealers.</p> <p>halfpast anonymously submit request local authorized dealer, respond additional information. our service introduces high-quality retailers , allows engage them in low-pressure environment.</p> <p>authenticity guaranteed.</p> </div><!-- .col-1-2-fixed --> </div><!-- .container .center --> </div><!-- .row --> <div class="row halfpast-features-services"> <div class="container center"> <div class="col-1-fixed text-center"> <h1 class="tk-ltc-bodoni-175">halfpast features & services</h1> <h4 class="center">halfpast partners brands , retailers find relevant authorized retailer in geography</h4> </div><!-- .col-1-fixed .text-center --> <div class="col-1-2-fixed"> <div class="row"> <div class="col-1-8"> <p><span class="icon-map-marker text-red"></span></p> </div><!-- .col-1-8 --> <div class="col-7-8"> <p><span class="text-red">find local watch dealers in area</span></p> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. morbi sodales rutrum mauris, porta augue.</p> </div><!-- .col-7-8 --> <img src="http://staging.slackrmedia.com/halfpast/images/map.png" alt="find local watch dealers in area" class="img-border" /> </div><!-- .row --> </div><!-- .col-1-2-fixed --> <div class="col-1-2-fixed"> <div class="row"> <div class="col-1-8"> <p><span class="icon-info text-red"></span></p> </div><!-- .col-1-8 --> <div class="col-7-8"> <p><span class="text-red">get exclusive content brands</span></p> <p>halfpast partners leading brands in luxury watch industry provide exclusive branded content.</p> </div><!-- .col-7-8 --> <img src="http://staging.slackrmedia.com/halfpast/images/chrono-blue.png" alt="get exclusive content brands" class="img-border" /> </div><!-- .row --> </div><!-- .col-1-2-fixed --> </div><!-- .container .center --> </div><!-- .row --> <div class="row sign-up"> <div class="container center"> <div class="col-1-fixed text-center"> <h5 style="display: inline;">sign free halfpast account — today</h5> <a class="btn">create account</a> </div><!-- .col-1-fixed --> </div><!-- .container .center --> </div><!-- .row --> <footer class="row"> <div class="container center"> <div class="col-1-3-fixed footer-nav"> <p>navigation</p> <div class="row"> <div class="col-1-2"> <ul> <li> <a href="">the chronique</a> </li> <li> <a href="">reviews</a> </li> <li> <a href="">contact</a> </li> </ul> </div><!-- .col-1-2 --> <div class="col-1-2"> <ul> <li> <a href="">boutiques</a> </li> <li> <a href="">features</a> </li> <li> <a href="">register/login</a> </li> </ul> </div><!-- .col-1-2 --> </div><!-- .row --> </div><!-- .col-1-3-fixed --> <div class="col-1-3-fixed"> </div> <div class="col-1-3-fixed"> <p>sign our newsletter</p> <form action=""> <input type="email" placeholder="your email address" required /><span class="form_hint">proper format "name@something.com"</span> <input type="submit" value="sign up" class="btn small" /> </form> </div><!-- .col-1-3-fixed --> <div class="col-1-fixed"> <img src="http://staging.slackrmedia.com/halfpast/images/logo-footer.png" class="img-center transition" /> </div><!-- .col-1-fixed --> </div><!-- .container .center --> </footer><!-- .row --> css:
/* general ============================= */ html, html { padding-top: 20px; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); font-smooth: always; -webkit-font-smoothing: antialiased; } body { font: 1em/1.6 "myriad-pro", arial, helvetica, sans-serif; } .left { float: left; } .right { float: right; } .center { margin: 0 auto; } .img-center { display: block; margin: 0 auto; } .img-border { border: 5px solid #fff; } /* typography ============================= */ h1 { font-size: 2.2em; } h2 { font-size: 2em; } h3 { font-size: 1.8em; } h4 { font-size: 1.6em; } h5 { font-size: 1.4em; } h6 { font-size: 12em; } { color: #434343; text-decoration: none; } a:hover { color: #000; } .text-right { text-align: right; } .text-left { text-align: left; } .text-center { text-align: center; } .text-red { color: #c60202; font-size: 1.313em; } /* lists ============================= */ ul { list-style: none; } ul li, ol li { line-height: 2; } ul.inline li, ol.inline li { display: inline; } ul.inline li:last-child, ol.inline li:last-child { margin-right: 0px; } input { -webkit-appearance: none; } a:active, a:active *, a:focus, a:focus *, input:focus, select:focus, textarea:focus, button:focus { outline: none; -moz-outline-style: none; } /* effects ============================= */ .box-shadow { -webkit-box-shadow: 0px 0px 3px 3px rgba(150, 150, 150, 0.3); box-shadow: 0px 0px 3px 3px rgba(150, 150, 150, 0.3); } .border-radius { -webkit-border-radius: 3px; border-radius: 3px; } .transition, a:hover { -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -ms-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear; } .background-cover { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* selection ============================= */ *::selection { background: #d31d1c; color: #fff; } *::-moz-selection { background: #d31d1c; color: #fff; } *::-webkit-selection { background: #d31d1c; color: #fff; } /* container (w/micro-clearfix) ============================= */ .container { max-width: 1080px; } .container:before, .container:after { content: " "; display: table; } .container:after { clear: both; } .container { width: 80%; *zoom: 1; } /* grid ============================= */ [class*='col-'] { float: none; width: 100%; } *, *:after, *:before { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .row { margin-left: -20px; } .row:after { clear: both; content: ""; display: table; } /* * grid gutters */ [class*='col-'] { float: left; padding-left: 20px; } .row-pad { padding: 20px 0 20px 20px; } .row-pad [class*='col-']:last-of-type { padding-right: 20px; } /* * fluid grid columns */ .col-1 { width: 100%; } .col-7-8 { width: 75%; } .col-2-3 { width: 66.66%; } .col-1-2 { width: 50%; } .col-1-3 { width: 33.33%; } .col-1-4 { width: 25%; } .col-1-8 { width: 12.5%; } /* * fixed grid columns */ .col-1-fixed { width: 1080px; } .col-7-8-fixed { width: 945px; } .col-2-3-fixed { width: 720px; } .col-1-2-fixed { width: 540px; } .col-1-3-fixed { width: 360px; } .col-1-4-fixed { width: 270px; } .col-1-8-fixed { width: 135px; } /* header */ header img:hover { opacity: 0.6; } header ul.inline li, header nav ul.inline li { margin-right: 20px; } header nav ul.inline li:last-of-type, header ul.inline li:last-of-type { margin-right: 0px; } header nav { margin-top: 90px; } header.row .col-1-3-fixed:last-of-type nav { margin-top: 42px; } header nav ul.inline li { margin-right: 80px; } /* masthead */ .masthead { background: #000 url('../images/header.png') no-repeat center center; color: #fff; font-weight: 100; min-height: 555px; } .masthead .container { margin-top: 90px; } .masthead { color: #c60202; } .masthead a:hover { text-decoration: underline; } .masthead h1, .masthead h2 { font-weight: 100; } .masthead h1 { font-size: 2.625em; margin-bottom: 5px; } .masthead h2 { font-size: 2em; margin-top: 10px; } .masthead form { background: #fff; margin-top: 60px; padding: 20px; width: 930px; } .masthead form input { height: 40px; } .masthead form input[type="submit"].btn { font-size: 1.25em; line-height: 20px; } .masthead form ::-webkit-input-placeholder { color: #000; } .masthead form :-moz-placeholder { color: #000; } .masthead form ::-moz-placeholder { color: #000; } .masthead form :-ms-input-placeholder { color: #000; } /* body */ .how-does-halfpast { margin-bottom: -65px; } .how-does-halfpast .col-1-fixed img { padding-top: 40px; } .halfpast-features-services { background: #f4f4f4; border-top: 1px solid #d9d9d9; margin: 1px 0; padding-top: 60px; } .halfpast-features-services h4 { font-size: 1.313em; font-weight: 100; padding-bottom: 30px; width: 600px; } .halfpast-features-services [class*='icon-'] { font-size: 4em; margin-left: 13px; } .halfpast-features-services img { margin: 0 0 -8px 20px; } .halfpast-features-services img.img-border { border-bottom: 1px solid #fff; } .sign-up { border-top: 1px solid #d9d9d9; padding: 100px 0; } .sign-up a.btn { margin: 0 0 -6px 30px; } /* footer */ footer { background: #000; color: #fff; padding: 15px 0 30px; } footer { color: #fff; } footer a:hover { color: #ccc; } footer ul { padding-left: 0px; } footer ul li { font-size: 0.875em; } footer .col-1-3-fixed.footer-nav p { margin-bottom: 0px; } footer form input { margin-right: 5px; } footer .col-1-fixed { padding-top: 45px; } footer .col-1-fixed img { opacity: 0.4; } footer .col-1-fixed img:hover { opacity: 0.7; } i appreciate , on this. it's such small, simple thing, it's driving me absolutely crazy. helps me tackle this.
the .container div holds columns set 80% of width of page, fixed width elements inside wrap when parent container's computed width becomes narrow. max-width doesn't if computed width smaller 1080 - define width of .container fixed, on smaller views can horizontal scroll.
also, browse @ browser width of 1280, consider doing little bit of refactoring lessen whitespace, in view top link bar wraps around , breaks.
Comments
Post a Comment