CODEWITHSUNDEEP
htmlcssflexboxcss-grid
user3733831
user3733831

Reputation: 2926

How can I have a fixed-width centered column with in a 3-column layout?

I want to get the red box to middle of the strip and need to be only 10 em wide. Left and Right contents should be as the image attached. That mean left contain should be align to left and right side content to right align.

enter image description here

My HTML:

<div class="row">
  <div class="meta-left">
    <p>Left Contents with align left...</p>
  </div>
  <div class="logo-bg-top"></div>
  <div class="meta-right">
    <p>Right Contents with align right...</p>
  </div>
</div>

This is how I tried in CSS:

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.row .logo-bg-top {
    flex: 0 0 9em;
    background: red;
}

Can anybody guide me to fix this issue?

Upvotes: 0

Views: 1385

Answers (1)

SMAKSS
SMAKSS

Reputation: 10520

As NiettheDarkAbsol said in the comments, it's better to do this with grid layout:

If you want to use grid, you can do this by adding display: grid; to your main container and then specify the items within it with grid-template-columns: 1fr 10em 1fr;.

fr indicates a fraction of document width, so since the layout is 1⁄3 (We have 3 different child elements) and the middle one is 10em, so each fr will represent (100% - 10em)⁄2 width of the document.

.row {
  display: grid;
  grid-template-columns: 1fr 10em 1fr;
}

.row [class*="meta"] {
  background: blue;
  color: white;
}

.row .meta-right {
  text-align: right;
}

.row .logo-bg-top {
  background: red;
}
<div class="row">
  <div class="meta-left">
    <p>Left Contents with align left...</p>
  </div>
  <div class="logo-bg-top"></div>
  <div class="meta-right">
    <p>Right Contents with align right...</p>
  </div>
</div>

But if you insist on using flexbox layout this could be an approach for doing such a thing:

.row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
}

.row [class*="meta"] {
  background: blue;
  color: white;
  flex: 1;
}

.row .meta-right {
  text-align: right;
}

.row .logo-bg-top {
  flex: 0 0 10em;
  background: red;
}
<div class="row">
  <div class="meta-left">
    <p>Left Contents with align left...</p>
  </div>
  <div class="logo-bg-top"></div>
  <div class="meta-right">
    <p>Right Contents with align right...</p>
  </div>
</div>

Upvotes: 3

Related Questions