CSS - Width WebBrowser Page Responsively and Precisely : Best Practises

Question

I have a scenary here where I have to do the math in order to get the witdh size precisely in my web page.

I wrote down some code and it words. However, I don't know if it is the beste approach.

I have worket that way:

width: calc(25% - 24px);

You can see the entire code below :

*{
 margin: 0;
 padding: 0;
}

.container{
 background-color: #3A4444;
}

.box{
 width: calc(25% - 24px);
 border: 2px solid lightgray;
 color:white;
 padding: 10px;
}

.box h2
{
 color: green;
 text-align: center;
 margin-bottom: 20px;
 border-bottom: 2px solid lightgray;
}

.left{
 float:left;
}

.clear{
 clear: both;
}

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="container">
  <div class="box left">
   <h2>First</h2>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
   </p>
  </div>
  <div class="box left">
   <h2>Second</h2>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
   </p>
  </div>
  <div class="box left">
   <h2>Third</h2>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
   </p>
  </div>
  <div class="box left">
   <h2>Four</h2>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
   </p>
  </div>
  <div class="clear">
  </div>
 </div>
</body>
</html>

score 1 · Answer 1 · answered Oct 24 '18 at 09:34

I think box-sizing: border-box will help you out. It makes the padding and borders "go inside" the element.

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

.container{
 background-color: #3A4444;
}

.box{
 width: 25%;
 border: 2px solid lightgray;
 color:white;
 padding: 10px;
}

.box h2
{
 color: green;
 text-align: center;
 margin-bottom: 20px;
 border-bottom: 2px solid lightgray;
}

.left{
 float:left;
}

.clear{
 clear: both;
}

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="container">
  <div class="box left">
   <h2>First</h2>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
   </p>
  </div>
  <div class="box left">
   <h2>Second</h2>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
   </p>
  </div>
  <div class="box left">
   <h2>Third</h2>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
   </p>
  </div>
  <div class="box left">
   <h2>Four</h2>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
   </p>
  </div>
  <div class="clear">
  </div>
 </div>
</body>
</html>

CSS - Width WebBrowser Page Responsively and Precisely : Best Practises

1 Answers1