One SNapp One SNapp - 1 month ago 6
CSS Question

Cant keep three divs inline without one going to the next line

I cant seem to get three divs to stay inline. The third always goes to another line. I've tried display inline block, float left on the wrapper, i've tried changing the sizes of the divs and several other things and i cant get it to work. I haven't found another stack overflow question that can solve my problem. Heres the html and css.

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin:0;
padding:0;
background-image: url("download.png");
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 20px;
text-decoration: none;
float: left;
}

li a:hover {
background-color: #111111;
}
.blue {
position:absolute;
width:100%;
float:right;
background-color:#62ADDB;
height:5px;
}
.body {
background-color: white;
width: 100%;
height: 600px;
position: absolute;
font-family: 'Roboto', sans-serif;
}
.tdes {
font-size: 1.2em;
}
.des {
background-color: #D0DAE0;
width: 100%;
padding: 30px;
width: 100%;
position: absolute;
}
.profilePic {
border-radius: 50%;
width: 30%
}
.p1 {
right: 30%;
float: left;
background-color: white;
padding: 10px;
width: 30%;
height: 300px;
}
.p2 {
right: 60%;
float: center;
background-color: white;
padding: 10px;
width: 30%;
height: 300px;
}
.p3 {
right: 0%;
float: right;
background-color: white;
padding: 10px;
width: 30%;
height: 300px;

}
a {
text-decoration: none;
}
.des a:link{
color: #000000;
}
.inline {
display:inline;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<ul>
<li><a href="">Minds Gaming</a></li>
<li><a href="https://www.minds.com/MindsGaming"> MG Channel</a></li>
<li><a href=""> 18+</a></li>
<li><a href="">Contact us</a></li>
</ul>
<div class="blue"></div>
<br />
<br />
<div class="body"><center>
<div class="des">
<br />
<h2>
Welcome to the MindsGaming Community!
</h2>
<p class="tdes">
The #1 Community on Minds, We have the best open groups and members!
<br />Make sure to check out as many groups and fun members you can!
</p>
<br /> <br /> <br />
Our supporters:
<br /><br /><br />

<div class="p1">
<img class="profilePic" src="test.png">
<br />
@channel
<br /> <br />
Description about person
</div>
<div class="p2">
<img class="profilePic" src="test.png">
<br />
@channel
<br /> <br />
Description about person
</div>
<div class="p3">
<img class="profilePic" src="test.png">
<br />
@channel
<br /> <br />
Description about person
</div>
</center>
</div>

</div>
</body>
</html>

Answer

There's no float: center in CSS. You need to give this way:

.p2 {
  right: 60%;
  float: left;                   /* Change this as well. */
  background-color: white;
  padding: 10px;
  width: 30%;
  height: 300px;
  margin: 0 5px;                 /* And add the margin. */
}

Preview:

preview