Question 251802 in Html Question posted in
Some basic documentation can be found here.

Html – Button going outside of container div when it should have enough space to fit inside of it?

I’m trying to make tabs at the top of a div, and I’m trying to make whichever tab has the .selected class be taller than the rest, but for some reason the selected tab is leaving the container div instead of using the space it has, which I’m pretty sure is the same height as the button including padding and margin.

CSS:

.tabContainer {
    padding: 0;
    padding-left: 10px;
    margin-bottom: 0;
    height: 35px;
}

.tab {
    border: 0;
    background: #88B7B5;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 6px;
    font-size: 15px;
    height: 30px;
    margin-top: 5px;
    margin-bottom: 0px;
}

.tab.selected {
    height: 35px;
    margin-top: 0px !important;
    transition: height 0.2s, margin-top 0.2s;
}

.tab:hover {
    background: #98cdca;
    transition: background 0.2s;
}

.tabContentsContainer { margin-top: 0; }

.tabContents {
    padding: 10px;
    background: #A7CAB1;
    border-radius: 10px;
}

HTML:

<div class="tabContainer">
    <button class="tab selected" data-tabgroup="main" data-tab="inventory">Inventory</button>
    <button class="tab" data-tabgroup="main" data-tab="location">Location</button>
    <button class="tab locked" data-tabgroup="main" data-tab="research">???</button>
    <button class="tab locked" data-tabgroup="main" data-tab="recruits">???</button>
    <button class="tab locked" data-tabgroup="main" data-tab="training">???</button>
</div>
<div class="tabContentsContainer">
    <div class="tabContents" data-tabgroup="main" data-tab="inventory">
        <h1>Inventory</h1>
    </div>
</div>

Image of the problem:
enter image description here

Tags:

3

Answers


  1. 0

    You just need to add overflow hidden in navbar div

    .tabContainer {
    padding: 0;
    padding-left: 10px;
    margin-bottom: 0;
    height: 35px;
    overflow:hidden;
}

.tab {
    border: 0;
    background: #88B7B5;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 6px;
    font-size: 15px;
    height: 30px;
    margin-top: 5px;
    margin-bottom: 0px;
}

.tab.selected {
    height: 35px;
    margin-top: 0px !important;
    transition: height 0.2s, margin-top 0.2s;
}

.tab:hover {
    background: #98cdca;
    transition: background 0.2s;
}

.tabContentsContainer { margin-top: 0; }

.tabContents {
    padding: 10px;
    background: #A7CAB1;
    border-radius: 10px;
}
    <div class="tabContainer">
    <button class="tab selected" data-tabgroup="main" data-tab="inventory">Inventory</button>
    <button class="tab" data-tabgroup="main" data-tab="location">Location</button>
    <button class="tab locked" data-tabgroup="main" data-tab="research">???</button>
    <button class="tab locked" data-tabgroup="main" data-tab="recruits">???</button>
    <button class="tab locked" data-tabgroup="main" data-tab="training">???</button>
</div>
<div class="tabContentsContainer">
    <div class="tabContents" data-tabgroup="main" data-tab="inventory">
        <h1>Inventory</h1>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    Try using flex-box or grid (if not familiar, check out some of the tutorials) it will make your coding much easier and much more responsive. Also, don’t use static units like Pixels, instead use em or rem. One of the reasons your tab is going outside of the div is because you didn’t specify the width of it, therefore it is inheriting (default).

    Login or Signup to reply.
  3. 0

    You just need to use the hover selector & transition property properly 🙂

    But first add a space between the CSS classes

    .tab .selected {
    transition: height 0.2s, ease-in-out 0.2s;
    transition: background 0.2s, ease-in-out 0.2s;
    transition: margin-top 0.2s, ease-in-out 0.2s;
}

.tab:hover {
    height: 35px;
    background: #98cdca;
    margin-top: 0px;
}

    to change the properties of the tab class on hover the transition property must be set in the original CSS selector & the attribute being transitioned in the :hover selector

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search