CODEWITHSUNDEEP
htmlcssposition
Mike
Mike

Reputation: 3024

Css position corner absolute bottom left

I am trying to add a supplementary corner to my design and one should go under the content box regardless the size of the content in that box.

As you can see there the corner fits ok for the 2nd box but not for the first.

Here is a fiddle http://jsfiddle.net/cnmWh/

HTML code here:

<div class="title_container">
        <div class="hook_bottom_left"></div>
        <div class="title ">
        <p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
    </div>


<div class="title_container">
        <div class="hook_bottom_left"></div>
        <div class="title ">
        <p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
           </div>
    </div>

CSS here:

.title_container {position: relative; min-height: 112px; padding-top: 25px; padding-bottom: 5px; display:block;}
.title { position: absolute; background:url("img/hash_light.png");  border: 1px solid #c8c8c8; padding: 15px; z-index: 10;  
  width: -moz-calc(100% - 16px);
  width: -webkit-calc(100% - 16px);
  width: -o-calc(100% - 16px);
  width: calc(100% - 16px);
  margin-top: 8px;
  margin-left: 8px;
  overflow: hidden; }

.hook_bottom_left{position: absolute; left:0; bottom:17px; border-left: 8px solid #000; border-bottom:8px solid #000; width: 40px;height: 40px;}

Upvotes: 2

Views: 7366

Answers (1)

Albzi
Albzi

Reputation: 15609

Have a look at this JsFiddle

I took away min-height, made the text position:relative; and made it bottom:0.

The min-height was going to not let the hook go to the bottom if it was smaller than 122px, which is why it 'dangled' below it when on bottom:0;.

The text was position:absolute which meant that they weren't taking up any width (causing all sorts of overlapping errors). As soon as they were position:relative, the hook could get their correct height.

JsFiddle with :before element

This one takes away 

<div class="hook_bottom_left"></div>

and instead inserts the 'hook' using :before on .title_container.

This means you no longer have to use a div for the hook, and .title_container classes will have it automatically.

Upvotes: 3

Related Questions