Moje Ime Moje Ime - 8 days ago 6
CSS Question

One fixed width centered div and 2 auto on sides

So, i have a fixed width div that should go on middle of the page, but before it& after it, i should have auto width divs that span from edge to edge of the page, like this:

<div class="left">Content goes from left edge of screen to center div</div>
<div class="center">Fixed width div that is always centered</div>
<div class="right">Content goes from center div to right edge of screen</div>


https://jsfiddle.net/hww17nzL/2/
Any suggestions how this can be done?

Answer

Use Flexbox on a container element.

.container {
  display: flex;
  justify-content: space-between;
}
.center {
  flex: 0 0 300px;
}
<div class="container">
  <div>Content goes from left edge of screen to center div</div>
  <div class="center">Fixed width div that is always centered</div>
  <div>Content goes from center div to right edge of screen</div>
</div>

Comments