CODEWITHSUNDEEP
htmlcss
user4752928
user4752928

Reputation:

Position div inside div in top-right-corner and not use position:absolute

I want to position a DIV in the top-right-corner inside a DIV (inside the blue area). I used position:absolute to illustrate, but the solution CAN NOT have position:absolute for the "tag" DIV because I use Masonry and this adds position:absolute to my grid items and when I use it also the layout upon load or re-fresh of page gets messed up for a few seconds. Is it possible to achieve my objective? Again, I cannot implement position:absolute for .tag.

Fiddle: Fiddle

HTML:

<div class="article">
    <article class="box">
        <div class="masonry_item_inner">
            <div class="blogpost">
                <img src="http://placehold.it/350x150">
            </div>
            <div class="tag">MY TAG HERE</div>
                <div class="title">BIG Headline</div>
                <div class="summary">This is about This is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is about</div>
        </div>
    </article>
</div>

CSS:

.tag {
    top: 0px;
    right: 0px;
    min-height: 0px;
}

.tag {
    font-size:14px;
    font-family:'Droid Serif';
    text-align:center;
    color:#FFF;
    margin-left:15px;
    padding:6px;
    background-color:red;
    float:right;
    z-index:3;
    display:block;
    position:absolute;
}

.box {
    width: 400px;
    padding: 40px;
    background-color:blue;
}

.title {
    color:green;
    background-color:white;
    font-style:40px;
    font-weight:bold;
}

Upvotes: 4

Views: 4439

Answers (3)

Maheshvirus
Maheshvirus

Reputation: 7543

check this code..its working Fiddle Here- http://jsfiddle.net/hf1db9go/10/

HTML

<div class="article">
    <article class="box">
        <div class="tag">MY TAG HERE</div>
       
        <div class="masonry_item_inner">
            <div class="blogpost">
                <img src="http://placehold.it/350x150">
            </div>
           
            <div class="title">BIG Headline</div>
            <div class="summary">This is about This is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is about</div>
        </div>
    </article>
</div>

CSS

.masonry_item_inner{
     position:relative;
     float:left;
     left:30px;
}
 .tag {
     top: 0px;
     right: 0px;
     min-height: 0px;
}
 .tag {
     font-size:14px;
     font-family:'Droid Serif';
     text-align:center;
     color:#FFF;
     margin-left:15px;
     padding:6px;
     background-color:red;
     float:right;
     z-index:3;
     display:block;
     position:relative;
}
 .box {
     width: 400px;
     background-color:blue;
     display:inline-block;
     position:absolute;
}
 .title {
     color:green;
     background-color:white;
     font-size:40px;
     font-weight:bold;
}

Upvotes: 3

Sachink
Sachink

Reputation: 1530

For using margin you can fixed it.

Fiddle

.tag {
    top: 0px;
    right: 0px;
    min-height: 0px;
}

.tag {
    font-size:14px;
    font-family:'Droid Serif';
    text-align:center;
    color:#FFF;
    margin-left:15px;
    padding:6px;
    background-color:red;
    float:right;
    z-index:3;
    display:block;
    margin-top: -194px;
    margin-right: -40px;
  /*  position:absolute; */
}

.box {
    width: 400px;
    padding: 40px;
    background-color:blue;
}

.title {
    color:green;
    background-color:white;
    font-style:40px;
    font-weight:bold;
}
<div class="article">
    <article class="box">
        <div class="masonry_item_inner">
            <div class="blogpost">
                <img src="http://placehold.it/350x150">
            </div>
            <div class="tag">MY TAG HERE</div>
                <div class="title">BIG Headline</div>
                <div class="summary">This is about This is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is about</div>
        </div>
    </article>
</div>

This will well only if the .box height and width are fixed.

Upvotes: 0

Ahmed
Ahmed

Reputation: 525

Check this fiddle.

I placed .tag before .masonry_item_inner and edited .box {padding: 0px 0px 40px 40px;} for the bottom, and left padding, and gave .masonry_item_inner {padding: 40px 40px 0px 0px;} for the top and right padding.

Upvotes: 0

Related Questions