Creating Three Columns in HTML / CSS

Question

I'm so sorry about the dumb question, but i've been stuck on the same problem for 4+ hours with creating three columns side by side in the center of the page. I've tried margin auto, using position absolute but I cant get them center.

It literally making me want to pull out my hair and i've tried formatting it in 50 different ways.

#IARA {
  width: px margin:0 auto;
}

body {
  margin: 0 padding:0px;
}

#IARAlogo {
  margin-top: 10px;
  margin-right: 10px;
  pointer-events: none;
  float: right;
}

#checkout {
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  pointer-events: none;
}

.CLEARTOPBAR {
  clear: both;
  display: block;
  margin: auto;
}

#leftpanel {
  background-color: orange;
  width: 20%;
  height: 50%;
  padding: 25px;
}

#Middlepanel {
  background-color: blue;
  width: 35%;
  height: 50%;
  padding: 25px;
}

#Rightpanel {
  background-color: pink;
  width: 20%;
  height: 50%;
  padding: 25px;
}

<div id="IARA">
  <img id="IARAlogo" src="iaraplaceholder.png" style="width:50px;height:40px;" draggable="false" unselectable: "on">

  <img id="checkout" src="IARAcheckout.jpg" style="width:70px;height:60px;" draggable="false" unselectable: "on">

</div>

<div class="CLEARTOPBAR">


  <div id="Leftpanel">

  </div>

  <div id="Middlepanel">

  </div>


  <div id="Rightpanel">

  </div>


</div>

You seriously could not find ANYTHING here: google.nl/search?q=3+divs+side+by+side or stackoverflow.com/search?q=%5Bcss%5D+3+divs+side+by+side — mplungjan
– mplungjan, Commented Dec 17, 2017 at 10:37
I used the same exact conditions in many of those posts and the columns disappear completely. — SepZ
– SepZ, Commented Dec 17, 2017 at 10:46

Temani Afif · Accepted Answer · 2017-12-17 10:45:14Z

Simply add display:flex to the container of the 3 divs :

#IARA {
  width: 400px;
  margin:0 auto;
}

body {
  margin: 0 padding:0px;
}

#IARAlogo {
  margin-top: 10px;
  margin-right: 10px;
  pointer-events: none;
  float: right;
}

#checkout {
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  pointer-events: none;
}

.CLEARTOPBAR {
  clear: both;
  display: flex;
  margin: auto;
}

#Leftpanel {
  background-color: orange;
  width: 20%;
  height: 50%;
  padding: 25px;
}

#Middlepanel {
  background-color: blue;
  width: 35%;
  height: 50%;
  padding: 25px;
}

#Rightpanel {
  background-color: pink;
  width: 20%;
  height: 50%;
  padding: 25px;
}

<div id="IARA">
  <img id="IARAlogo" src="iaraplaceholder.png" style="width:50px;height:40px;" draggable="false" unselectable: "on">

  <img id="checkout" src="IARAcheckout.jpg" style="width:70px;height:60px;" draggable="false" unselectable: "on">

</div>

<div class="CLEARTOPBAR">


  <div id="Leftpanel">

  </div>

  <div id="Middlepanel">

  </div>


  <div id="Rightpanel">

  </div>


</div>

Or use float :

#IARA {
  width: 400px;
  margin:0 auto;
}

body {
  margin: 0 padding:0px;
}

#IARAlogo {
  margin-top: 10px;
  margin-right: 10px;
  pointer-events: none;
  float: right;
}

#checkout {
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  pointer-events: none;
}

.CLEARTOPBAR {
  clear: both;
  margin: auto;
}

#Leftpanel {
  background-color: orange;
  width: 20%;
  height: 50%;
  padding: 25px;
  float:left;
}

#Middlepanel {
  background-color: blue;
  width: 35%;
  height: 50%;
  padding: 25px;
  float:left;
}

#Rightpanel {
  background-color: pink;
  width: 20%;
  height: 50%;
  padding: 25px;
  float:left;
}

<div id="IARA">
  <img id="IARAlogo" src="iaraplaceholder.png" style="width:50px;height:40px;" draggable="false" unselectable: "on">

  <img id="checkout" src="IARAcheckout.jpg" style="width:70px;height:60px;" draggable="false" unselectable: "on">

</div>

<div class="CLEARTOPBAR">


  <div id="Leftpanel">

  </div>

  <div id="Middlepanel">

  </div>


  <div id="Rightpanel">

  </div>


</div>

Or make them inline-block :

#IARA {
  width: 400px;
  margin:0 auto;
}

body {
  margin: 0 padding:0px;
}

#IARAlogo {
  margin-top: 10px;
  margin-right: 10px;
  pointer-events: none;
  float: right;
}

#checkout {
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  pointer-events: none;
}

.CLEARTOPBAR {
  clear: both;
  font-size:0;
  margin: auto;
}

#Leftpanel {
  background-color: orange;
  width: 20%;
  height: 50%;
  padding: 25px;
  display: inline-block;
  font-size:initial;
}

#Middlepanel {
  background-color: blue;
  width: 35%;
  height: 50%;
  padding: 25px;
  display: inline-block;
  font-size:initial;
}

#Rightpanel {
  background-color: pink;
  width: 20%;
  height: 50%;
  padding: 25px;
  display: inline-block;
  font-size:initial;
}

<div id="IARA">
  <img id="IARAlogo" src="iaraplaceholder.png" style="width:50px;height:40px;" draggable="false" unselectable: "on">

  <img id="checkout" src="IARAcheckout.jpg" style="width:70px;height:60px;" draggable="false" unselectable: "on">

</div>

<div class="CLEARTOPBAR">


  <div id="Leftpanel">

  </div>

  <div id="Middlepanel">

  </div>


  <div id="Rightpanel">

  </div>


</div>

Rutvij07 · Accepted Answer · 2017-12-17 10:50:41Z

You can do by using bootstrap rather than writing too much CSS , here is the link of bootstrap https://getbootstrap.com/

Here is the code of 3 colums using bootstrap

 <head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

<div class="row">
  <div class="col-sm-4" style="background-color:orange;">Hello</div>
  <div class="col-sm-4" style="background-color:white;">Hello</div>
  <div class="col-sm-4" style="background-color:green;">Hello</div>
</div>

</div>

</body>

Here the link how to use columns in bootstrap https://getbootstrap.com/docs/4.0/layout/grid/

Hope this will help you.

jwzumwalt · Accepted Answer · 2017-12-17 13:07:57Z

Here are snippets I frequently use. These snippets are designed to be used as DIV class declarations in a STYLE. Simply place your text inside a div. i.e <div class="3col">Text to be 3 columns</div>. I like this because it allows me to have multiple column styles within the page.

<style>
.2col {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2;    /* Firefox */
column-count: 2;

-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px;    /* Firefox */
column-gap: 30px;

-webkit-column-rule: 2px outset #aaa; /* Chrome, Safari, Opera */
-moz-column-rule: 2px outset #aaa;    /* Firefox */
column-rule: 2px outset #aaa;
}

.3col {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3;    /* Firefox */
column-count: 3;

-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px;    /* Firefox */
column-gap: 30px;

-webkit-column-rule: 2px outset #aaa; /* Chrome, Safari, Opera */
-moz-column-rule: 2px outset #aaa;    /* Firefox */
column-rule: 2px outset #aaa;
}
</style>

Collectives™ on Stack Overflow

Creating Three Columns in HTML / CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related