CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jtbitt
jtbitt

Reputation: 581

How can I overlap an element in the middle of 2 different columns?

I'm making a homepage right now, with a colored background as my section background, a background image as my 'about-left' div, which is located on the left half of this section, and content info on the right side of this same section. I made 6 width columns for each one of these, and that is working fine responsively.

I have a logo (.about-page-logo) that I want to put directly in the middle of the page, over the seam of where the 2 columns meet, and some writing that I want to put at the top of the page (.about-page-title), also going over the spot where the 2 columns meet. Also the page down arrow needs to run across the middle seam (.page-down-arrow). How do I go about doing that?

<section id="about">    

  <div class="container-fluid">

    <div class="about-page-title">
      Anything that is seemingly impossible interests me.
    </div>

    <div class="about-page-logo">
      logo
    </div>

    <div class="page-down-arrow">
    </div>

    <div class="row">
      <div class="about-left col-lg-6">
      </div>

      <div class="about-content col-lg-6">
        <div class="about-content-title">
          <h1>I'M JAY.</h1>
        </div>

        <div class="about-content-info">
          <p>Loren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsum
          <br /><br />

          Loren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsum
          </p>
        </div>

        <div class="about-personal-info">
          <h4>Email:</h4>
          <h4>LinkedIn:</h4>
          <h4>GitHub:</h4>
          <h4>Angel List:</h4>
        </div>

      </div>
    </div>
  </div>
</section>

Upvotes: 1

Views: 108

Answers (1)

Roi
Roi

Reputation: 565

Check out this simple raw example I made, I hope this could give you an idea.

HTML Markup

<div class="wrapper">
    <div class="logo">LOGO</div>
    <div class="left">
        THIS IS LEFT
    </div>
    <div class="right">
        THIS IS RIGHT
    </div>
</div>

CSS

body, html {
    height: 100%;
}
.wrapper {
    position: relative;
    height: 100%;
}
.left, .right {
    float: left;
    width: 50%;
    text-align: center;
    height: 100%;
}
.left { background-color: yellowgreen; }
.right { background-color: olive; }
.logo {
height: 100px;
width: 100px;
background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
}

JSFIDDLE

Upvotes: 1

Related Questions