CODEWITHSUNDEEP
htmlcss
pufflik
pufflik

Reputation: 97

Make element move out of container

Example HTML/CSS:

.wrapper {
  width: 100%;
}
.container {
  width: 400px;
  margin: 0 auto;
  border: 1px solid;
}
<div class="wrapper">
  <div class="container">
    <div class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi libero veritatis dolores facere, eaque aspernatur, magnam repellendus eveniet, ullam magni accusamus accusantium itaque a illo totam vitae. In, earum quos.</div>
  </div>
</div>

If there any chance to move left edge of .element to left edge of .wrapper, while its right edge stays snapped to right edge of .container. In other words, I want to override left margin of .container by adding some rules to .element. I've tried something like:

.element {
  margin-left: -100%
}

But it moved the whole element, as I expected.

Upvotes: 2

Views: 944

Answers (2)

Luca Giardina
Luca Giardina

Reputation: 518

You can set a position, but you will need javascript to calc the correct width.

.element {
    position:absolute;
    left:0;
}

JQuery

$( document ).ready(function() {
    var w = ($(".container").outerWidth()/2) + $(".container").width();
    $(".element").width(w);
});

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240928

You could position the element absolutely relative to the .wrapper, and then use calc() to determine what 50% - 200px is:

Example Here - borders added for demonstration purposes..

.wrapper {
  width: 100%;
  position: relative;
}
.container {
  width: 400px;
  height: 60px;
  margin: 0 auto;
  border: 2px solid;
}
.element {
  position: absolute;
  left: 0;
  right: calc(50% - 200px);
  border: 2px solid #f00;
}
<div class="wrapper">
  <div class="container">
    <div class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi libero veritatis dolores facere, eaque aspernatur, magnam repellendus eveniet, ullam magni accusamus accusantium itaque a illo totam vitae. In, earum quos.</div>
  </div>
</div>

Upvotes: 4

Related Questions