How to make 2 divs side by side within inner div popup? - html

Question

I am working on a project that has popup boxes for the user to interact with. I am trying to put 2 blocks of content next to each other in the popup box.
I've been looking around for answers, but none of the common solutions seem to be working here. I've tried float:left, display: inline-block, etc. The only thing that has worked is to set the exact width/heights and apply a margin to the second container, but I'd like to avoid this hack-y solution.
HTML:
<div id="equip-robot-modal" class="modal">
<div id="equip-robot-modal-content" class="modal-content">
<div id="equip-modal-content-inner" class="modal-content-inner">
<div id="robot-info-content">
<header id="equip-header">
<h2 id="equip-header-text">Robot Name Header</h2>
</header>
</div><!-- #robot-info-content -->
<div id="inventory-list-content">
<div id="inventory-list-container">
<p>
put more content here
</p>
</div><!-- #inventory-list-container -->
<div id="auto-match-container">
<button type="button" style="width: 50%; height: 50px; margin-top: 20px;" class="button">
<?php //echo langMatch(
//'PLAYER_SELECTOR_AUTO_MATCH'); ?>
Go to Store
</button>
</div><!-- #auto-match-container -->
</div><!-- #inventory-list-content -->
</div><!-- #equip-modal-content-inner -->
</div><!-- #equip-robot-modal-content -->
CSS:
#robot-info-content {
min-width: 500px;
padding: 10px;
position: relative;
float: left;
background-color: red;
}
#robot-image {
padding: 20px 0;
}
#modal-progress-bars {
min-height: 75%;
}
#inventory-list-content {
min-width: 400px;
padding: 10px;
display: inline-block;
float: left;
background-color: purple;
}
#inventory-list-container {
width: 100%;
height: 430px;
border: 1px solid black;
overflow-y: scroll;
}
.modal-content {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 350px;
height: auto;
transform: translate(-50%, -50%);
background-color: #f7f7f7;
color: black;
border: 2px solid black;
overflow: visible;
}
.modal-content-inner {
margin: 20px 50px;
text-align: center;
}
.modal-content-inner header {
background-color: white;
border: 1px solid black;
padding: 10px 50px;
margin: 0 auto;
}
See the fiddle: https://jsfiddle.net/kqa25wgv/
I'd like to float the 2 content divs within the modal-content inner div. Any suggestions?

Answer 1

Here are some values that worked for me. I stripped out all the superfluous ones:
.modal-content {
width: 800px;}
#robot-info-content {
width: 50%;
float: left;
background-color: red;
}
#inventory-list-content {
width: 50%;
float: left;
background-color: purple;
}
#inventory-list-container {
height: 430px;
border: 1px solid black;
}
.modal-content-inner {
margin: 20px 50px;
text-align: center;
}
.modal-content-inner header {
background-color: white;
border: 1px solid black;
}
You'll notice that I set the width of the .modal-content class to 800px. That's arbitrary and you can change it to what you want (or set it as a percentage of its containing div, if you have one). The important change is to replace your minimum-width settings with width settings, and set them to a percentage. The problem that you have is that your two inner divs are too wide for their container, so the second one wraps to the next line, so to speak.
Of course, if you use padding and/or margins on the inner content divs, you won't be able to set them at 50% without having the same problem.
The other thing that you'll want to experiment with is floating one content div to the left and the other to the right. If you float them both to the left, it won't make a difference so long as they take up the entire width of their container (and no more than the entire width). This can get tricky when you start using static values for your margins and padding, so you'll need to experiment. (You can also use percent values for margins and padding, which can be less tricky.)