How to keep 3 columns from breaking when resizing-CodePudding

So basically, i'm trying to create a 3 column website. Everything looks good until i resize the window and then the third column breaks out of design and goes to the next line. I did check on Stackoverflow and found a slight help, which was to code-in a min-width for the body tag but the problem is that i get a horizontal scrollbar.

Any ideas? Thanks in advance. And feel free to correct any of my coding structure!

<!DOCTYPE html>
<html>
    <head>
<title>My Webpage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: white;
    min-width: 960px; margin: 0 auto;
}

.header {
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    background-color: rgb(135, 219, 51);
    margin: 0;
    padding: 20px;
    color: rgb(0, 0, 0);
}

.header p {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }

.navigation {
          }

ul {
    background-color: rgb(183, 255, 0);
list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;       
        }

        li {float: left;
        
    }

li a {
    display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 14px 16px;

    
}

a:hover {
    background-color: rgb(43, 226, 98);
}

.column p::first-letter {
  color:  rgb(183, 255, 0);
  font-size: xx-large;
  
}

.column {
  width: 30%;
  float: left;
  background-color: rgb(245, 245, 245);
 padding-left: 14px;
 padding-right: 14px;
 margin: 5px 15px;
 border-radius: 25px;
  border: 2px solid #73AD21;
 
   
 
}

.maincontent {
    box-sizing:content-box
    width: 100%;
  
  
}

.column p{
   
    text-align: justify;
 
    
   
}

.column h2{
  color:  rgb(183, 255, 0);;  
margin: 0;
padding-top: 14px;
}

.column:after {
  content: "";
  display: table;
  clear: both;
}


@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }

 






</style>
    </head>

    <body>
        <div >
            <h1>Header</h1>
            <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus</p>
        </div>

        <div >
            <ul>
                <li><a  href="#home">Home</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </div>

        <main>
            <div >
            <div >
                <h2>Column</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
            </div>

            <div >
                <h2>Column</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
            </div>

            <div >
                <h2>Column</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
            </div>
        </div>


        </main>


        
    </body>
</html>

CodePudding user response：

You can prevent the column from collapsing by using display: flex on your .maincontent element:

<!DOCTYPE html>
<html>

<head>
  <title>My Webpage</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
      * {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      padding: 0;
      background-color: white;
      min-width: 960px;
      margin: 0 auto;
    }
    
    .header {
      font-family: 'Times New Roman', Times, serif;
      text-align: center;
      background-color: rgb(135, 219, 51);
      margin: 0;
      padding: 20px;
      color: rgb(0, 0, 0);
    }
    
    .header p {
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    .navigation {}
    
    ul {
      background-color: rgb(183, 255, 0);
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    li {
      float: left;
    }
    
    li a {
      display: block;
      color: white;
      text-align: center;
      text-decoration: none;
      padding: 14px 16px;
    }
    
    a:hover {
      background-color: rgb(43, 226, 98);
    }
    
    .column p::first-letter {
      color: rgb(183, 255, 0);
      font-size: xx-large;
    }
    
    .column {
      width: 30%;
      float: left;
      background-color: rgb(245, 245, 245);
      padding-left: 14px;
      padding-right: 14px;
      margin: 5px 15px;
      border-radius: 25px;
      border: 2px solid #73AD21;
    }
    
    .maincontent {
      box-sizing: content-box width: 100%;
      display: flex;
    }
    
    .column p {
      text-align: justify;
    }
    
    .column h2 {
      color: rgb(183, 255, 0);
      ;
      margin: 0;
      padding-top: 14px;
    }
    
    .column:after {
      content: "";
      display: table;
      clear: both;
    }
    
    @media screen and (max-width:600px) {
      .column {
        width: 100%;
      }
  </style>
</head>

<body>
  <div >
    <h1>Header</h1>
    <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus</p>
  </div>

  <div >
    <ul>
      <li><a  href="#home">Home</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>

  <main>
    <div >
      <div >
        <h2>Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget
          luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
      </div>

      <div >
        <h2>Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget
          luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
      </div>

      <div >
        <h2>Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget
          luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
      </div>
    </div>


  </main>



</body>

</html>

CodePudding user response：

It happens because you write the

  @media screen and (max-width:600px) {.column {
width: 100%;}

So the column section will consume 100% of its parents (maincontent) size. Each column is 100% maincontent size, thats why the next column will be place at the bottom of the previous one. If you wanna make the column adjustable to the width of your screen. Just set the

.column{ 
width : 31%}

and remove the responsive option for column. 31% is optional (if its not enough you can redice or add it).

CodePudding user response：

enter code here

* {
    box-sizing: border-box;
    margin:0;
    padding:0;
}

.header {
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    background-color: rgb(135, 219, 51);
    margin: 0;
    padding: 20px;
    color: rgb(0, 0, 0);
}

.header p {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }

.navigation {
          }

ul {
    background-color: rgb(183, 255, 0);
list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;       
        }

        li {float: left;
        
    }

li a {
    display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 14px 16px;

    
}

a:hover {
    background-color: rgb(43, 226, 98);
}

.column p::first-letter {
  color:  rgb(183, 255, 0);
  font-size: xx-large;
  
}
main{
margin:10px;

}
.column {
  float: left;
  width: 32.33%;
  padding: 20px;
  height: 300px;
  border-radius: 25px;
  border: 2px solid #73AD21;
  margin: 2px;
  overflow: hidden;   
  background-color: rgb(245, 245, 245);
}

.row:after {
  content: "";
  display: table;
  clear: both;
  
   }

.column p{
       text-align: justify; 
}

.column h2{
  color:  rgb(183, 255, 0);;  
margin: 0;
padding-top: 14px;
}


@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    }
      }

 <!DOCTYPE html>
<html>
    <head>
<title>My Webpage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 </head>

    <body>
        <div >
            <h1>Header</h1>
            <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus</p>
        </div>

        <div >
            <ul>
                <li><a  href="#home">Home</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </div>

        <main>
            <div >
            <div >
                <h2>Column</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
            </div>

            <div >
                <h2>Column</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
            </div>

            <div >
                <h2>Column</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
            </div>
        </div>


        </main>


        
    </body>
</html>

if you are not satisfied with this answer, you need to study Media Queries to make your website Responsive or use simple col and row rules. and one more thing you can use BootStrap formwork. I hope, I helped you.