Giedidius Giedidius - 5 months ago 11
CSS Question

How to display inline divs outside and inside container?

How can I display

div
s like this? (red line is container)

SS

I've tried making grey containers bigger
width
(example
1000%
) then moving it to left by
-950%
, but after this I couldn't display
div
s inline.

Maybe someone has ideas how could I do this?

<div class="container">
<div id="contacts" class="gmlogic-target">
<div class="contacts-wrap">
<div class="contacts-left">
<div class="contacts-text">
<div class="contacts-text-wrap-left">
<h3>Get in touch</h3>
<div>
<span>Email</span>
<span></span>
</div>
<div>
<span>Our address</span>
<span></span>
</div>
<div>
<span>Mobile phone</span>
<span></span>
</div>
<div>
<span>Call between</span>
<span></span>
</div>
</div>
</div>
</div>
<div class="contacts-social">
<a href="http://www.facebook.com"><img alt="facebook" src=""></a>
<a href="http://www.facebook.com"><img alt="facebook" src=""></a>
</div>
<div class="contacts-right">
<div class="contacts-text">
<div class="contacts-text-wrap-right">
<div>
<span>Company name</span>
<span></span>
</div>
<div>
<span>Company code</span>
<span></span>
</div>
<div>
<span>VAT code</span>
<span></span>
</div>
<div>
<span>Address</span>
<span></span>
</div>
<div>
<span>Phone</span>
<span></span>
</div>
<div>
<span>Email</span>
<span></span>
</div>
</div>
</div>
</div>
</div>
</div>




Fiddle

Answer

You can achieve this using flexbox + position with calc() using viewport units vw and %

.container {
  width: 90%; /* changed for demo */
  margin: 0 auto;
  border: red solid 1px
}
.contacts-wrap {
  min-height: 172px;
  padding: 100px 0;
  display: flex
}
.contacts-left,
.contacts-right {
  position: relative;
  background: #ccc;
  width:50%
}
.contacts-left {
  left: calc(-50vw + 50%)
}
.contacts-right {
  right: calc(-50vw + 50%)
}
<div class="container">
  <div id="contacts" class="gmlogic-target">
    <div class="contacts-wrap">
      <div class="contacts-left">
        <div class="contacts-text">
          <div class="contacts-text-wrap-left">
            <h3>Get in touch</h3>
            <div>
              <span>Email</span>
              <span></span>
            </div>
            <div>
              <span>Our address</span>
              <span></span>
            </div>
            <div>
              <span>Mobile phone</span>
              <span></span>
            </div>
            <div>
              <span>Call between</span>
              <span></span>
            </div>
          </div>
        </div>
      </div>
      <div class="contacts-social">
        <a href="http://www.facebook.com">
          <img alt="facebook" src="">
        </a>
        <a href="http://www.facebook.com">
          <img alt="facebook" src="">
        </a>
      </div>
      <div class="contacts-right">
        <div class="contacts-text">
          <div class="contacts-text-wrap-right">
            <div>
              <span>Company name</span>
              <span></span>
            </div>
            <div>
              <span>Company code</span>
              <span></span>
            </div>
            <div>
              <span>VAT code</span>
              <span></span>
            </div>
            <div>
              <span>Address</span>
              <span></span>
            </div>
            <div>
              <span>Phone</span>
              <span></span>
            </div>
            <div>
              <span>Email</span>
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Comments