CODEWITHSUNDEEP
htmlcss
Si8
Si8

Reputation: 9225

Why is there white space in between the DIVs on certain screen size

I have the following code:

<div class="mobileTabsNavSub brClear">
    <div class="mbBtnLeftMW mbBtnLeftStyle floatLeft">
    </div>
    <div class="mbBtnRightMW mbBtnRightStyle floatRight">
    </div>
    <div class="mBtnMidMW mBtnMidStyle">
        <div>
            <img id="mbMW1" src="icon.png" class="mBtnIcon" />
        </div>
        <div>
            <a href="localhost:9090" title="services"><span id="mbMW" class="mbBtnText">Services</span></a>
        </div>
    </div>
</div>

CSS:

.mobileTabsNav
{
    display: none;
    width: 100%;
    overflow: hidden;
    margin: 10px 0 10px 0;
}
.mobileTabsNavSub
{
    width: 100%;
    padding: 0 0 10px 0;
}
.mbBtnLeftMW
{
    background: url('../theImages/mbMWLeft.png') no-repeat;
}
.mbBtnRightMW
{
    background: url('../theImages/mbMWRight.png') no-repeat;
}
.mBtnMidMW
{
    background: url('../theImages/mbMWMiddle.png');
}
.mbBtnLeftStyle
{
    min-height: 50px;
    max-height: 50px;
    width: 10px;
    background-size: contain;
}
.mbBtnRightStyle
{
    min-height: 50px;
    max-height: 50px;
    width: 10px;
    background-size: contain;
}
.mBtnMidStyle
{
    overflow: hidden;
    min-height: 50px;
    max-height: 50px;
    background-size: contain;
    margin: 0 0px 0 8px;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
}
.floatLeft
{
    float: left;
}
.floatRight
{
    float: right;
}

Output on most screen size:

enter image description here

Out on some screen size:

enter image description here

Three images:

enter image description here enter image description here enter image description here

Please help to get rid of the white space on some of those devices.

Upvotes: 0

Views: 57

Answers (1)

peppeocchi
peppeocchi

Reputation: 824

You can try adding comments to "link" the divs and remove any white space (not sure if it works in your case because of the float position)

<div class="mobileTabsNavSub brClear">
   <div class="mbBtnLeftMW mbBtnLeftStyle floatLeft"></div><!--
--><div class="mbBtnRightMW mbBtnRightStyle floatRight"></div><!--
--><div class="mBtnMidMW mBtnMidStyle">
    <div>
        <img id="mbMW1" src="icon.png" class="mBtnIcon" />
    </div>
    <div>
        <a href="localhost:9090" title="services"><span id="mbMW" class="mbBtnText">Services</span></a>
    </div>
</div>

Upvotes: 1

Related Questions