Bob Johnson Bob Johnson - 1 month ago 7
HTML Question

Dividers Not Next To Each Other

I'm making a website and i have been struggling to make two or more

<div>
's next to each other.

Here is my code:



/*---MAKE PAGE---*/

body {
background: lightblue;
}
.navbar {
background: lightgreen;
height: auto;
width: 1840px;
float: left;
margin: 20px;
padding-left: 10px;
}
.navbar_objects {
text-decoration: none;
float: left;
}
.navobj {
text-decoration: none;
color: #3399FF;
float: left;
margin: 20px;
}
.navobj:hover {
color: white;
}
#title_of_page {
color: darkblue;
margin: 20px;
padding-left: 880px;
}
.title {
padding-top: 1px;
height: 75px;
width: 1850px;
background: lightgreen;
margin: 20px;
}
#title_recent {
color: darkblue;
margin: 20px;
padding-left: 300px;
padding-bottom: 20px;
}
.main {
height: 2000px;
width: 1810px;
background: lightgreen;
padding: 20px;
padding-left: 200px;
margin: 20px;
}
/*---END---*/

/*----------------START DESCRIPTIONS----------------*/

/*---START FIFA DESCRIPTION---*/

#image_div_recent_fifa16 {
margin: 0px;
height: 235px;
width: 250px;
float: left;
}
#text_div_recent_fifa16 {
float: right;
font-size: 20px;
width: auto;
height: auto;
}
/*---END---*/

/*---START NBA CODE---*/

#image_div_recent_nba {
margin: 0px;
height: 235px;
width: 250px;
float: left;
}
#text_div_recent_nba {
float: right;
font-size: 20px;
width: auto;
height: auto;
}
/*---END---*/

/*----------------CODE FOR POSTS----------------*/

/*---START FIFA POST CODE---*/

#post_fifa {
width: 250px;
height: 450px;
padding: 20px;
margin: 10px;
}
#post_fifa:hover {
border: solid black 1px;
}
/*---END---*/

/*---START NBA POST CODE---*/

#post_nba {
width: 250px;
float: up;
height: 450px;
margin: 10px;
padding: 20px;
}
#post_nba:hover {
border: solid black 1px;
}

<html>

<head>

<title>GameGo - Home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

<body>

<div class="navbar">

<li class="navbar_objects">
<a class="navobj" href="index.html">Home</a>
<a class="navobj" href="games.html">Games</a>
<a class="navobj" href="reviews.html">Reviews</a>
<a class="navobj" href="contactus.html">Contact Us</a>
</li>

</div>
<br>
<br>
<br>
<br>
<br>
<div class="title">

<h1 id="title_of_page">Home</h1>

</div>

<div class="main">

<h2 id="title_recent">Recent</h2>

<br>
<div class="posts">

<div id="post_fifa">

<div class="image_div_recent_fifa16">
<img src="\\ISB-AD2012\Secondary Students\Grade 9\Paul\ICT\Grade 9\9.3 Web Design\fifa16logo.png" class="img_text_recent">
</div>

<div id="text_div_recent_fifa16">
<p class="class_text_recent">FIFA 16 - Fifa 16 is a football game available on most gaming platforms(Xbox one, PS4, PC, PS3, Xbox 360, Wii U). It is a very good game to play with friends, family or other. You can play 4 player co op on same console.
</p>
</div>

</div>

<div id="post_nba">

<div class="image_div_recent_nba">
<img src="\\ISB-AD2012\Secondary Students\Grade 9\Paul\ICT\Grade 9\9.3 Web Design\fifa16logo.png" class="img_text_recent">
</div>

<div id="text_div_recent_nba">
<p class="class_text_recent">FIFA 16 - Fifa 16 is a football game available on most gaming platforms(Xbox one, PS4, PC, PS3, Xbox 360, Wii U). It is a very good game to play with friends, family or other. You can play 4 player co op on same console.
</p>
</div>

</div>

<br>
<br>

</div>

</div>

</body>

</html>





I would like to put
post_fif
a next to
post_nba
.

Answer

Try adding display: inline-block to your elements:

#post_nba, #post_fifa {
  display: inline-block;
}

https://jsfiddle.net/L8w1owr4/