Responsive HTML without framework

Question

Good evening, I need to create a layout with two columns and insert data into the columns using HTML 5 and CSS3 responsibly without using any framework. I’m terrible with layouts and a simple example of this laytout would help a lot. I wanted to do something similar to image and that fits according to the device.

Answer 1

A simple example using @media query. So that the divs are responsive you can use as unit of measure the percentage % (or vw, of viewport width).

In your case, two divas if they were two columns, half and half, you could use:

body{
   margin: 0;
}

main{
   display: flex;
}

.coluna{
   width: 46%;
   background: yellow;
   padding: 2%;
}

@media screen and (max-width: 600px){
   main{
      display: block;
   }

   .coluna{
      width: 100%;
   }
}

<main>
   <div class="coluna">
      div 1
   </div>
   <div class="coluna">
      div 2
   </div>
</main>

As half would be 50% but I used an internal spacing of 2%, i discount the sum of the values of each side (left and right, equal to 4%) and deduct in the width of the div, 46% (50% - 4% = 46%).

Where it has (max-width: 600px) means that when the width of the screen is up to 600 pixels, the styles of the @media Rule, that is, up to 600 pixels of screen width, the two divs will occupy the full width of the screen (100%) one below the other. Above 600px one will stand beside the other.

That value of 600px you must define according to the content of each div, what you think best fits visually. It may be a slightly higher or lower value, it will depend on your layout.

It is worth remembering that the content of each div should also have styles that suit the width of divs-parents (images, internal Ivs, texts etc.). Everything must have relative dimensions.

You can also create other @media queries to change the properties of elements for each screen dimension, will also depend on your layout and what you want to do.

In responsiveness everything is relative, it will depend on the content you will use, set maximum dimensions (such as max-width), minimum (as min-width), and another plethora of criteria based on the content you want to display.

You also need to include the tag below in head so that the mobile browser recognizes the size and scale of the screen (more about this link):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Can give a study in this tutorial on responsiveness.

Answer 2

Ronaldo as you put the tags HTML5 and CSS3 I’ll give you two different ways to do this, one with display-grid and another with display-flex.

First I’ll leave some remarks.

Avoid using float to build layout. This technique of floats was used at a time when CSS resources were very limited. Float actually serves to align content right or left of each other, such as text and images, text and tables, etc., not to build a grid, as you can see in the Mozilla documentation the correct use of float: https://developer.mozilla.org/en-US/docs/Web/CSS/float In short, float currently is not a good practice in building grids

About using padding in %, imagine that your page will open on a 4K monitor in the boardroom, what will happen is that values in % correspond to a proportion of the screen (horizontal ratio), and the bigger the screen will be your padding,. So if 2% on a HD monitor becomes cool, imagine what 2% is on a 4K monitor that is 2x more "wide" your pedding will get 2x larger, for example going from 16px to 32px which may be something unwanted.

I did the responsive treatment so that the columns occupy the entire row on screens up to at most 768px, but in case you don’t want this just delete what’s inside @media in css

Now the objections with flex and grid

.container-flex {
  display: flex;
  box-sizing: border-box;
  border: 2px solid black;
  padding: 1rem auto;
  justify-content: space-around;
  padding: 1rem 0.5rem;
}
.container-flex div {
  box-sizing: border-box;
  border: 2px solid black;
  width: calc(50% - 1rem);
}
@media screen and (max-width: 768px) {
    .container-flex {
        flex-wrap: wrap;
    }
    .container-flex div  {
        width: calc(100% - 1rem);
        margin-top: 1rem;
    }
    .container-flex div:first-child {
        margin-top: 0;
    }
}

<div class="container-flex">
  <div>lado a</div>
  <div>lado b</div>
</div>

---

Option with grid

.container-grid {
  box-sizing: border-box;
  padding: 1rem;
  border: 2px solid black;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}
.container-grid div {
  box-sizing: border-box;
  border: 2px solid black;
}
@media screen and (max-width: 768px) {
    .container-grid {
        grid-template-columns: 1fr;
    }
}

<div class="container-grid">
  <div>lado a</div>
  <div>lado b</div>
</div>