responsive
to occupy space

Question

How would i make it, so that .tabs__item2 occupies the remaining space to the right?

I would like it so that no matter what screen size, the .tabs__item2 fills the remaining space right up to the edge of the big blue div in its. Maybe something like width:100%.

I don't want .tabs__item2 to stack on page resize but, instead to shrink as the page is resized.

For some reason it acts as if there's a heap of padding to the right of .tabs__item2 as well.

Any ideas?

www.techagesite.com/delete3.htm

<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 src="thumbs/rsz_1rsz_1desktop.png"></a> </li>
            <li class="tabs__item">
                <a href="#tab-3" class="tabs__link">
                <img src="thumbs/rsz_1rsz_mobile.png"></a></li>
            <li class="tabs__item">
                <a href="#tab-2" class="tabs__link"><img src="thumbs/rsz_1rsz_fb.png"></a>
            </li>
            <li class="tabs__item">
                <a href="#tab-4" class="tabs__link"><img src="thumbs/rsz_1rsz_1twitter.png"></a></li>
            <li class="tabs__item2">
                <img src="thumbs/rsz_1rsz_1twitter.png"></a></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="cats" src="thumbs/super-mario-galaxy-hd-desktop-background_small1.jpg">

            </a>
        </div>

          <div class="top_grow11">
            <a href="http://www.techagesite.com/free-music-wallpaper-big-music-wallpapers.htm">
                <img class="cats" src="thumbs/neon-background-music-bars-wallpaper-1920x1200_small1.jpg">

            </a>
        </div>

          <div class="top_grow11">
            <a href="http://www.techagesite.com/awesome-minecraft-hd-desktop-wallpapers-1080p-backgrounds-1920x1080.htm">
                <img class="cats" src="thumbs/awesome-minecraft-gaming-wallpaper-1920x1080-hd-creeper_small.png">

            </a>
        </div>

          <div class="top_grow11">
            <a href="scooby-doo-wallpapers-character-backgrounds-coloring-pages-the-gang.htm">
                <img class="cats" src="thumbs/scooby-doo.jpg">

            </a>
        </div>

          <div class="top_grow11">
            <a href="free-hd-neon-colours-desktop-wallpapers-download.htm">
                <img class="cats" src="thumbs/bright-abtsract-glow-hd-wallpaper-1920x1080-hd_small1.jpg">

            </a>
        </div>

  <div class="top_grow11">
            <a href="funny-wallpaper-pics-quotes-photos-and-stuff.htm">
                <img class="cats" src="thumbs/funny-wallpaper-pics-quotes-photos-poo-1600x1200_small.jpg"></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="cats" src="thumbs/minecraft1.jpg"></a>
        </div>

        <div class="top_grow11">

                <a href="hd-disney-frozen-wallpapers-for-mobile-phones-1080x1920.htm">
                <img class="cats" src="thumbs/frozen1.jpg"></a>
        </div>

        <div class="top_grow11">

                <a href="legend-of-zelda-ocarina-of-time-mobile-phone-wallpapers.htm">
                <img class="cats" src="thumbs/zelda1.jpg"></a>
        </div>

        <div class="top_grow11">

                <a href="hd-super-mario-bros-world-mobile-phone-wallpapers-1080x1920.htm">
                <img class="cats" src="http://www.techagesite.com/thumbs/mario1.jpg"></a>
        </div>

        <div class="top_grow11">

                <a href="lg-g2-g3-htc-one-max-s-m8-mobile-phone-wallpapers.htm">
                <img class="cats" src="thumbs/lg1.jpg"></a>
        </div>

        <div class="top_grow11">

                <a href="android-hd-mobile-phone-wallpapers-1080x1920.htm">
                <img class="cats" src="thumbs/android1.jpg"></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="http://placehold.it/350x150"></a>
            </div></div>
            <div id="tab-5" class="tabs__area">

            </div>
            <div id="tab-6" class="tabs__area">

            </div></div>
    </div>

</div></div>

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

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

}

