CODEWITHSUNDEEP
csshtml
mauzilla
mauzilla

Reputation: 3592

Container to overlap parent container

I have two divs inside of eachother. The one #outside has a 5px border and the second #inside has content in it. I want #inside to overlap #outside at the top and bottom so that it effectively breaks the border and appears to be 2 brackets, if that makes sense.

HTML

 <div id='outside'>
      <div id='inside'>
           <h1>Sample header</h1>
           <p>Sample copy</p>
      </div> <!-- inside -->
 </div> <!-- outside -->

CSS

 #outside {
      border: 5px solid #000;
      padding: 5px;
 }

I dont quite know how to move the #inside div over the outside div, any advice will help!

Upvotes: 3

Views: 7202

Answers (4)

Atom Hansen
Atom Hansen

Reputation: 1

Negative margins don't get processed correctly on my phone (and a couple friends'). position: absolute on the inside div and the appropriate size/padding/border works correctly on desktop, phone, and tablet across every browser I checked it in.

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Now you can used to position for this design

as like this

#outside {
      border: 5px solid #000;
      padding: 5px;
  position:relative;
 }

#inside{
background:red;
  position:absolute;
  top:-10px;
    left:10px;
  right:10px;
}

Demo1

DEMO2

Upvotes: 1

mowwwalker
mowwwalker

Reputation: 17344

http://jsbin.com/enabeb/1/edit

<div class="outer"> 
    <div class="inner"></div>
  </div>

.outer{
  height:400px;
  width:400px;
  background:#DDD;
  border:8px solid #333;
}
.inner{
  height:416px;
  margin:-8px auto 0 auto;
  width:380px;
  background:#DDD;
}

While this is what you asked for, I don't believe it's the best way to do what you're trying to do.

Upvotes: 1

Damien Overeem
Damien Overeem

Reputation: 4529

Add negative margins to inside..

Concept:

#inside {
    width:   110%;
    height:  110%;
    margin-top: -10%;
    margin-left: -10%;
}

Or make outside position: relative; and make inside position: absolute; with a top: -10px; left: -10px;

Upvotes: 1

Related Questions