Push Div Next To Centered And Responsive Bootstrap Container Element

There is a centered and responsive Bootstrap container with content in it. I want to push a div next to the container (right side, same top position as container) without affecting

Solution 1:

Are you ok with it not being visible when the window is too small for the container?

If you just want it to be outside the container to the top right, you can use some relative/absolute positioning and move the "outer" div inside the main container.

.main-content {
  border: 1px solid red;
  position:relative;
}

.outer {
  border: 1px solid red;
  background: yellow;
  position:absolute;
  right:-70px;
  top:0px;
  text-align: center;
  width: 70px;
}

https://jsfiddle.net/8ahrxtsk/4/

If you want it inside the container, just change the "right" position to 0px.

Solution 2:

Is this the behavior that you are looking for?

.main-content {
  border: 1px solid red;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- Latest compiled and minified CSS --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"><!-- Optional theme --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"crossorigin="anonymous"><!-- Latest compiled and minified JavaScript --><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script><divclass="container main-content"><divclass="row"><divclass="col-md-6">
      Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content...
    </div><divclass="col-md-6">
      Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content...
    </div></div></div><divclass="container"><divclass="row"><divclass="col-md-12 text-right">
      Outer
    </div></div></div>

Or this:

.main-content {
  border: 1px solid red;
  position: relative;
}
.outer {
  border: 1px solid red;
  background: yellow;
  text-align: center;
  position: absolute;
  width: 100px;
  top: 0;
  right: -100px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- Latest compiled and minified CSS --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"><!-- Optional theme --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"crossorigin="anonymous"><!-- Latest compiled and minified JavaScript --><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script><divclass="container main-content"><divclass="outer">
    Outer
  </div><divclass="row"><divclass="col-md-6">
      Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content...
    </div><divclass="col-md-6">
      Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content...
    </div></div></div>