Centering the middle of the three sections and positioning the other two relative to the middle

Question

Sorry if the title is confusing. I mainly work on a tumblr theme where I need three contiguous divs wrapped in a fixed-width container. None of their contents are fixed, so they all have a variable width. The middle div should always be centered in the container, while the divs on the left and right will always touch the middle div and thus move as the average width of the div changes (there may be images on the left and right, so text-align does not always work) . In addition, I may also need to hide the left, right, or both left and right divs.

Here is a conceptual image:

I can easily get this with flexboxes ( JFiddle ), but flex only has 86% global support .

This is the closest I could get without using flexboxes, but I can't get this middle div (with text) centered on the div header, while preserving the relative positions of the two images on both sides: JFiddle

* { height: 100%; position: relative; } body { height: 200px; } /* just to get rid of scrollbar */ p { margin: 0; } .title { background: #aaa; height: 22px; width: 450px; /* for example */ margin: 0 auto; } .container { background: #abc; float: left; } .lr { transform: translate(0, -100%); } .left { background: green; float: left; } .left img { transform: translate(-100%); } .center { background: red; display: inline-block; z-index: 2; } .right { background: blue; float: right; } .right img { transform: translate(100%); } .left img, .right img { height: 100%; } <div class="title"> <div class="container"> <div class="center">CENTERCENTERCENTERCEN</div> <div class="lr"> <div class="left"> <img src="http://i.imgur.com/7bvErJN.jpg" /> </div> <div class="right"> <img src="http://i.imgur.com/q8Mq0YZ.jpg" /> </div> </div> </div> </div> 

Other people mentioned an attempt to display the title in a table, but for this it would be necessary to center the middle cell on the entire row, and the cells on the left and right to occupy the rest of the space, and I'm not sure if you can do this when their width is not fixed.

Does anyone know of any other solutions?

Answer 1

If you can change your HTML, apply this:

• First move the left and right elements inside the center:

   <div class="center"> CENTERCENTERCENTERCEN <div class="left"> testtest<img src="http://i.imgur.com/7bvErJN.jpg" /> </div> <div class="right"> <img src="http://i.imgur.com/q8Mq0YZ.jpg" /> </div> </div> 

• Then on CSS:

   /*Keep the center container on the middle*/ .title { text-align:center; } .center { position:relative; display:inline-block; } /*Position elements based on the relative center parent*/ .left { position:absolute; top:0;left:0; transform:translateX(-100%) } .right { position:absolute; top:0;right:0; transform:translateX(100%) } 

Check DemoFiddle

Answer 2

Using position: absolute should help with this.

I modified your HTML as follows:

 <div class="title"> <div class="container"> <img class="left" src="http://i.imgur.com/7bvErJN.jpg" /> <div class="center">CENTERCENTERCENTERCEN</div> <img class="right" src="http://i.imgur.com/q8Mq0YZ.jpg" /> </div> </div> 

CSS

 .title { background: #aaa; height: 22px; width: 450px; /* for example */ margin: 0 auto; text-align: center; } .container { background: #abc; display: inline-block; margin: 0 auto; position: relative; text-align: left; } .center { background: red; } .left, .right { position: absolute; top: 0px; } .left { right: 100%; } .right { left: 100%; } 

Working script

Answer 3

Updated to show OP update

No need to use flex here, why not just use percentages? Float all containers and place percentages relative to the sizes you want. (50% for medium, 25% for external containers).

You can use outer containers as wrappers so that you can still use the border in inner containers without breaking the size. Then just float the inner containers inside the outer containers (if that makes sense). The example below simply moves the internal p tags to external containers.

This allows you to always hug the inner container, while maintaining relative dimensions, as well as maintaining the middle center.

Example below:

Fiddle

HTML

 <div class="container"> <div class="flexa"> <div class="left"> <p>leftleft</p> </div> <div class="center"><p>CENTERCENTdsfdfdERCENTsdfdfsfERCEN</p></div> <div class="right"> <p>ri</p> </div> </div> <div class="bottom">BOTTOMOMOM</div> </div> 

CSS

 * { margin: 0; padding: 0; } div { background: #aaaaaa; overflow: hidden; } p{ border: 1px solid black; } .container { width: 500px; /* for example */ margin: 0 auto; } .right p{ /* This is what makes it work. This could be a div with class of inner or something like that. */ float:left; } .left p{ float:right; } .flexa div{ float:left; } .left { width:25%; } .center { width: 50%; } .right { width:25%; } .bottom { display: block; margin: 0 auto; text-align: center; }