Border coverage is wider than its content after reaching 710px
As the title says, my .border
div border extends wider than inside. This only happens after reaching 710px, so you will need to expand the results window in this script .
I would like the border to stay around its content without going over it.
Tia.
.border {
border: 1px solid #006699;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;}
.m1, .m2, .m3, .m4, .m5, .m6
{background-image: url('http://www.techagesite.com/mobile-sprite.png');
background-repeat: no-repeat;
width:100px;
height:56px; overflow:hidden;
display:inline-block;
}
.m1 {background-position: 0px 0px;}
.m2 {background-position: 0px -58px;}
.m3 {background-position: 0px -116px;}
.m4 {background-position: 0px -174px;}
.m5 {background-position: 0px -232px;}
.m6 {background-position: 0px -290px;}
.d1, .d2, .d3, .d4, .d5, .d6
{background-image: url('http://www.techagesite.com/desktop-sprite.png');
background-repeat: no-repeat;
width:100px;
height:56px; overflow:hidden;
display:inline-block;
}
.d1 {background-position: 0px 0px;}
.d2 {background-position: 0px -58px;}
.d3 {background-position: 0px -122px;}
.d4 {background-position: 0px -180px;}
.d5 {background-position: 0px -238px;}
.d6 {background-position: 0px -296px;}
.tabs__item.fill > img {
background-repeat: repeat-x;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.c1, .c2, .c3, .c4
{background-image: url('http://www.techagesite.com/dock-cat-sprite.png');
background-repeat: no-repeat;
width:50px;
height:50px;
display:inline-block;
}
.c1 {background-position: 0px 0px;}
.c2 {background-position: 0px -52px;}
.c3 {background-position: 0px -104px;}
.c4 {background-position: 0px -156px;}
.c5 {background-position: 0px -208px;}
.c5{
background-image: url('http://www.techagesite.com/dock-cat-sprite.png');
background-repeat: no-repeat;
display: inline-block;
width:100%;
height:50px;
}
.container-dock {
padding: 0rem;
width: 100%;
max-width: 700px;
margin: auto;
background: #0A3D5D;
}
.cats {
width: 100%;
height: auto;}
.top_grow11{
float: left;
margin-right: 0px;
width: auto;
height: 100%;
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
@media (max-width: 990px) {
.tabs--lg {
border: 1px solid #0A3D5D;
}
.tabs--lg .tabs__content {
border-width: 0;
border-top-width: 1px;
border-color: #0A3D5D;
}
.tabs--lg .tabs__list {
background: #0A3D5D;
margin: 0;
margin-bottom: -1px;
display: inline-block;
width: 100%;
}
.tabs--lg .tabs__list .tabs__item {
overflow: hidden;
position: absolute;
height: 0;
}
.tabs--lg .tabs__list .tabs__item--active {
height: auto;
position: relative;
}
.tabs--lg .tabs__list--open .tabs__item {
position: relative;
height: auto;
}
.tabs--lg .tabs__list--open .tabs__item--active > .tabs__link:after {
content: none;
}
.tabs--lg .tabs__item {
width: 100%;
max-width: 100%;
border-right: 0;
text-align: left;
}
.tabs--lg .tabs__item--active > .tabs__link {
background-color: #0A3D5D;
color: white;
border: 0;
}
.tabs--lg .tabs__item--active > .tabs__link:hover {
color: white;
}
.tabs--lg .tabs__item--active > .tabs__link:after {
content: "";
width: 0;
height: 0;
border: .5em solid transparent;
border-top-color: #0A3D5D;
float: right;
margin-top: .75em;
}
}
@media (max-width: 1070px) {
.tabs--xl {
border: 1px solid #0A3D5D;
}
.tabs--xl .tabs__content {
border-width: 0;
border-top-width: 1px;
border-color: #0A3D5D;
}
.tabs--xl .tabs__list {
background-color: #0A3D5D;
margin: 0;
margin-bottom: -1px;
display: inline-block;
width: 100%;
}
.tabs--xl .tabs__list .tabs__item {
overflow: hidden;
position: absolute;
height: 0;
}
.tabs--xl .tabs__list .tabs__item--active {
height: auto;
position: relative;
}
.tabs--xl .tabs__list--open .tabs__item {
position: relative;
height: auto;
}
.tabs--xl .tabs__list--open .tabs__item--active > .tabs__link:after {
content: none;
}
.tabs--xl .tabs__item {
width: 100%;
max-width: 100%;
border-right: 0;
text-align: left;
}
.tabs--xl .tabs__item--active > .tabs__link {
background-color: #0A3D5D;
color: white;
border: 0;
}
.tabs--xl .tabs__item--active > .tabs__link:hover {
color: white;
}
.tabs--xl .tabs__item--active > .tabs__link:after {
content: "";
width: 0;
height: 0;
border: .5em solid transparent;
border-top-color: #0A3D5D;
float: right;
margin-top: .75em;
}
}
.tabs__list {
margin: 0;
margin-bottom: -1px;
background: #0A3D5D;
display: flex; /* Added */
}
/*
.tabs__list {
margin: 0;
margin-bottom: -1px;
background: #0A3D5D;
}*/
.tabs__item {
padding-left:1px;
margin-bottom: 0;
display: inline-block;
width: auto;
vertical-align: top;
background: #0A3D5D;
}
/*
.tabs__item {
margin-bottom: 0;
display: inline-block;
width: auto;
vertical-align: top;
background: #0A3D5D;
}*/
.tabs__item--active > .tabs__link {
border: 1px solid #0A3D5D;
background: #0A3D5D;
border-bottom: 0;
position: relative;
z-index: 3;
color: #333333;
}
.tabs__item--active > .tabs__link:hover {
color: #262626;
}
.tabs__link {
font-weight: 500;
color: #333333;
padding: .0em 0em;
line-height: 0;
display: block;
text-decoration: none;
background: #0A3D5D;
}
.tabs__link:hover {
text-decoration: underline;
}
.tabs__area {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .5s linear;
transition: opacity .5s linear;
height: 0;
background: #0A3D5D;
}
.tabs__area--active {
opacity: 1;
visibility: visible;
-webkit-transition: opacity .5s linear;
transition: opacity .5s linear;
height: auto;
background: #0A3D5D;
}
.tabs__content {
margin-bottom: 0;
background: #0A3D5D;
border: 0px solid #0A3D5D;
overflow: hidden;
position: relative;
clear: both;
padding: 0px;
padding: 0.0rem;
}
<div class="border">
<div class="container-dock">
<!-- This example will switch at a 760px width breakpoint -->
<div class="tabs tabs--md">
<ul class="tabs__list list-unstyled">
<li class="tabs__item tabs__item--active">
<a href="#tab-1" class="tabs__link">
<img class="c1"></a> </li>
<li class="tabs__item">
<a href="#tab-3" class="tabs__link">
<img class="c2"></a></li>
<li class="tabs__item">
<a href="#tab-2" class="tabs__link"><img class="c3"></a>
</li>
<li class="tabs__item">
<a href="#tab-4" class="tabs__link"><img class="c4"></a></li>
<li class="tabs__item fill">
<img class="c5">
</li>
</ul>
<div class="tabs__content">
<div id="tab-1" class="tabs__area tabs__area--active">
<div class="top_grow11">
<a href="http://www.techagesite.com/hd-wii-wallpapers-mario-kart-super-mario-galaxy-2.htm">
<img class="d1"></img>
</a>
</div>
<div class="top_grow11">
<a href="http://www.techagesite.com/free-music-wallpaper-big-music-wallpapers.htm">
<img class="d2"></img>
</a>
</div>
<div class="top_grow11">
<a href="http://www.techagesite.com/awesome-minecraft-hd-desktop-wallpapers-1080p-backgrounds-1920x1080.htm">
<img class="d3"></img>
</a>
</div>
<div class="top_grow11">
<a href="scooby-doo-wallpapers-character-backgrounds-coloring-pages-the-gang.htm">
<img class="d4"></img>
</a>
</div>
<div class="top_grow11">
<a href="free-hd-neon-colours-desktop-wallpapers-download.htm">
<img class="d5"></img>
</a>
</div>
<div class="top_grow11">
<a href="cool-hd-desktop-wallpapers-1920x1080.htm">
<img class="d6"></img>
</a></div></div>
<div id="tab-2" class="tabs__area">
<div class="top_grow11">
<a href="facebook-timeline-covers-photos-851x315.htm">
<img class="cats" src="thumbs/fb-cover_small.jpg"></img>
</a></div>
</div>
<div id="tab-3" class="tabs__area"><div class="top_grow11">
<a href="hd-minecraft-mobile-phone-wallpapers-1080x1920-steve-creeper.htm">
<img class="m1"></img></a>
</div>
<div class="top_grow11">
<a href="hd-disney-frozen-wallpapers-for-mobile-phones-1080x1920.htm">
<img class="m2"></img></a>
</div>
<div class="top_grow11">
<a href="legend-of-zelda-ocarina-of-time-mobile-phone-wallpapers.htm">
<img class="m3"></img></a>
</div>
<div class="top_grow11">
<a href="hd-super-mario-bros-world-mobile-phone-wallpapers-1080x1920.htm">
<img class="m4"></img></a>
</div>
<div class="top_grow11">
<a href="lg-g2-g3-htc-one-max-s-m8-mobile-phone-wallpapers.htm">
<img class="m5"></img></a>
</div>
<div class="top_grow11">
<a href="android-hd-mobile-phone-wallpapers-1080x1920.htm">
<img class="m6"></img></a>
</div></div><div id="tab-4" class="tabs__area">
<div class="top_grow11"><a href="twitter-headers-and-background-covers-1500x500.htm">
<img class="cats" src="thumbs/caterpillar.png"></a>
</div></div>
<div id="tab-5" class="tabs__area">
</div>
<div id="tab-6" class="tabs__area">
</div></div>
</div>
source to share
.container-dock
has a maximum width of 700px whereas it .border
is 100% ( display:block
no width means it will stretch to 100%), remove the max width from .container-dock
to make it fill .border
or add the max width to.border
I also added overflow:hidden
in .border
to keep the rounded corners round
source to share