CODEWITHSUNDEEP
htmlinternet-explorercsscss-float
Frank G.
Frank G.

Reputation: 1579

Three Boxes Don't Align to the Top

I have been trying to figure out why the three boxes I created with CSS will not align to the top. Especially in Internet Explorer as well. If you look you will see how the middle box and end box kind of hand below the first box.

I setup a JFiddle here: http://jsfiddle.net/pgz9Y/

HTML Code:

    <div class="wrapper margin-bot1">
    <div class="bg-3">
    <div class="indent">
    <div class="wrapper margin-bot"><img src="http://www.erglighting.com/media/wysiwyg/images/page1_img1.png" alt="" /><a href="http://www.erglighting.com/index.php/products/archilume-collection.html"><img src="http://www.erglighting.com/media/wysiwyg/images/logo_archilume.png" alt="" /></a>
    <div class="extra-wrap">&nbsp;</div>
    </div>
    <ul class="ul-1">
    <li><span style="font-family: 'trebuchet ms', geneva;">Made in USA</span></li>
    <li><span style="font-family: 'trebuchet ms', geneva;">Expert Domestic Tech Support</span></li>
    <li><span style="font-family: 'trebuchet ms', geneva;">High-end Installations</span></li>
    <li><span style="font-family: 'trebuchet ms', geneva;">Robust Features</span></li>
    </ul>
    <a class="button-1 margin-left" href="http://www.erglighting.com/index.php/products/archilume-collection.html">Click to Order Now!</a></div>
    </div>
    <div class="bg-3">
    <div class="indent">
    <div class="wrapper margin-bot"><img src="http://www.erglighting.com/media/wysiwyg/images/XLD-SLD_group_thumb.png" alt="" /><a href="http://www.erglighting.com/index.php/products/genlume-collection.html"> <img src="http://www.erglighting.com/media/wysiwyg/images/GenLume-Logo.png" alt="" /></a>
    <div class="extra-wrap">&nbsp;</div>
    </div>
    <ul class="ul-1">
    <li><span style="font-family: 'trebuchet ms', geneva;">Competitively Priced</span></li>
    <li><span style="font-family: 'trebuchet ms', geneva;">Expert Domestic Tech Support</span></li>
    <li><span style="font-family: 'trebuchet ms', geneva;">General Lighting Installations</span></li>
    <li><span style="font-family: 'trebuchet ms', geneva;">Robust Features</span></li>
    </ul>
    <a class="button-1 margin-left" href="http://www.erglighting.com/index.php/products/genlume-collection.html">Click to Order Now!</a></div>
    </div>
    <div class="bg-3">
    <div class="indent">
    <div class="wrapper margin-bot">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<a href="http://www.erglighting.com/index.php/products/duralume-collection-usa.html"><img src="http://www.erglighting.com/media/wysiwyg/images/duralume.gif" alt="" width="144" height="33" /></a>
    <div class="extra-wrap">&nbsp;</div>
    </div>
    <ul class="ul-1">
    <li><span style="font-family: 'trebuchet ms', geneva;">Made in USA</span></li>
    <li>Long-life Durability</li>
    <li><span style="font-family: 'trebuchet ms', geneva;">Custom Solutions</span></li>
    <li><span style="font-family: 'trebuchet ms', geneva;">On-site Engineers</span></li>
    </ul>
    <a class="button-1 margin-left" href="http://www.erglighting.com/index.php/products/duralume-collection-usa.html">Click to Order Now!</a></div>
    </div>
    </div>

CSS 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; height:50px;}
    .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-table;
            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;

        }

    .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>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;
    }

Can someone please tell me what I am doing wrong and why the box wont line up to the top?

Upvotes: 0

Views: 94

Answers (2)

user2997761
user2997761

Reputation:

Add:

.bg3 {
    vertical-align: bottom; /* controls vertical alignment of inline elements,
                               since your container is inline-table this property
                               applies */
}

http://jsfiddle.net/pgz9Y/1/

Upvotes: 0

MattDiamant
MattDiamant

Reputation: 8771

Add vertical-align: top to your bg-3 class in your CSS

.bg-3 
    {
        overflow: visible;
        width: 33%;
        display: inline-table;
        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;
        vertical-align: top;
    }

Upvotes: 4

Related Questions