user76 user76 - 1 month ago 8
CSS Question

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 the centered container.

The problem is, when i add
float: left
to the container and
float: right
to the outer div, the container is not centered anymore. Only
float: right
to the outer div pushes the div only to the right side, but how to go on after?

I think
position: absolute
with fixed
width
is no option because the responsive
container
will change its
width
with different viewports.

Is there a chance to fix this only with HTML and CSS without JavaScript?



.main-content {
border: 1px solid red;
}
.outer {
border: 1px solid red;
background: yellow;
text-align: center;
float: right;
width: 70px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="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 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container main-content">
<div class="row">
<div class="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 class="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>

<div class="outer">
Outer
</div>




Answer

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.