.border {  
  border: 3px solid #006699;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;}

.container-dock {
  padding: 0rem;
  width: 100%;
  max-width: 700px;
  margin: auto;
  background: #0A3D5D;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.cats {
    width: 100%;
  height: auto;}

    .top_grow11{

    float: left;
    margin-right: 0px;
    width: auto;
    height: 100%;
  }
.tabs__item2 {
  margin-bottom: 0;
  display: inline-block;
  width: auto;
  vertical-align: top;

}

Please provide html and css here too - [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) — Pete, Feb 09 '15 at 11:43
@Techagesite Please see the answers below and mark one as accepted that best solves your problem. — Rahul Desai, Feb 09 '15 at 12:25

Kagami Sascha Rosylight · Accepted Answer · 2015-02-10T03:17:53.383

1

Take a look at this example using CSS Flex Box Layout.

.flex {
  display: flex;
}
.block {
  width: 80px;
  min-width: 80px; /* Make other boxes static */
  height: 80px;
  background-color: black;
  margin: 10px;
}
.fill {
  flex: 1;
}

<div class="flex">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block fill"></div>
</div>

edited Feb 10 '15 at 03:17

answered Feb 09 '15 at 11:47

Kagami Sascha Rosylight

1,412
1
14
31

Is it possible to make it so that only the block fill div will flex and the rest remain static? – Techagesite Feb 10 '15 at 01:55
1

@Techagesite Adding `min-width` does the trick. I just added it on my example, so check it out :) – Kagami Sascha Rosylight Feb 10 '15 at 03:20
how would i incorporate this into this www.techagesite.com/delete3.htm can it be done or am i wasting my time? – Techagesite Feb 10 '15 at 06:41
@Techagesite Consider replacing `ul` with a `div` with `display: flex`. You'll want to give `flex: 1` property to your `.tabs__item2`. – Kagami Sascha Rosylight Feb 10 '15 at 06:53
cant it be done with ul? i cant change them to div as i need the ul class as well. – Techagesite Feb 10 '15 at 06:57
@Techagesite My simple test says `ul` + `li` also works. You should give `display: flex` to `ul` and `flex: 1` to `li`. – Kagami Sascha Rosylight Feb 10 '15 at 07:11
if you look at the html and css you will see things like
- .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; } etc. what do i do for them?
– Techagesite Feb 10 '15 at 07:28
im really confused here. i dont know what to edit when theres
with 2 classes and in the css theres rules that cover 3 to 5 different things

Techagesite

Feb 10 '15 at 07:37

Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/70622/discussion-between-kagami-sascha-rosylight-and-techagesite). – Kagami Sascha Rosylight Feb 10 '15 at 10:01

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

One way to fix this is to apply following styles:

ul{
  display: table;
  width: 100%;
}

li{
  display: table-cell;
  text-align: center;
}

With this CSS, you nav links will look like:

enter image description here

Source.

edited May 23 '17 at 12:05

Community

1
1

answered Feb 09 '15 at 11:44

Rahul Desai

15,242
19
83
138

thanks, but i would prefer them to be flush next to each other :) – Techagesite Feb 09 '15 at 12:36
@Techagesite Sorry, but what do you mean by `flush next to each other` ? – Rahul Desai Feb 09 '15 at 12:37
@Techagesite If you meant no space between the `
`'s then just do `text-align: center;` to the `.tabs__list`. No other style required.

Rahul Desai

Feb 09 '15 at 12:40

flush as in right next to each other with no space between. I need to make it so that .tabs__item2 fills the remaining space to the right. So the space you see between the second header image extending to the end of the blue div. The amount of space there is dependent on the screen size and i need .tabs__item2 to be responsive and expand and contract based on the amount of space. – Techagesite Feb 09 '15 at 12:50

It will look better than having empty space – Techagesite Feb 09 '15 at 12:52

1

@Techagesite In that case, use `display: flex;`. Refer to Kagami Sascha Rosylight's answer. – Rahul Desai Feb 09 '15 at 13:04

score 0 · Answer 3 · answered Feb 09 '15 at 13:04

0

the thing is, your images are very small. so they will look pixelized. but, if you want it anyhow here are the styles:-

.tabs__item
{
    width: 20%;
}

.tabs_item>a>img
{
    width:100%;
}

enter image description here

answered Feb 09 '15 at 13:04

sanjith edward

358
4
12

responsive to occupy space

3 Answers3

responsive
to occupy space