Centering 2 elements adjacent to each other in CSS/HTML - html

Question

I have two elements (map + description inside a box). When on a large screen, both elements appear on the same line, which is good. However, they stay on the left of the page and I would like them to sit in the middle.
Here is a fiddle of the below:
.map {
float: left padding: 10px;
width: 410px;
border: 1px solid black;
display: inline-block;
}
.map1 {
float: right padding: 10px;
width: 410px;
border: 1px solid black;
display: inline-block;
}
p {
float: left;
width: 100%;
}
<div class="map">
<iframe src="https://ctrc00.carto.com/builder/e2f49f3c-b793-11e6-9ceb-0ef24382571b/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<p><i>
<u>Map 1: <strong>12,083 listings</strong> (Sept.2016)</i>
</u>
<h4><span style="color: #FFA500;"><strong>Activity:</strong></span></h4>
<br>
<strong>183</strong> estimated nights/year
<br>
<strong>$127</strong> price/night
<br>
<strong>50.2%</strong> estimated occupancy
<br>
<strong>$1920</strong> estimated income/month
<br>
<h4><span style="color: #FFA500;"><strong>Listing per Host:</strong></span></h4>
<br>
<strong>38.2%</strong> multi-listings
<br>
<strong>62.0%</strong> single listings
<br>
<br>
<h4><span style="color: #FFA500;"><strong>Room Type:</strong></span></h4>
<br>
<strong>55.3%</strong> entire homes/apartment
<br>
<strong>42.6%</strong> private rooms
<br>
<strong>2.1%</strong> shared rooms
<br>
</p>
</div>
<p>
<div class="map1">
<iframe src="https://ctrc00.carto.com/builder/221c9570-b794-11e6-ad89-0e8c56e2ffdb/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<p><i><u>Map 2: <strong>15,640 listings</strong> (Sept.2016)</p></i>
</u>
<h4><span style="color: #FFA500;"><span style="color: #FFA500;"><strong>Activity:</strong></span></h4>
<br>
<strong>60</strong> estimated nights/year
<br>
<strong>$196</strong> price/night
<br>
<strong>16.3%</strong> estimated occupancy
<br>
<strong>$759</strong> estimated income/month
<br>
<br>
<h4><span style="color: #FFA500;"><strong>Listing per Host:</strong></span></h4>
<br>
<strong>28.5%</strong> multi-listings
<br>
<strong>71.5%</strong> single listings
<br>
<br>
<h4><span style="color: #FFA500;"><strong>Room Type:</strong></span></h4>
<br>
<strong>60.3%</strong> entire homes/apartment
<br>
<strong>37.9%</strong> private rooms
<br>
<strong>1.8%</strong> shared rooms
<br>
</p>
</div>
Above and under, I have some simple text/paragraph that are in the middle.

Answer 1

Just place your whole html code inside this
<div class="container"> </div>
and add one class only
.container{
display: flex;justify-content: center;width:100%;
}

Answer 2

.container {
justify-content: center;
display: flex;
}
<div class="container">
<p class="map_airbnb"><iframe src="https://prox.carto.com/builder/4dedf917-eb0c-4121-8c6d-f4ab2a6b75d3/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<strong>Activity:</strong><br><br>
183 estimated nights/year<br>
$127 price/night<br>
50.2% estimated occupancy<br>
$1920 estimated income/month<br><br>
<strong>Listing per Host:</strong><br>
38.2% multi-listings<br>
62.0% single listings <br><br>
<strong>Room Type:</strong><br>
55.3% entire homes/apartment<br>
42.6% private rooms <br>
2.1% shared rooms <br>
</p>
<p class="map_airbnb1"><iframe src="https://prox.carto.com/builder/4dedf917-eb0c-4121-8c6d-f4ab2a6b75d3/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<strong>Activity:</strong><br><br>
60 estimated nights/year<br>
$196 price/night<br>
16.3% estimated occupancy<br>
$759 estimated income/month<br><br>
<strong>Listing per Host:</strong><br>
28.5% multi-listings<br>
71.5% single listings <br><br>
<strong>Room Type:</strong><br>
60.3% entire homes/apartment<br>
37.9% private rooms <br>
1.8% shared rooms <br>
</p>
</div>
Put an external div or container to your maps and use justify-content:center

Answer 3

Use CSS Flexbox. Wrap these maps inside a container (in my case map_holder).
Have a look at the snippet below (Use full screen):
.map_holder {
display: flex;
justify-content: center;
}
body {
margin: 0;
}
<div class="map_holder">
<p class="map_airbnb"><iframe src="https://prox.carto.com/builder/4dedf917-eb0c-4121-8c6d-f4ab2a6b75d3/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<strong>Activity:</strong><br><br>
183 estimated nights/year<br>
$127 price/night<br>
50.2% estimated occupancy<br>
$1920 estimated income/month<br><br>
<strong>Listing per Host:</strong><br>
38.2% multi-listings<br>
62.0% single listings <br><br>
<strong>Room Type:</strong><br>
55.3% entire homes/apartment<br>
42.6% private rooms <br>
2.1% shared rooms <br>
</p>
<p class="map_airbnb1"><iframe src="https://prox.carto.com/builder/4dedf917-eb0c-4121-8c6d-f4ab2a6b75d3/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<strong>Activity:</strong><br><br>
60 estimated nights/year<br>
$196 price/night<br>
16.3% estimated occupancy<br>
$759 estimated income/month<br><br>
<strong>Listing per Host:</strong><br>
28.5% multi-listings<br>
71.5% single listings <br><br>
<strong>Room Type:</strong><br>
60.3% entire homes/apartment<br>
37.9% private rooms <br>
1.8% shared rooms <br>
</p>
</div>
Hope this helps!

Answer 4

You can use media queries for that, so just update your css like this:
.map_airbnb {
float:left;
width: 50%;
}
.map_airbnb1 {
float:right;
width: 50%;
}
#media screen and (max-width: 480px) {
.map_airbnb,
.map_airbnb1 {
width: 100%;
}
}
Here your original with this update https://jsfiddle.net/9ssukjg4/

Answer 5

Wrap both blocks in a div and use css3 flexbox. Fiddle. – Muhammad Usman 3 mins ago