10

Hi there and thanks for your help. I have a div (180px to 75px) in which I need to place 3 paragraphes and an image. Now I need to place those elements in all of the divs corners. It should look something like this -> (I'm not allowed to post pictures yet. I hope you'll understand it anyway.)

This is what the div should look like (every color is an element), but I can't seem to get the description to the right.

https://i.stack.imgur.com/wn8Q6.png

But no matter how I play around with the "display: inline-block" or the "float" I can't get it to work.

I hope someon of you can give me the answer?

<div style="width:180px; height: 75px; background-color: green;" id="achievement">
    <div>
      <p style="display: inline-block; margin: 0px" id="title">Title Title Title</p>
      <p style="margin:0px; float:right;" id="exp">500 exp</p>
    </div>
    <div>
      <img style="padding-left: 10px;" id="img"width="50" height="50" src="image.png"/>
      <p style="float:right; margin: 0px;" id="desc">Bla Bla Bla this is a description</p>
    </div>
</div>

(I use an extern css file of course. I just used the style tag to make it easier for you to understand.)

TylerH
  • 20,799
  • 66
  • 75
  • 101
Lumnezia
  • 796
  • 2
  • 9
  • 32

4 Answers4

22

Use position:relative on the parent container to establish a positioning context. Then use position:absolute on all the children to put them in the appropriate corners.

#parent {
    position:relative;
    border:3px solid blue;
    height:300px;
    width:500px;
    padding:0;
}
p {
    position:absolute;
    border:2px solid;
    margin:0;
    padding:5px;
}
p:nth-child(1) {
    border-color:green;
    top:0;
    left:0;    
}
p:nth-child(2) {
    border-color:red;
    top:0;
    right:0;
}
p:nth-child(3) {
    border-color:yellow;
    bottom:0;
    left:0;
}
p:nth-child(4) {
    border-color:pink;
    bottom:0;
    right:0;
}
<div id="parent">
    <p>First</p>
    <p>Second</p>
    <p>Third</p>
    <p>Fourth</p>
</div>

Sample implementation here

TylerH
  • 20,799
  • 66
  • 75
  • 101
Niels Keurentjes
  • 41,402
  • 9
  • 98
  • 136
  • It's also a hopelessly better implementation than depending on `text-align` so I sure hope you'll reconsider which one to implement :X – Niels Keurentjes Jun 11 '13 at 22:07
  • I'll sure take a look at that. That is AFTER I went to sleep :) – Lumnezia Jun 11 '13 at 22:07
  • 1
    @NielsKeurentjes I agree completely with you. Mine was just sort of a quick-fix ;) – Nilzone- Jun 11 '13 at 22:08
  • The main point is that this implementation is not in any way dependent on the contents of the sub-elements for positioning. The bottom elements are **always** in the corner, because your CSS **explicitly** placed them there. They cannot escape it. – Niels Keurentjes Jun 11 '13 at 22:08
  • @NielsKeurentjes Your JSFiddle looks great at first, but as soon as you write a bigger text in the fourth element. It will go over ther third element. :( – Lumnezia Jun 12 '13 at 07:25
  • Add a max-width of 50% to the elements to force linebreaks at proper position :) since the parent is fixed size every solution will have its 'drawbacks' logically. – Niels Keurentjes Jun 12 '13 at 07:55
  • I'm trying to complete the entire positions (top center / bottom center / center left etc') => but don't have much success with position: absolute. anyone have an idea how can i position the text for all the options? (9 options total). – Kosem Nov 18 '18 at 19:12
2

Use the text-align:right That did the trick for me anyway.

http://jsfiddle.net/Neaw7/

Nilzone-
  • 2,766
  • 6
  • 35
  • 71
  • Thank you for the REALLY fast answer but sadly it doesn't seem to work like that :( The Description is placed under the div even if I change the display and the float parameters. http://i.imgur.com/DLwFAIi.png – Lumnezia Jun 11 '13 at 22:00
  • I think that's just because your width is to small. Set it to something bigger. – Nilzone- Jun 11 '13 at 22:03
  • Oh... Nevermind, seems like I made a mistake adapting your answer. Works now. Thanks a lot – Lumnezia Jun 11 '13 at 22:04
0

If you are using boostrap5 you can achieve the goal using the class position-relative on the parent, and position-absolute top-0 end-0 or similar on the child, see https://getbootstrap.com/docs/5.1/utilities/position/#position-values .

If you are using boostrap4, you need to explicitely add top:0; left:0; or similar to the style of the element, since top-0 is not a class designation in bootstrap4.

am70
  • 591
  • 6
  • 8
  • this said, the answer by @niels-keurentjes is what really helped me fix the problem in boostrap4 – am70 Mar 21 '22 at 08:49
0

We can do this by making the parent tag as position relative and child div tags by positioning absolute.

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

#parent{
    position: relative;
    background-color: lightcoral;
    height: 200px;
    width: 400px;
}
#child1{
    position: absolute;
    background-color: red;
    height: 50px;
    width: 50px;
    top: 0px;
    left: 0px;
}
#child2{
    position: absolute;
    background-color: black;
    height: 50px;
    width: 50px;
    right: 0px;
    top: 0px;
}
#child3{
    position: absolute;
    background-color: yellow;
    height: 50px;
    width: 50px;
    right: 0px;
    bottom: 0px;
}
#child4{
    position: absolute;
    background-color: skyblue;
    height: 50px;
    width: 50px;
    left: 0px;
    bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Sample</title>
</head>
<body>
 <div id="parent">
    <div id="child1">
        <p>hi</p>
    </div>
    <div id="child2">
        <p>hi</p>
    </div>
    <div id="child3">
        <p>hi</p>
    </div>
    <div id="child4">
        <p>hi</p>
    </div>
 </div>
</body>
</html>
Prajwal Shinde
  • 195
  • 1
  • 6