I am having trouble aligning two divs horizontally within another div while setting a maximum width for each. Additionally, I would like some spacing between the divs to avoid them touching.
The following code isn't yielding the desired outcome:
HTML:
<div class="container" id="outer">
<div id="inner">
<h2>Heading!</h2>
<p>Text</p>
<p>More text</p>
</div>
<div class="frame">
<p>Description</p>
<img src="path to image" />
</div>
</div>
CSS:
.container {
min-height: 400px;
padding: 3vh 1vw;
}
#outer {
overflow: hidden;
text-align: center;
margin: auto;
display: inline-block;
}
#inner {
width: 50%;
max-width: 600px;
text-align: justify;
height: 422px;
}
.frame {
position: relative;
}
.frame img {
border: 10px solid #fff;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px black;
-moz-box-shadow: 3px 3px 3px black;
box-shadow: 3px 3px 3px black;
width: 50vw;
max-width: 450px;
}
.frame p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
}