'How can i create this type of html layout

I want to create something like this in a layout where the icon line themselves up with html, how can i get this done?

Layout i would like to create

I Tried the following without flexbox, but when the width gets to narrow it messes up. guess i should try the flexbox instead., hope that will work.

good version messed up version

    .pageColumnMid{
margin-right:20px;
    float : left;
    clear : none;
    height : auto;
    width : auto;
    }
    .pageColumnLeft{
text-align:left;
    float : left;
    clear : none;
    height : auto;
    width : auto;
    }
    .pageColumnRight{
        margin-left:20px;
    float : left;
    clear : none;
    height : auto;
    width : auto;
    }
    .lineheight50{
        line-height: 40px!important;
    }
<body>

<div><div>
    <div class="pageColumnMid"><span  class="fas fa-user lineheight50" ></span> <br> <span  class="fas fa-user lineheight50" ></span> <br> <span  class="fas fa-user lineheight50" ></span> <br>
    </div>
    <div class="pageColumnLeft lineheight50" >View, manage and publish your personal data <br> View, manage and store your Contacts <br> View your technicaldata* <br>
    </div>
    <div class="pageColumnRight"></span><span  class="fas fa-info lineheight50" ></span> <br>  <span  class="fas fa-info lineheight50" ></span> <br>  <span  class="fas fa-info lineheight50" ></span> <br>
    </div>
    </div>

</body>
htmllayoutalignment


Solution 1:[1]

To achieve your design this is what you can do as shown below.

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

.d-flex {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem;
  flex-direction: column;
  width: 100%;/*can edit as per requirement*/
}

.d-flex .col .child {
  display: flex;
  flex-wrap: wrap;
}

.d-flex .col {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0;
  justify-content: space-between;
}

.d-flex p {
  padding: 0 1rem;
}
<!--ADD THIS LINE TO GET FONTAWESOME ICONS IN HEAD TAG-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<div class="d-flex">
  <div class="col">
    <div class="child">
      <span class="fas fa-user"></span>
      <p>View, manage and publish your personal data</p>
    </div>
    <span class="fas fa-info"></span>
  </div>
  <div class="col">
    <div class="child">
      <span class="fas fa-user"></span>
      <p>View, manage and store your Contacts</p>
    </div>
    <span class="fas fa-info"></span>
  </div>
  <div class="col">
    <div class="child">
      <span class="fas fa-user"></span>
      <p>View your technicaldata*</p>
    </div>
    <span class="fas fa-info"></span>
  </div>
</div>

Solution 2:[2]

if you want to create something like this image

enter image description here

You need to learn more about CSS Layout:

The links I mention it's contains useful content for you, and with the w3schools site you can play around with their playground.

Solution 3:[3]

You should learn about Flex in CSS By using these attributes you'll get what you want...

display: flex;  //Flexible Box Layout
flex-wrap: wrap; // box automatically go to next line
flex-direction: column;   // boxes are arranged int column order.

To play with these attributes and other also make you more clear about flex. Thanks

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Imam Ali Mustofa
Solution 3 Ankit Pathak

Related Questions