Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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.. enter image description here

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

Code:

  
text
text
text
text
text
text
text
text

Title of Container

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.
Problem courtesy of: user1718343

Solution

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 :)

Solution courtesy of: Irvin Zhan

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×