Removing padding/margin consistently in multiple wraps

Question

I’m trying to get the light green to be disappeared (not gone but underneath the dark green).

It’s the exact same problem as my previous post (Remove padding/margin between elements in shrink-to-fit container) but the only thing that’s different is the wrap is inside another wrap, and none of the zero margins/paddings, display inline-blocks or overflows work.

#footer-left{
 float:left;
 width:700px;
 height:200px;
 background:#CC3;
}
#footer-services-contents-wrap{
 background:#030;
 width:auto;
 height:auto;
 display:inline-block;
}
#footer-services-title-wrap{
 background:#0F0;
 width:auto;
 height:auto;
 display:inline-block;
}
.footer-wrap-left{
 width:auto;
 height:auto;
 display: inline-block;
 border-left:1px solid #ccc;
 padding-left:50px;
 padding:0;
 border:none;
 float:left;
}
ul.footer {
    list-style-type:none;
    padding: 0px;
 color:#666;
 font-weight:100;
 font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
 font-size:20px;
 margin: 10px 0 0 0;
}

.footer-wrap-right{
 width:auto;
 height:auto;
 display: inline-block;
 border-left:1px solid #ccc;
 padding-left:50px;
 padding:0 0 0 50px;
 border:none;
 float:left;
}

<div id="footer-left">

<div id="footer-services-title-wrap">
<div id="footer-services-contents-wrap">

<div class="footer-wrap-left">
<f1>text goes here</f1>
<ul class="footer">
  <li>text text</li>
  <li>text text</li>
  <li>text text</li>
</ul>
</div>

<div class="footer-wrap-right">
<f1>more text goes here</f1>
<ul class="footer">
  <li>text text</li>
  <li>text text</li>
  <li>text text</li>
</ul>
</div>

</div>
</div>

</div>

if you want the light green to be behind the olive (dark green?) then why not just have the footer-services-title-wrap to be before the footer-left? — lifejuggler, Jan 04 '17 at 22:46
because I'm going to have other content going into footer-left — user3760941, Jan 04 '17 at 22:52

score 1 · Answer 1 · answered Jan 04 '17 at 22:55

Your problem can be solved by adding float:left to #footer-services-contents-wrap

Reason why it happen:

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

https://www.w3.org/TR/CSS2/visuren.html#block-formatting

#footer-left{
 float:left;
 width:700px;
 height:200px;
 background:#CC3;
}
#footer-services-contents-wrap{
 background:#030;
 width:auto;
 height:auto;
 display:inline-block;
        float: left;
}
#footer-services-title-wrap{
 background:#0F0;
 width:auto;
 height:auto;
 display:inline-block;
}
.footer-wrap-left{
 width:auto;
 height:auto;
 display: inline-block;
 border-left:1px solid #ccc;
 padding-left:50px;
 padding:0;
 border:none;
 float:left;
}
ul.footer {
    list-style-type:none;
    padding: 0px;
 color:#666;
 font-weight:100;
 font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
 font-size:20px;
 margin: 10px 0 0 0;
}

.footer-wrap-right{
 width:auto;
 height:auto;
 display: inline-block;
 border-left:1px solid #ccc;
 padding-left:50px;
 padding:0 0 0 50px;
 border:none;
 float:left;
}

<div id="footer-left">

<div id="footer-services-title-wrap">
<div id="footer-services-contents-wrap">

<div class="footer-wrap-left">
<f1>text goes here</f1>
<ul class="footer">
  <li>text text</li>
  <li>text text</li>
  <li>text text</li>
</ul>
</div>

<div class="footer-wrap-right">
<f1>more text goes here</f1>
<ul class="footer">
  <li>text text</li>
  <li>text text</li>
  <li>text text</li>
</ul>
</div>

</div>
</div>

</div>

score 1 · Accepted Answer · answered Jan 04 '17 at 23:00

You don't need float:left when using inline-block in your footer-wrap-right and footer-wrap-left classes:

#footer-left{
 float:left;
 width:700px;
 height:200px;
 background:#CC3;
}
#footer-services-contents-wrap{
 background:#030;
 width:auto;
 height:auto;
 display:inline-block;
}
#footer-services-title-wrap{
 background:#0F0;
 width:auto;
 height:auto;
 display:inline-block;
}
.footer-wrap-left{
 width:auto;
 height:auto;
 display: inline-block;
 border-left:1px solid #ccc;
 padding-left:50px;
 padding:0;
 border:none;
}
ul.footer {
    list-style-type:none;
    padding: 0px;
 color:#666;
 font-weight:100;
 font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
 font-size:20px;
 margin: 10px 0 0 0;
}

.footer-wrap-right{
 width:auto;
 height:auto;
 display: inline-block;
 border-left:1px solid #ccc;
 padding-left:50px;
 padding:0 0 0 50px;
 border:none;
}

<div id="footer-left">

<div id="footer-services-title-wrap">
<div id="footer-services-contents-wrap">

<div class="footer-wrap-left">
<f1>text goes here</f1>
<ul class="footer">
  <li>text text</li>
  <li>text text</li>
  <li>text text</li>
</ul>
</div>

<div class="footer-wrap-right">
<f1>more text goes here</f1>
<ul class="footer">
  <li>text text</li>
  <li>text text</li>
  <li>text text</li>
</ul>
</div>

</div>
</div>

</div>

Removing padding/margin consistently in multiple wraps

2 Answers2