Central element until it meets an obstacle

Question

There are two elements in the container: one (blue) should remain on the left, and the other (green) is centered relative to the outer red . However, if the screen is small enough, the centered container (green) cannot overlap with the container on the left (blue), it should always remain to the right of blue. Any ideas how to do this? If not with css, then maybe with js?

big screen

small screen

So far I have received:

Fiddle

<div class="red"> <div class="blue"> texttexttexttext </div> <div class="centered"> Centered Container of fixed width </div> </div> 

 .red { height: 100px; text-align: center; border: 3px solid red; position: relative; } .blue { background: blue; height: 100%; float: left; } .centered { display: inline-block; border: 1px solid green; position: absolute; left: calc(50% - 70px); width: 140px; top: 0; } 

This centers the green container, but it overlaps with blue on the smaller screen.

Edit: Added some center marks to easily see the centers.

Answer 1

This seems to be something that can be used in a page title with elements on the side and a title in the middle. So, I took a completely different and simpler approach. When the width is not very large, centering in the viewport does not look very good. Use the media query to switch between centering modes. Demo Screenshot

 #main { position: relative; overflow: hidden; text-align: center; } #center { position: absolute; display: inline-block; left: 50%; transform: translateX(-50%); } @media (max-width: 500px) { #center { position: static; transform: none; } } 

Answer 2

You can use a variation of the absolute centering method:

 .centered { position: absolute; left: 150px; /* This is the position of the collision with the obstacle */ right: 150px; /* Same value as above, in order to center */ margin: auto; /* This centers */ width: 140px; /* It needs a width */ } 

Demo

This method only works if the obstacle is on the left, and not on the right.

Consider adding min-width to the container to prevent .centered overflow.

Answer 3

Using JavaScript

 var blue = document.getElementById('blue'), red = document.getElementById('red'), centered = document.getElementById('centered'); window.onresize = function() { centered.style.left = Math.max( blue.offsetWidth, (red.clientWidth-centered.offsetWidth) / 2 ) + 'px'; } 

Demo

Answer 4

If the blue box should have a flexible width, I think the only solution is to use JavaScript.

Here's the fork of your fiddle, which changes the classes to identifiers and adds the window.onresize event:

http://jsfiddle.net/rf0zLpcs/

 window.onresize= function() { var blue= document.getElementById('blue'); var red= document.getElementById('red'); var centered= document.getElementById('centered'); blue.style.width= Math.min(150,(red.offsetWidth-centered.offsetWidth)/2)+'px'; } 

Answer 5

In accordance with best practice:

First, to create two fields, use float: left or display: inline-block to place them on the same line.

Now the second step puts all the contents in each square, and then aligns them accordingly.

Here is the updated code:

HTML

 <div class="red"> <div class="blue"></div> <div class="yellow"> <div class="green">Centered container</div> </div> </div> 

CSS

 * { box-sizing: border-box; } html, body { width:100%; height:100%; margin:0; padding:0; } .red { height: 100%; width: 100%; border: 1px solid red; } .blue { float:left; background: blue; width: 200px; height: 100%; } .yellow { float:left; border: 1px solid yellow; width: 75.5%; /* fallback if needed */ width: calc(100% - 200px); height: 100%; } .green { background-color:green; width :200px; height:200px; margin: 0 auto; } 

Here is the updated Fiddle: http://jsfiddle.net/cxbtv6z6/3/

Answer 6

Try the following:

Demo on fiddle

HTML:

 <div class="red large"> <div id="centered"> Centered container </div> <div class="blue"> </div> </div> 

CSS

 .red { height: 100px; text-align: center; max-width: 300px; min-width: 130px; border: 3px solid red; } .blue { background: blue; width: 50px; height: 100px; position: absolute; top: 11px; } #centered { position: relative; text-align: center; width: 80px; left: 40%; } 

Answer 7

Same as the previous JS solution from @Oriol, just wrapped in jQuery and launched when the window loads, so it works when the small screen starts. (See fiddle .)

 var $blue = $("#blue"); var $red = $("#red"); var $center = $("#centered"); $(window).on("load resize", function () { var minLeft = Math.max( $blue.outerWidth(), ($red.outerWidth() - $center.outerWidth()) / 2 ); $center.css("left", minLeft + "px"); }); 

Answer 8

try using

 .red { height: 100px; text-align: center; width: 300px; border: 3px solid red; position: relative; } .blue { background: blue; position: absolute; left: 0; top:0; width: 50px; height: 100%; } .centered{ margin-left: 50px; } 

updated jsfiddle

Answer 9

A possible solution may be as follows:

HTML

 <div class="red"> <div class="blue"> </div> <div> <div class="centered"> Centered Container of fixed width </div> </div> <br/> The pink and light geen background sides mark centers of the containers. These centers should align until green container meets blue container. 

CSS

 .red { height: 100px; text-align: center; border: 3px solid red; position: relative; background: linear-gradient(to right, #ffffff 50%,#ffe2e2 50%,#ffe2e2 100%); } .blue { background: blue; width: 150px; height: 100%; } .centered { display:inline-block; height: 50px; border: 3px solid green; position: absolute; left: calc(50% - 73px); width: 140px; top: 0; background: linear-gradient(to right, #ffffff 50%,#CDF2DD 50%,#CDF2DD 100%); } 

JQuery

 var width = 0; var sizeBlue = $(".blue").width(); $(window).resize(function() { var offset = $(".centered").offset(); var right = $(window).width()-sizeBlue; if (offset.left <= sizeBlue){ $(".centered").css("left",sizeBlue); width = $(window).width()-sizeBlue; } else if (right > width){ $(".centered").css("left","calc(50% - 73px)"); } }); 

Check out this jsfiddle link for how it works.

Hope this is helpful!