CODEWITHSUNDEEP
htmlcss
tmighty
tmighty

Reputation: 11399

Defining absolute margin in nested div

I hope I described it correctly when I stated "nested div".

I have an image in a div like this:

content -> content-inner -> column_left

I'm unable to make the image begin at 0 px (the very left side of the screen). It seems I'm trapped in margin definition of the div.

The divs are defined like this (seen in Chrome Inspector):

enter image description here

#content {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 2;
    width: 100%;
    min-width: 280px;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0px;
    padding-bottom: 0px;
}

#content-inner {
    margin-left: 20px;
    margin-right: 20px;
    background-color: #FFF;
}

.column_left {
    position: relative;
    left: 0px;
    top: 0px;
    width: 65%;
    margin-right: 5%;
    float: left;
}

I created a new div like this:

.inlineimage 
{
float: left;
margin-left: 0px;
margin-right: 20px;
margin-bottom: 5px;
margin-top: 3px;
}

And then I assigned it to the image within the "column-left" div:

<div class="inlineimage">
    <img src="images/myimage.jpg" alt="" />
</div>

However, the image sticks to the border of the column (which is around 105 px).

How could I make the image stick to 0 px margin from the left side of the page?

Thank you.

Upvotes: 0

Views: 44

Answers (1)

t3__rry
t3__rry

Reputation: 2849

You could position your .inlineimage container to position: relative; then position the img as 

.inlineimage > img {
  position: absolute;
  left: 0;
  top: 0;
}

This way your image sticks to the top/left

Upvotes: 1

Related Questions