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

1
  • Could you upload the picture to imgur.com, and edit your post with the link? :)
    – Nilzone-
    Jun 11, 2013 at 21:48

4 Answers 4

23

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

7
  • It's also a hopelessly better implementation than depending on text-align so I sure hope you'll reconsider which one to implement :X Jun 11, 2013 at 22:07
  • I'll sure take a look at that. That is AFTER I went to sleep :)
    – Lumnezia
    Jun 11, 2013 at 22:07
  • 1
    @NielsKeurentjes I agree completely with you. Mine was just sort of a quick-fix ;)
    – Nilzone-
    Jun 11, 2013 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. Jun 11, 2013 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, 2013 at 7:25
2

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

http://jsfiddle.net/Neaw7/

3
  • 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. i.imgur.com/DLwFAIi.png
    – Lumnezia
    Jun 11, 2013 at 22:00
  • I think that's just because your width is to small. Set it to something bigger.
    – Nilzone-
    Jun 11, 2013 at 22:03
  • Oh... Nevermind, seems like I made a mistake adapting your answer. Works now. Thanks a lot
    – Lumnezia
    Jun 11, 2013 at 22:04
1

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>

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.

1
  • this said, the answer by @niels-keurentjes is what really helped me fix the problem in boostrap4 😄
    – am70
    Mar 21, 2022 at 8:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.