CODEWITHSUNDEEP
htmlcss
AlexP2014
AlexP2014

Reputation: 211

Relative positioning not working correctly CSS

so I'm trying to position my content box and its working fine for left, but when I try change the right value it doesn't allow. As you can see I have four images, but I want to show three, so therefore I'm trying to increase the right value so the box can only fit three (and also bring it in to the center a bit more)

I can get it to work by changing it to padding-right instead of right, but I don't understand why that works? My understanding is that : Padding = Distance between the content and the border, and right = how far from the edge?

Image: enter image description here This is my content box code (the images are inside it in another box)

.imagesArea {
    position:relative;
    top:15px;
    left:100px;
    padding-right:180px;


}

Thanks

edit: html (removed some of the image code)

<div class="imagesArea">

<div class="images">
    <figure>
        <a href="photos/image1.jpg"><img src="photos/image1.jpg" alt=”Photo” width=150 height=150></a>
    <figcaption>Watch #1</figcaption>
    </figure>
    </div>

<div class="images">
    <figure>
        <a href="photos/image2.jpg"><img src="photos/image2.jpg" alt=”Photo” width=150 height=150></a>
    <figcaption>Watch #2</figcaption>
    </figure>

</div>

<div class="images">
    <figure>
       <a href="photos/image3.jpg"><img src="photos/image3.jpg" alt="Photo" width="150" height="150"></a>
        <figcaption>watch #3</figcaption>
    </figure>
</div>
</div>

Upvotes: 1

Views: 97

Answers (2)

Quentin
Quentin

Reputation: 943100

Your understanding of relative positioning is completely wrong. It sounds like you are confusing it with margins.

With relative positioning, the element is sized and positioned according to normal flow (i.e. as if it was statically positioned), and then the whole box is offset according to left/right/etc. This can cause it to overlap with other elements.

See this example for a visual representation.

It won't adjust the size of the box at all, so it will have no influence over how much content it can hold.

If you want to control how wide the element is, use width, padding, border and/or margin.

Upvotes: 2

Hassan
Hassan

Reputation: 251

You can use margin for inner content div images

.images{
    display: inline-block;
    margin:0 20px 0 20px;
}

and set parent div 

.imagesArea {
    position:relative;
    top:15px;
    left:100px;
    padding-right:180px;
    text_align:center;
}

As you want to show 3 images in a row, It will work for you.

Upvotes: 1

Related Questions