-1

With Bootstrap or W3 it is easy but in this application I don't want to use that to make the columns. How do I handle the columns issue withe pure css? I need to do something like this:

enter image description here

I repeat... Whithout using bootstrap, w3 or any other css framework, how do I make this.

This is my simple HTML code:

<div style="width: 50px; float: left">
  << Prev
</div>
<div style="float: left">
  <h1>Some Info... this is the responsive div. Always the rest of the size extracting the 50px of the other divs</h1>
</div>
<div style="width: 50px; float: left">
  Next >>
</div>
Huangism
  • 16,278
  • 7
  • 48
  • 74
Sergio Mendez
  • 1,311
  • 8
  • 33
  • 56
  • Well you can use css grid https://css-tricks.com/snippets/css/complete-guide-grid/ or flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/. CSS grid being the newer tech so depend on your browser support, you can pick the best one for you – Huangism Feb 22 '18 at 15:55

1 Answers1

2

You can use flexbox:

.container {
  display: flex;
  height: 200px;
}

.side {
  width: 50px;
  height: 100%;
  background: purple;
}

.middle {
  flex-grow: 1;
  background: blue;
}
<div class="container">
  <div class="side"></div>
  <div class="middle"></div>
  <div class="side"></div>
</div>
Jesse
  • 3,522
  • 6
  • 25
  • 40