CODEWITHSUNDEEP
htmlcss
user14129089
user14129089

Reputation:

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

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.

Upvotes: 0

Views: 165

Answers (2)

s.kuznetsov
s.kuznetsov

Reputation: 15213

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>

Upvotes: 1

Dhruvi Makvana
Dhruvi Makvana

Reputation: 905

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>

Upvotes: 0

Related Questions