Databases
StackOverflow2013
Postsdbo
POCSS Boxes Straight across
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Boxes Straight across
    text
    copied!<p>I've been having problems getting this worked out. I have three boxes on a page and I want them to all line up stright across. But the middle one is sagging. </p> <p>You can find the site here: <a href="http://www.webstertoolbox.com/index.php" rel="nofollow">http://www.webstertoolbox.com/index.php</a></p> <p>Right below the Header images you will see the three boxes. The middle is sagging!</p> <p>The HTML Code is:</p> <pre><code> &lt;div class="wrapper margin-bot1"&gt; &lt;div class="bg-3"&gt; &lt;div class="indent"&gt; &lt;div class="wrapper margin-bot"&gt;&lt;img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt="" /&gt;&lt;a href="http://www.webstertoolbox.com/index.php/products/archilume-collection.html"&gt;&lt;img style="padding-left: 34px;" src="http://www.webstertoolbox.com/media/wysiwyg/images/logo_archilume.png" alt="" /&gt;&lt;/a&gt; &lt;div class="extra-wrap"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; &lt;ul class="ul-1"&gt; &lt;li&gt;&lt;span style="font-family: 'trebuchet ms', geneva;"&gt;Made in USA&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span style="font-family: 'trebuchet ms', geneva;"&gt;Expert Domestic Tech Support&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span style="font-family: 'trebuchet ms', geneva;"&gt;High-end installations&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span style="font-family: 'trebuchet ms', geneva;"&gt;Robust features&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;a class="button-1 margin-left" href="http://www.webstertoolbox.com/index.php/products/archilume-collection.html"&gt;Click to Order Now!&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="bg-3"&gt; &lt;div class="indent"&gt; &lt;div class="wrapper margin-bot"&gt;&lt;img src="http://www.webstertoolbox.com/media/wysiwyg/images/XLD-SLD_group_thumb.png" alt="" /&gt;&lt;a href="http://www.webstertoolbox.com/index.php/products/genlume-collection.html"&gt; &lt;img style="padding-left: 56px;" src="http://www.webstertoolbox.com/media/wysiwyg/images/GenLume-Logo.png" alt="" /&gt;&lt;/a&gt; &lt;div class="extra-wrap"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; &lt;ul class="ul-1"&gt; &lt;li&gt;&lt;span style="font-family: 'trebuchet ms', geneva;"&gt;Quick solutions&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span style="font-family: 'trebuchet ms', geneva;"&gt;Turn-key applications&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span style="font-family: 'trebuchet ms', geneva;"&gt;Certified&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span style="font-family: 'trebuchet ms', geneva;"&gt;Competitive pricing&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;a class="button-1 margin-left" href="http://www.webstertoolbox.com/index.php/products/genlume-collection.html"&gt;Click to Order Now!&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="bg-3"&gt; &lt;div class="indent"&gt; &lt;div class="wrapper margin-bot"&gt;&lt;img title="duralume new" src="http://www.webstertoolbox.com/media/wysiwyg/images/NEw.png" alt="new" width="62" height="52" /&gt;&lt;a href="http://www.webstertoolbox.com/index.php/products/duralume-collection-usa.html"&gt;&lt;img style="padding-left: 34px;" src="http://www.webstertoolbox.com/media/wysiwyg/images/duralume.gif" alt="" width="144" height="33" /&gt;&lt;/a&gt; &lt;div class="extra-wrap"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; &lt;ul class="ul-1"&gt; &lt;li&gt;&lt;span style="font-family: 'trebuchet ms', geneva;"&gt;Expert Domestic Tech Support&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span style="font-family: 'trebuchet ms', geneva;"&gt;Made in USA&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span style="font-family: 'trebuchet ms', geneva;"&gt;Custom solutions&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span style="font-family: 'trebuchet ms', geneva;"&gt;On-site Engineers&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;a class="button-1 margin-left" href="http://www.webstertoolbox.com/index.php/products/duralume-collection-usa.html"&gt;Click to Order Now!&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The CSS Code is:</p> <pre><code> @import"reset.css";@import"grid.css"; /* Global Structure---------------------------------------- */ .main { width: 950px; // Reduced this to match with the parent's width padding: 0; margin: 0 auto; position: relative; } .wrapper {width:100%; overflow:visible; position:relative;} .extra-wrap {overflow:hidden;} /*----- txt,links,lines,titles -----*/ .fleft{float:left} .fright{float:right} .alignright{text-align:right} .aligncenter{text-align:center} .alignmiddle *{vertical-align:middle} .d-in-block {display:inline-block;} .d-block {display:block;} .reg {text-transform:uppercase;} .reg2 {letter-spacing:-1px;} .reg3 {letter-spacing:-2px;} .index {z-index:99; position:relative;} .rel {position:relative;} .color1{color:#ff2100;} /********************** Content ************************/ .img-indent-l {float:left; margin:0px 12px 0px 0px;} .img-indent-2 {float:left; margin:0px 20px 0px 0px;} /*********************************boxes**********************************/ .indent {padding:27px 20px 27px 25px;} .indent1 {padding:25px 15px 15px 25px;} .indent2 {padding:24px 15px 10px 19px;} .indent-left {padding-left:0px;} .indent-bottom {padding-bottom:18px;} .indent-bottom1 {padding-bottom:8px;} .indent-right {padding-right:0px;} .indent-top {padding-top:19px;} .indent-top1 {padding-top:39px;} .margin-top { margin-top:-10px;} .margin-top1 { margin-top:-2px;} .margin-top2 { margin-top:-6px;} .margin-top3 { margin-top:-8px;} .margin-top4 { margin-top:-4px;} .margin-top5 { margin-top:7px;} .margin-bot {margin-bottom:7px;} .margin-bot1 {margin-bottom:10px;} .margin-bot2 {margin-bottom:24px;} .margin-bot3 {margin-bottom:21px;} .margin-bot4 {margin-bottom:17px;} .margin-bot5 {margin-bottom:30px;} .margin-bot6 {margin-bottom:19px;} .margin-bot7 {margin-bottom:58px;} .margin-bot8 {margin-bottom:25px;} .margin-bot9 {margin-bottom:15px;} .margin-bot10 {margin-bottom:6px;} .margin-bot11 {margin-bottom:10px;} .margin-bot12 {margin-bottom:28px;} .margin-bot13 {margin-bottom:26px;} .margin-bot14 {margin-bottom:62px;} .margin-left {margin-left:5px; margin-left: 27px;} .margin-left1 {margin-left:16px;} .margin-right {margin-right:14px;} /*********************************content*************************************/ #content { width:100%; padding:60px 0; position:relative; background:url(../images/bg-5.gif) left top repeat-x #fff; } #page1 #content {padding-top:57px;} /*********************************bg's*************************************/ .bg-1 { background:url(../images/bg-2.jpg) left top repeat-x; width:100%; border-top:6px solid #fff; height:351px; } .img { position:absolute; width:359px; height:582px; background:url(../images/page1_img.png) left top no-repeat; top:-113px; right:0; z-index:19; } .bg-2 { background:url(../images/bg-3.jpg) left top no-repeat; width:100%; height:351px; position:relative; } .bg-3 { overflow: visible; width: 33%; display: inline-block; height: 270px; background-image: url(http://www.webstertoolbox.com/skin/frontend/default/erglighting/images/bg-4.png); background-repeat: no-repeat; background-position: left top; display: block; float: left; } .floatstop:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } :first-child + html .floatstop { min-height: 1px; } * html .floatstop { height: 1%; } .bg-4 { background:url(../images/bg-6.png) left top no-repeat; height:182px; width:100%; overflow:hidden; } .bg-5 { width:88px; height:215px; position:absolute; right:0; top:-22px; background:url(../images/page2_img8.png) left top no-repeat; } .bg-6 { background:url(../images/bg-7.png) left top no-repeat; height:182px; overflow:hidden; width:100%; } .border-1 {border-bottom:1px solid #e5e5e5;} .border-2 {border-bottom:1px solid #fff;} /*********************************buttons*************************************/ .button-1 { display:inline-block; color:#fff; font-weight:bold; font-size:15px; line-height:18px; border-radius:17px; -moz-border-radius:17px; -webkit-border-radius:17px; background:url(../images/button-1-2.png) left -82px repeat-x #555; background: -webkit-linear-gradient(top, #747474, #555); /* Chrome 10+, Saf5.1+, iOS 5+ */ background: -moz-linear-gradient(top, #747474, #555); /* FF3.6 */ background: -ms-linear-gradient(top, #747474, #555); /* IE10 */ background: -o-linear-gradient(top, #747474, #555); /* Opera 11.10+ */ background: linear-gradient(top, #747474, #555); padding:7px 18px 10px 15px; } .button-1&gt;span { display:inline-block; width:17px; height:11px; margin:4px 0 0 13px; background:url(../images/button-1.png) left top no-repeat; margin-left: 27px; } .button-1:hover { background:url(../images/button-1-2.png) repeat-x left 0 #2f2f2f; background: -webkit-linear-gradient(top, #404040, #2f2f2f); /* Chrome 10+, Saf5.1+, iOS 5+ */ background: -moz-linear-gradient(top, #404040, #2f2f2f); /* FF3.6 */ background: -ms-linear-gradient(top, #404040, #2f2f2f); /* IE10 */ background: -o-linear-gradient(top, #404040, #2f2f2f); /* Opera 11.10+ */ background: linear-gradient(top, #404040, #2f2f2f); text-decoration:none; } .button-2 { display:inline-block; position:relative; font-size:13px; line-height:16px; color:#3e3e3e; padding:4px 13px 6px; border:1px solid #c9c9c9; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; background:url(../images/button-2.png) repeat-x left -88px #e2e2e2; background: -webkit-linear-gradient(top, #fefefe, #e2e2e2); /* Chrome 10+, Saf5.1+, iOS 5+ */ background: -moz-linear-gradient(top, #fefefe, #e2e2e2); /* FF3.6 */ background: -ms-linear-gradient(top, #fefefe, #e2e2e2); /* IE10 */ background: -o-linear-gradient(top, #fefefe, #e2e2e2); /* Opera 11.10+ */ background: linear-gradient(top, #fefefe, #e2e2e2); } .button-2:hover { background:url(../images/button-2.png) repeat-x left top #585858; background: -webkit-linear-gradient(top, #727272, #585858); /* Chrome 10+, Saf5.1+, iOS 5+ */ background: -moz-linear-gradient(top, #727272, #585858); /* FF3.6 */ background: -ms-linear-gradient(top, #727272, #585858); /* IE10 */ background: -o-linear-gradient(top, #727272, #585858); /* Opera 11.10+ */ background: linear-gradient(top, #727272, #585858); border-bottom-color:#585858; border-top-color:#727272; border-left-color:#6d6d6d; border-right-color:#606060; color:#fff; text-decoration:none; } .marker-1 { background:url(../images/marker-1.gif) left 3px no-repeat; padding:0 0 0 24px; } .marker-2 { background:url(../images/marker-2.gif) left 2px no-repeat; padding:0 0 0 24px; } /*********************************lists*************************************/ .ul-1 { padding-left:6px; margin-bottom:12px; } .ul-1 li { font-size:14px; line-height:17px; background:url(../images/ul-1.png) left 8px no-repeat; padding:4px 0 5px 24px; } .ul-1 li a { color:#616161; } .ul-1 li a:hover { text-decoration:underline; } .ul-2 li { font-size:13px; line-height:16px; font-weight:bold; padding:8px 0; } .ul-2 li a { color:#959595; background:url(../images/ul-2.png) left -91px no-repeat; padding-left:24px; } .ul-2 li a:hover { color:#3e3e3e; text-decoration:none; background-position:left 5px; } .ul-3 li { font-size:13px; line-height:18px; background:url(../images/ul-3.png) left 7px no-repeat; padding:4px 0 4px 30px; } .ul-3 li a { color:#959595; } .ul-3 li a:hover { text-decoration:underline; } .ul-4 li { font-size:13px; line-height:16px; color:#959595; overflow:hidden; display:block; padding:6px 0; } .ul-4 li a { color:#959595; display:block; float:left; } .ul-4 li a:hover { text-decoration:underline; } .ul-4 li span { display:block; float:right; } .ul-4 li strong { background:url(../images/ul-4.png) left 11px repeat-x; overflow:hidden; display:block; } .dl-1 dt { font-size:15px; line-height:22px; color:#2b2b2b; margin-bottom:19px; } .dl-1 dd { overflow:hidden; } .dl-1 dd span { display:block; float:left; width:80px; } /*********************************fonts*************************************/ .size-1 {font-size:24px; line-height:29px;} .size-2 {font-size:46px; line-height:56px;} .size-2r { font-size:46px; line-height:56px; color: #F00; } .size-2y { font-size:46px; line-height:56px; color: #FB040; } .size-3 {font-size:76px; line-height:92px;} .size-3b { font-size:76px; line-height:92px; color: #36F; } .size-4 {font-size:36px; line-height:44px;} .size-5 {font-size:15px; line-height:22px;} .size-6 {font-size:18px; line-height:22px;} .size-7 {font-size:32px; line-height:39px;} .size-8 {font-size:21px; line-height:26px;} .color-1 {color:#2b2b2b;} .color-2 {color:#fff;} .color-3 {color:#dedede;} .color-4 {color:#8d8d8d;} .color-5 {color:#434343;} .color-6 {color:#3e3e3e;} .color-7 {color:##3366FF;} /**************** "slideshow" ************/ #slideshow { width:700px !important; height:270px !important; overflow:hidden !important; background:none !important; } #slideshow .wrapper { padding-top:76px; background:none !important; } #slideshow strong { letter-spacing:-3px; margin-left:-2px; } .cycle_wrap { background:none !important; position:relative; } .cycle_wrap #nav a { display:block; text-indent:-9999px; width:10px; height:10px; float:left; margin-right:10px; background:url(../images/cycle.png) right top no-repeat; } .cycle_wrap #nav a.activeSlide,.cycle_wrap #nav a:hover { background-position:left top; } .cycle_wrap #nav a.activeSlide { cursor:default; } .cycle_wrap #nav { position:absolute; left:445px; top:315px; z-index:999; } </code></pre> <p>This much I know... It appears that this area seems to be the problem:</p> <pre><code> .bg-3 { overflow: visible; width: 33%; display: inline-block; height: 270px; background-image: url(http://www.webstertoolbox.com/skin/frontend/default/erglighting/images/bg-4.png); background-repeat: no-repeat; background-position: left top; display: block; float: left; } .floatstop:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } :first-child + html .floatstop { min-height: 1px; } * html .floatstop { height: 1%; } </code></pre> <p>Any suggestions why this isn't working? Thanks!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload