There seems to be an issue with excessive white space between the nested divs .boxwrap and .lsmlbox + .rsmlbox, making it difficult to align .smlbox + .rsmlbox with .box. Is this problem more complex than anticipated?
I am hoping to adjust the "inner" (center of screen) margins of .lsmlbox and .rsmlbox based on screen size, while keeping the outer borders "sticky" to .boxwrap so that the boxes shrink in width but maintain alignment with the full-sized .box above.
.box
{
margin-left:5%;
margin-right:5%;
margin-bottom:80px;
}
.boxheader
{
font-size:17pt;
letter-spacing:3px;
padding-bottom:10px;
text-transform:capitalize;
}
.boxcontent
{
text-align:left;
border: 1px dotted #000000;
border-top: 0px;
border-bottom: 0px;
padding-left:15px;
padding-right:15px;
letter-spacing:3px;
}
.boxwrap
{
margin:0 5%;
}
.lsmlbox
{
display:inline-block;
max-width: 30%;
margin-bottom:80px;
margin-right:4%;
vertical-align:top;
}
.rsmlbox
{
display:inline-block;
max-width:30%;
margin-bottom:80px;
margin-left:4%;
vertical-align:top;
}
HTML:
<div class="box">
<div class="boxheader">SLDKFJSDLFKJSDLKJF.</div>
<div class="boxcontent">
SDFSDFLSDFSDFLKJ
</div>
</div></div>
<div class="boxwrap">
<div class="lsmlbox">
<div class="boxheader">Meet the Owner</div>
<div class="boxcontent">SDFSDFSDF</div></div>
<div class="rsmlbox">
<div class="boxheader">Your Best Source Since 1977</div>
<div class="boxcontent">
SDFSDFSDFSDFSDF
</div></div>
</div>
Edit: removed floating divs but encountering a new challenge now.