Three Column Design

melih eken 0
Viewed 42

I'm trying to do an assignment, I couldn't solve it for 2 days. flexbox, grid, bootstrap will not be used

in the first case,

Up to 992 pixels, 3 boxes will appear on the evenly spaced centered page.

in the second case,

In the tablet view (between 768px and 991px, inclusively), the first 2 sections should be in the first row and be of equal size. The 3rd section should be in the second row and take up the entire row by itself.

in the third case,

In the mobile view (equal to or less than 767px), each section should take up the entire row.

I couldn't get 3 boxes to appear centered on mobile.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Two Column Design</title>
<style>

* {
  box-sizing: border-box;
}
#k1 {
    background-color: blueviolet;
}
#k2 {
    background-color: rgb(58, 245, 98);
}
#k3 {
    background-color: rgb(179, 38, 38);
}
.column {
  float: left;
  width: 31%;
  border: 2px solid black;
  margin: 15px;
  
  
}

/* Clear floats after the columns */
.row {

  clear: both;
}
.baslik1 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    background-color: palevioletred;
    border: 1px solid black;
    padding: 5px 20px 5px 20px;
    display: inline;
    float: right;
    }
    .baslik2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    background-color: red;
    border: 1px solid black;
    padding: 5px 20px 5px 20px;
    display: inline;
    float: right;
    }
    .baslik3 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    background-color: rgb(217, 243, 166);
    border: 1px solid black;
    padding: 5px 20px 5px 20px;
    display: inline;
    float: right;
    }
p {
    clear: both;
    padding: 10px;
}
@media only screen and (max-width: 992px) {
  #k1 {
    width: 29%;
    
  }
  #k2 {
    width: 29%;
    
  }
  #k3 {
    width: 29%;
    
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #k1 {
    width: 46%;
    
  }
  #k2 {
    width: 46%;
    
  }
  #k3 {
    width: 95%;
    
  }
}
</style>
</head>
<body>
<h1>Three Column Design</h1>

<div class="row">
    <div id="k1" class="column">
        <div class="baslik1">Chicken</div>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
    <div id="k2" class="column">
        <div class="baslik2">Beef</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
    <div id="k3" class="column">
        <div class="baslik3">Sushi</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
  </div>
</body>
</html>

css-float margin media-queries css html
3 Answers
@media (max-width: 767px) {
    #k1, #k2, #k3 {
        width: 95%;
  }
Abhishek Sawant0

Try this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Two Column Design</title>
<style>

* {
  box-sizing: border-box;
}
#k1 {
    background-color: blueviolet;
}
#k2 {
    background-color: rgb(58, 245, 98);
}
#k3 {
    background-color: rgb(179, 38, 38);
}
.column {
  float: left;
  width: 31%;
  border: 2px solid black;
  margin: 15px;
  
  
}

/* Clear floats after the columns */
.row {

  clear: both;
}
.baslik1 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    background-color: palevioletred;
    border: 1px solid black;
    padding: 5px 20px 5px 20px;
    display: inline;
    float: right;
    }
    .baslik2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    background-color: red;
    border: 1px solid black;
    padding: 5px 20px 5px 20px;
    display: inline;
    float: right;
    }
    .baslik3 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    background-color: rgb(217, 243, 166);
    border: 1px solid black;
    padding: 5px 20px 5px 20px;
    display: inline;
    float: right;
    }
p {
    clear: both;
    padding: 10px;
}
#k1, #k2, #k3 {
    width: 98%; 
    margin: 1%;       
}

@media (min-width: 768px) and (max-width: 991px) {
  #k1, #k2 {
    width: 46%;    
    margin: 2%;         
  }
  #k3 {
    width: 96%;        
    margin: 2%;     
  }
}
@media only screen and (min-width: 991px) {
  #k1, #k2, #k3 {
    width: 29%;   
    margin: 2.16%;     
  }
}
</style>
</head>
<body>
<h1>Three Column Design</h1>

<div class="row">
    <div id="k1" class="column">
        <div class="baslik1">Chicken</div>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
    <div id="k2" class="column">
        <div class="baslik2">Beef</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
    <div id="k3" class="column">
        <div class="baslik3">Sushi</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
  </div>
</body>
</html>

Rizeen0

Here's another version with no need for floats or the .row div as we've used display: inline-block. It's also an example of how to use calc to set widths. I've also tidied your CSS up a bit.

Good luck with your assignment!

*,
*::before,
*::after {
  box-sizing: border-box;
}

#k1 {
  background-color: blueviolet;
}

#k2 {
  background-color: rgb(58, 245, 98);
}

#k3 {
  background-color: rgb(179, 38, 38);
}

.column {
  display: inline-block;
  width: calc(31% - 15px);
  border: 2px solid black;
  margin: 15px;
}

.baslik {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: bold;
  border: 1px solid black;
  padding: 5px 20px 5px 20px;
  display: inline;
  float: right;
}

.baslik1 {
  background-color: palevioletred;
}

.baslik2 {
  background-color: red;
}

.baslik3 {
  background-color: rgb(217, 243, 166);
}

p {
  clear: both;
  padding: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #k1,
  #k2 {
    width: calc(50% - 33px);
  }
  #k3 {
    width: auto;
  }
}

@media only screen and (max-width: 767px) {
  #k1,
  #k2,
  #k3 {
    width: auto;
  }
}
<h1>Three Column Design</h1>
<div id="k1" class="column">
  <div class="baslik baslik1">Chicken</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing
    elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p>
</div>
<div id="k2" class="column">
  <div class="baslik baslik2">Beef</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing
    elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p>
</div>
<div id="k3" class="column">
  <div class="baslik baslik3">Sushi</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing
    elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p>
</div>

userurKQ0
Related