CODEWITHSUNDEEP
htmlcss
toast
toast

Reputation: 670

Absolutely positioned image div overflowing content to its left

Here's the fiddle: http://jsfiddle.net/uyU5L/3/

I have a container (original size is 940px) div that's contained inside the body.

<div class="wrapper">
<div class="container">

    <div class="div-content">
    </div>

</div>
 <div class="image-content">
           <img src=""/>
     </div>
</div>

My problem is that I need that image div to be contained against the side of the window. Be positioned absolute right to the body.

When you resize, you'll the see the image go over the content. I want the image to take that content div into consideration and push the text left, not go over it. Am I going about this the wrong way?

Upvotes: 0

Views: 84

Answers (3)

myajouri
myajouri

Reputation: 3114

Try this: http://jsfiddle.net/myajouri/uyU5L/5/

.container {
    max-width: 340px;
    margin: 0 auto;
    position: relative;
    padding: 0 100px;
}
.div-content {
    padding: 40px 15px;
    background: #ccc;
}
.image-content {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.image-content img {
    width: 100px;
    height: 100%;
}

Upvotes: 1

Phill M
Phill M

Reputation: 31

  1. Use two divs one(let's call "content-wrapper") for holding content and another(image-wrapper) for holding div of image
  2. for first put float:left , for second float:right
  3. give proper width to both
  4. ur done

Upvotes: 0

Krzysztof
Krzysztof

Reputation: 16130

You can use CSS media query:

@media screen and (max-width: 560px) {
    .container {
        margin: 0 100px 0 auto;
    }
}

Fiddle: http://jsfiddle.net/yKQFG/

Upvotes: 0

Related Questions