CODEWITHSUNDEEP
css
user7432810
user7432810

Reputation: 695

Negative margin leaves blank space

Look at the example here: https://codepen.io/agahi/pen/XErbPR

.leftDiv {
  width: 600px;
  margin: 50px;
  float: left;
  border: 2px solid green;
}

.offsetImage {
  float: left;
  width: 300px;
  position: relative;
  top: -40px;
  left: -40px
}
<div class='leftDiv'>
  <img src='https://i.guim.co.uk/img/media/de538985136b3b0fa819a7a6318427d936e9eccd/0_19_2928_1757/master/2928.jpg?w=620&q=20&auto=format&usm=12&fit=max&dpr=2&s=b76172f92da8780e2bc3354a169453f2' class='offsetImage' />The fast food chain KFC has been forced
  to temporarily close most of its UK outlets after problems with a new delivery contract led to a chicken shortage. A total of 562 KFC outlets remained shut following a weekend of disruption that peaked on Sunday night at 646 closures. KFC published
  a list of only 338 of its 900 stores that were still open on Monday night. Many were offering a limited menu and restricted opening hours. The chicken delivery problem is so severe that the company cannot say when operations will be back to normal.
  But it said it was working “flat out” to resolve the crisis. Signs on many of the closed stores said: “Sorry, we’re closed. We deliver our chickens fresh into our restaurants, but we’ve had a few hiccups with the delivery today. We wouldn’t want to
  be open without offering our full menu, but we’ll be back at the fryers as soon as we can.” KFC tried to make light of the problem, saying “the colonel is working on it” - a reference to the chain’s US founder, Colonel Sanders, whose image adorns the
  brand. In a statement it blamed the chicken shortage on a contract with delivery company DHL.
</div>

The div at the right side with red border is normal. The one on the left with green border is what I want. I want the image to have the negative top and negative left so that it looks like it has been dragged out of the div.

The problem is that the text doesn't wrap around the image on the left side.

Is there a way that text fills around the image with negative top and left?

Upvotes: 1

Views: 681

Answers (1)

Pete
Pete

Reputation: 58462

You can use negative margin instead of just top and left:

.offsetImage {
  float: left;
  width: 300px;
  position: relative;
  margin-top: -40px;   /* change to margin */
  margin-left: -40px
}

Updated Pen

Upvotes: 4

Related Questions