How to make a proportional 4 column layout with html and css

Question

How do I make a 4 column design for html with css? I want to have 1 column that's 5% of the screen, one that's 65%, another that's 5%, and the fourth that's 25%, all in that order. I've tried tons of online tutorials, but none of them work, each one gives a random problem.

Answer 1

I have provided simple examples using multiple display types. If you need to set the height to full width, then set the rule height: 100vh for the container .

#1 table:

 body { box-sizing: border-box; margin: 0; padding: 0; } .container { display: table; width: 100%; } .container_box { display: table-cell; color: white; } .container_box:nth-child(1) { width: 5%; background-color: yellow; } .container_box:nth-child(2) { width: 65%; background-color: green; } .container_box:nth-child(3) { width: 25%; background-color: red; } .container_box:nth-child(4) { width: 5%; background-color: grey; }

 <div class="container"> <div class="container_box"> 1 </div> <div class="container_box"> 2 </div> <div class="container_box"> 3 </div> <div class="container_box"> 4 </div> </div>

#2 flex:

 body { box-sizing: border-box; margin: 0; padding: 0; } .container { display: flex; width: 100%; } .container_box { color: white; } .container_box:nth-child(1) { width: 5%; background-color: yellow; } .container_box:nth-child(2) { width: 65%; background-color: green; } .container_box:nth-child(3) { width: 25%; background-color: red; } .container_box:nth-child(4) { width: 5%; background-color: grey; }

 <div class="container"> <div class="container_box"> 1 </div> <div class="container_box"> 2 </div> <div class="container_box"> 3 </div> <div class="container_box"> 4 </div> </div>

#3 grid:

 body { box-sizing: border-box; margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 5% 65% 25% 5%; width: 100%; } .container_box { color: white; } .container_box:nth-child(1) { background-color: yellow; } .container_box:nth-child(2) { background-color: green; } .container_box:nth-child(3) { background-color: red; } .container_box:nth-child(4) { background-color: grey; }

 <div class="container"> <div class="container_box"> 1 </div> <div class="container_box"> 2 </div> <div class="container_box"> 3 </div> <div class="container_box"> 4 </div> </div>

Answer 2

Please use flexbox.

 .parent{ display:flex; justify-content: space-around; flex-direction: row; } .child{ border:1px solid black; height:50px; background-color: lightblue; } .child:nth-child(0){ flex-basis: 5%; } .child:nth-child(1){ flex-basis: 65%; } .child:nth-child(2){ flex-basis: 5%; } .child:nth-child(3){ flex-basis: 25%; }

 <div class="parent"> <div class="child">content</div> <div class="child">content</div> <div class="child">content</div> <div class="child">content</div> </div>