CSS Elements positioning using relative and absolute

Question

I am trying to position the elements using 'absolute' and 'relative' in CSS, I am also using 'padding' and 'margin' to position but my entire card elements is messed up. here is the code:

relative
absolute
margin
padding

    .side3_style {
        padding-left: 15px;
    }

    .side3-dp img {
        position: relative;
        display: inline-block;
        top: 4px;
        height: 40px;
        width: 40px;
        cursor: pointer;
        border-radius: 50px;
        margin-right: 15px;
        float: left;
    }
    .side3-info {
        display: inline-block;
        top: 4px;
    }

    .side3-name {
        font-family: 'Open Sans', Sans-serif;
        font-size: 14px;
        color: #3b3b3b;
        font-weight: bold;
        cursor: pointer;
    }

    .user3-time {
        font-family: 'Open Sans', Sans-serif;
        font-size: 10px;
        color: #9D9D9D;
    }

Screenshot

Create fiddle using https://jsfiddle.net/ and put your html and css code. — Avinash Dalvi, Apr 04 '20 at 12:03
@aviboy2006 NEVER ask someone to do that! Code is to be presented, here, within the question, and not any third party site. [ask] — Rob, Apr 04 '20 at 12:16

score 0 · Answer 1 · answered Apr 04 '20 at 12:10

0

Generally speaking you have a root div 'A' where you set position: relative and then inside this div you place another div 'B' with position absolute.

<div id="A" style="position: relative"><div id="B" style="position: absolute; top: 100px;left:100px;"></div></div>

If you check the above code, you will see that div B will be placed ^ 100px top distance from div A, and < 100px left distance from div A wherever div A exists.

Moreover you have to be carefull if you use float css attribute because you cannot then position based on parent elements easily.

I hope this helps

answered Apr 04 '20 at 12:10

batspy

385
5
7

1

thank you Man! this is nice, I will position again the elements using padding, nice! – Patrick Apr 04 '20 at 12:18
@Patrick if you like the answer you can vote it up – batspy Apr 08 '20 at 18:16

CSS Elements positioning using relative and absolute

1 Answers1