Excuse my lack of experience, but I have a question,
I am looking to center a header and some text next to an image with variable width. Additionally, the text should be able to position on either side of the image, while still being coded first in the HTML (for mobile display purposes using media query).
I've experimented with using display:table, but it seems to conflict when floating the image.
I could potentially use PHP in Wordpress to set the width of the text div dynamically based on the page width and image width, but I'm hoping for a more elegant solution.
<!-- text left-->
<div class="l">
<div class="td">
<h2>History</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, excepturi, tenetur deleniti nemo animi repudiandae. Soluta, quia quod magnam nobis!</p>
</div>
<div class="">
<img src="images/History.jpg" alt="Our History"><!-- class="img-responsive" -->
<div style="clear: both;"></div>
</div>
</div>
<!-- text right-->
<div class="r">
<div class="td">
<h2>History</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, excepturi, tenetur deleniti nemo animi repudiandae. ...</p>
</div>
<div class="">
<img src="images/History.jpg" alt="Our History">
</div>
</div>
CSS:
* {
box-sizing:border-box;
}
.l,.r {
/* display: table; */
width:100%;
/* height: 421px; */
}
.l .td {
width:38%;
float:left;
position:absolute;
top:50%;
/* height: 421px; */
margin-top:-100px;
/* float:left; */
/*
display: table-cell;
display:table-cell!important;
vertical-align:middle;
*/
/* float:none; */
}
.l img {
float:right;
width:62%;
}
.r,.l {
position:relative;
}
.r .td {
width:38%;
position:absolute;
top:50%;
height:60%;
margin-top:-100px;
right:0;
}
.r img {
width:62%;
}
.l .td,.r .td {
padding-left:5%;
padding-right:5%;
max-height:100%;
overflow:auto;
}