margin / padding not working

Question

I have 2 main divs within a main div. I've tried adding margin and padding with a large number to test, but it just work work. Why can't I add margin / padding between them? Please help.

HTML

 <div id="mainWrapper">
    
    <header class="container">
    
        <div id="nav2" class="container">
            <ul class="nav2a">
                <li><a href="#">Login</a></li>
                <li><a href="#">Quick Search</a></li>
                <li><a href="#">Advanced Search</a></li>
                <li><a href="#">English <i class="fa fa-caret-down"></i></p></a>
                    <ul class="nav2b">
                        <li><a href="#">French</a></li>
                        <li><a href="#">Italian</a></li>
                        <li><a href="#">Spanish</a></li>
                        <li><a href="#">German</a></li>
                    </ul>
                </li>
            </ul>
        </div> <!-- end nav2 -->
        
    </header>
    
    <div class="clearfloat"></div>

   <div id="fullNav" class="container">
            
        <div id="logoSymbol">
            <a href="#">
                <img src="images/gpj-baker-symbol.png" width="54" height="51" />
            </a>
        </div>
        
        <div id="logoText">
            <a href="#">
                <img src="images/gpj-baker-text.png" width="200" height="30" />
            </a>
       </div>

        <div class="clearfloat"></div>

        <div id="mainNav">
             <ul class="nav1a">
                 <li><a href="#">Brands</a></li>
                 <li><a href="#">Fabrics & Wallcoverings</a></li>
                 <li><a href="#">Contact</a></li>
                 <li><a href="#">About Us</a></li>
                 <li><a href="#">Where To Buy</a></li>
                 <li><a href="#">Press</a></li>
            </ul>
        </div>
        
        <div class="clearfloat"></div>

        <div class="hr"><hr/></div>
        
        <div class="clearfloat"></div>

    </div> <!-- end fullNav -->
                                    
    <div class="clearfloat"></div>

    <div id="brandContainer" class="container">
       
        <div id="breadcrumbs" class="container">
            <ul class="breadInfo">
                <li><a href="#">Home</a></li>
                <li><a href="brands.html" class="currentPg">Brands</a></li>
            </ul>
        </div> <!-- end breadIcrumbs -->
                                    
        <div class="clearfloat"></div>

        <div class="brandList">
        
            <div class="brandImg">
                <a href="#"><img src="http://placehold.it/442x294" /></a>
            </div>
            
            <div class="brandCopy">
                <a href="#">
                    <img src="images/gpj-baker-text.png" width="162" height="25" />
                </a>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui ex, pharetra a commodo maximus, luctus id ligula. Curabitur tempus arcu ac orci fringilla varius.</p>
                
                <p>Cras hendrerit, mi interdum varius luctus, nisl lectus accumsan mauris, eu tristique arcu massa et arcu. Vivamus venenatis purus blandit, placerat urna eget, faucibus mauris.</p>
                <a href="#">Explore <i class="fa fa-caret-right"></i></a>
          </div>
            
        </div> <!-- end brandList -->

        <div class="clearfloat"></div>

        <div class="brandList">
        
            <div class="brandImg">
                <a href="#"><img src="http://placehold.it/442x294" /></a>
            </div>
            
            <div class="brandCopy">
                <a href="#">
                    <img src="images/gpj-baker-text.png" width="162" height="25" />
                </a>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui ex, pharetra a commodo maximus, luctus id ligula. Curabitur tempus arcu ac orci fringilla varius.</p>
                
                <p>Cras hendrerit, mi interdum varius luctus, nisl lectus accumsan mauris, eu tristique arcu massa et arcu. Vivamus venenatis purus blandit, placerat urna eget, faucibus mauris.</p>
                <a href="#">Explore <i class="fa fa-caret-right"></i></a>
          </div>
            
        </div> <!-- end brandList -->
        
    </div><!-- end brandContainer -->

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;
vertical-align: baseline;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} table {border-collapse: collapse; border-spacing: 0;}

body {
    font-size: 16px;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p, a {
    font-family: "Lato", Helvetica, Arial, sans-serif;
}

.clearfloat {
    clear: both;
}

#mainWrapper {
    margin: 0 auto;
    max-width: 1280px;
    vertical-align: middle;
    width: 100%;
}

.container {
    margin: 0 auto;
    max-width: 980px;
    vertical-align: middle;
    width: 100%;
}

header .container {
    display: block;
    float: right;
}

header #nav {
    float: right;
}

div.hr {
    border: 0.01em solid #676767;
}

#nav2 {
    float: right;
    font-size: 12px;
    font-weight: 400;
    margin: 0 auto;
    padding: 5px 0;
    text-transform: uppercase;
}

    #nav2 a:link,
    #nav2 a:visited {
        color: #676767;
    }
    
    #nav2 a:hover {
        color: #4284b8;
    }

    #nav2 li {
        vertical-align: middle;
        float:left;
    }

    #nav2 li,
    #nav2 li a {
        display: inline-block;
        text-decoration: none;
    }
    
    #nav2 li a {
        padding: 5px 10px;
    }

    #nav2 li ul {
        display: none;
        position: absolute;
    }
    
    #nav2 li:hover ul {
        display: block;
    }
    
    #nav2 li ul li {
        clear: both;    
    }
    
    #nav2 .nav2a {
        float: right;
    }

