CSS position layer on top - margin & padding, overflow issues

Question

Edit: PROBLEM SOLVED ..

I placed the red_are div within the content_box and for height, I am getting it through jquery and then setting its position as margin-top:-(red_area HEIGHT + content_nox PADDING)px; ..

.. still if anyone has a better idea, please share..

---

I am trying to make a content container, in which I will have an icon or Text on top in the RED div (in code), the problem is the RED div overflows on the next DIV, what I want is that the "content_box" should automatically go down depending on the height of RED div. The second problem is position of RED div, currently I have set margin-bottom:-50px; but what I want is, it automatically calculates the height and position it in the middle (vertically) over the top line (border).. Below is my code and try.. thanks for your help..

Below is what I want to achieve..

Reference : http://jsfiddle.net/Dvej8/

Code:

  <div class="cb_container">
    <div class="red_area">          
       text <br />
       text <br />
       text <br />
       text <br />
       text <br />
       text <br />
       text <br />
       text <br />
    </div>
    <div class="content_box">
      <h3>Title of Container</h3>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>

Answer 1

Here is a CSS3-only solution that does not require any JQuery (tested on Chrome, Safari and Firefox) and responds to variable heights of red_area that I'd like to share.

JSFiddle Here

The main issue with a CSS-only solution is that percentage-based calculations are based on an object's height (for example, margin-top: 50% adds spacing equal to 50% of the width, never height). Another issue is that the content_box needs to recognize the height of the red_area as well, which may seem impossible without JQuery.

This solution uses two tricks to overcome these obstacles:

1. Transform's translateY() (CSS3) can move a div relative to its height.

2. Two div's positioned next to each other (without margins) appear to be a single div, even with a border (with the right adjustments)

Relevant CSS:

.content_box {
    padding:25px;
    border-right:1px SOLID #e4e4e4;
    border-bottom:1px SOLID #e4e4e4;
    border-left:1px SOLID #e4e4e4;
    border-radius:2px;
}
.red_area_container {
    border-right:1px SOLID #e4e4e4;
    border-top:1px SOLID #e4e4e4;
    border-left:1px SOLID #e4e4e4;
    height:50%;
    transform: translateY(50%);
    -ms-transform: translateY(50%);
    -webkit-transform: translateY(50%);
}
.red_area {
    display:block;
    margin:0 auto;
    text-align:center;
    background:red;
    width:50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

We wrap the red_area with a div. We then translate red_area 50% of its height upwards to center it with the top border. We then translate red_area_container 50% downwards to account for the extra space created by red_area. The result looks like one div because of how we set our borders. Try adding/removing content in red_area -- this solution handles that!

Was kinda fun thinking up of this solution :)

Answer 2

If I am correct, you want to do this:

http://jsfiddle.net/Dvej8/2/

Correct?

I removed the margin-bottom: -50px in .red_area. That was the problem. Margin: 0 auto; is enough to position it in the middle.

Edit: added padding to the top of the container and set the margin-bottom back. May I ask why you want that? I am interested. Anyhow, this is how it gets than:

http://jsfiddle.net/Dvej8/4/

Answer 3

<div class="cb_container">
    <div class="red_area">
        <ol>
            <li>
                <p>text</p>
           </li>
           <li>
               <p>text</p>
           </li>
            <li>
               <p>text</p>
           </li>
            <li>
               <p>text</p>
           </li>
            <li>
               <p>text</p>
           </li>
       </ol>
   </div>
   <div class="content_box">
       <p>More text within here blah blah</p>
   </div>
</div>

CSS:

p,h3{margin:0px;padding:2px;}
.cb_container{
    width:400px;
}
.red_area{
    background:#FF0000;
    width:70%;
    margin:auto;
    position:relative;
    top:50px;
}
.red_area>ol{
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.content_box{
    border:1px solid #CCCCCC;
    padding:50px 10px 10px 10px;
}