CODEWITHSUNDEEP
htmlcss
Troy Cosentino
Troy Cosentino

Reputation: 4778

how to make child element cover border of parent?

Here is a sort of rough picture of what I am trying to do. If it doesn't explain it well enough I can throw together a fiddle.

enter image description here

The black box is a <div> and the pink ones are also divs. What I want is for them to look sort of like tabs. So when one is active, it covers up the border of the parent giving the 'bridge' effect that is important in tabs.

I thought that I could just make the active one slightly more wide so it would cover up the border. The problem is if I have overflow-x: hidden; the wider part is 'beneath' the black outline and if I do auto or visible then it just lets it scroll.

One important thing: the pink need to have position relative.

What am I doing wrong?

EDIT: forgot to mention the most important part. The black box has overflow-y: hidden. Without it the methods below work fine, but when I add it, it goes back to how it was

Upvotes: 8

Views: 7059

Answers (4)

fje
fje

Reputation: 845

Maybe this approach will help you:

.main {text-align: right;border: 10px solid #000;}
.main > div > div {width: 100px; height: 60px; display: inline-block;background-color: red;margin: 10px 0;}
.main > .selected > div {margin-right: -10px;padding-left: 10px;}
<div class="main">
    <div class="selected"><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
</div>

Upvotes: 5

Pigueiras
Pigueiras

Reputation: 19356

If you use position: absolute instead of position: relative you can achieve that layout with overflow-y: hidden in the parent div.

You can see the result here: http://jsfiddle.net/eugip9/sqjck/

Upvotes: 0

Kenneth
Kenneth

Reputation: 28737

Since your pink divs already have position: relative, you just offset the active ones a bit to the right:

.activediv{
    left: 5px;
}

Upvotes: 1

pizza247
pizza247

Reputation: 3897

You just need to set a width on your container div, and not use overflow-x hidden;.

Here's an example: http://jsfiddle.net/YhAmh/1/

Upvotes: 4

Related Questions