#fullNav {
    text-align: center;
}

    #fullNav #logoSymbol,
    #fullNav #logoText {
        display: inline;
        margin: 0 auto;
        padding: 0 5px;
    }
    
#mainNav {
    font-size: 12px;
    font-weight: 400;
    margin: 0 auto;
    padding: 5px 0;
    text-transform: uppercase;
}

    #mainNav a:link,
    #mainNav a:visited {
        color: #676767;
    }
    
    #mainNav a:hover {
        color: #4284b8;
    }

    #mainNav li {
        vertical-align: middle;
    }

    #mainNav li,
    #mainNav li a {
        display: inline-block;
        text-decoration: none;
    }
    
    #mainNav li a {
        padding: 5px 25px;
    }
        
    #mainNav li ul {
        display: none;
        position: absolute;
    }
    
    #mainNav li:hover ul {
        display: block;
    }
    
    #mainNav li ul li {
        clear: both;    
    }

#footerNav {
    float: right;
    font-size: 12px;
    font-weight: 400;
    margin: 0 auto;
    padding: 5px 0;
    text-transform: uppercase;
}

    #footerNav a:link,
    #footerNav a:visited {
        color: #676767;
    }
    
    #footerNav a:hover {
        color: #6e8878;
    }

    #footerNav li {
        vertical-align: middle;
        float:left;
    }

    #footerNav li,
    #footerNav li a {
        display: inline-block;
        text-decoration: none;
    }
    
    #footerNav li a {
        padding: 5px 10px;
    }
        
    #footerNav li ul {
        display: none;
        position: absolute;
    }
    
    #footerNav li:hover ul {
        display: block;
    }
    
#nav3b {
    display: none;
    clear: both;    
}

#nav3b a:hover {
    display: block;
}
    
    #footerNav .nav3a {
        float: right;
    }

#breadcrumbs {
    float: right;
    font-size: 9px;
    font-weight: 400;
    margin: 0 auto;
    text-transform: uppercase;
}

    #breadcrumbs .currentPg {
        color: #676767;
        font-weight:bold;
    }

    #breadcrumbs a:link,
    #breadcrumbs a:visited {
        color: #8b8b8b;
    }
    
    #breadcrumbs a:hover {
        color: #4284b8;
    }

    #breadcrumbs li {
        vertical-align: middle;
        float:left;
    }
        
        #breadcrumbs li {
            padding: 0 .25em 0 0;
        }
        
        #breadcrumbs li:after {
            content: " | ";
            display: inline-block;
            font-size: 100%;
            margin: 0 0 0 1.25em;
        }
        
        #breadcrumbs li:last-child:after {
            content: " ";
        }
        
        #breadcrumbs li,
        #breadcrumbs li a {
            display: inline-block;
            text-decoration: none;
        }
        
        #breadcrumbs li a {
            padding: 5px 10px;
        }
    
        #breadcrumbs li a:last-child {
            padding-right: 0;
        }
        
    #breadcrumbs .breadInfo {
        float: right;
        padding-bottom: 5px;
    }

.brandList {
    display: inline;
    overflow: auto;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

.brandImg {
    display: block;
    float: left;
    margin: 0 auto;
    max-width: 442px;
    padding-right: 8px;
    vertical-align: middle;
    width: 50%;
}

.brandCopy {
    display: block;
    float: left;
    font-size: 12px;
    font-weight: 400;
    margin: 0 auto;
    overflow: hidden;
    padding-left: 8px;
    position: relative;
    text-transform: uppercase;
    vertical-align: middle;
    width: 50%;
}

    .brandCopy p {
        display: block;
        font-size: 16px;
        text-transform: none;
        line-height: 150%;
    }

    .brandCopy .currentPg {
        color: #676767;
        font-weight:bold;
    }

    .brandCopy a:link,
    .brandCopy a:visited {
        color: #4284b8;
        font-weight: bold;
        text-decoration: none;
    }
    
    .brandCopy a:hover {
        color: #959595;
    }
    
    .brandCopy .breadInfo {
        float: right;
        padding-bottom: 5px;
    }

    .brandCopy a img {
        margin: 0 auto;
        margin-bottom: 16px;
        max-width: 442px;
        text-align: center;
    }

    .brandCopy p {
        margin-bottom: 16px;
        overflow: auto;
        text-align: left;
    }

EDIT: Full CSS added.

boszlo · Accepted Answer

OK, so I think you've tried to add margin and padding to .brandList div which has display: inline property. Change it to display: inline-block and margins and paddings should work. (check: http://tympanus.net/codrops/css_reference/display/).

Biswajit · Answer

margin doesn't work on an inline HTML element. If you want to apply margin on an inline element then you must convert the target element into block level element by applying display: inline-block property.

margin / padding not working

Tags:

css

padding

margin

HTML

Tantalizea Lacaden

2 Answers

boszlo

Biswajit

Recent Activity

Donate For Us

margin / padding not working

Tags:

css

padding

margin

HTML

Tantalizea Lacaden

2 Answers

boszlo

Biswajit

Related questions

Recent Activity

Donate For Us