I mocked this up in Xara, but I would like to code this by hand. I can not figure out how to get even margins on the two side circles and have them with side captions that line up properly. I don’t want to use exact placements, since I want this to be a responsive design. I’ve tried some different combinations of things with tables, aside, etc. and different forms of css. Maybe I’m just doing something wrong. Any tips? I’m so close, but not quite there. What I currently have is below

Post image

<style>

div.big-con{

position: relative;

max-height: 320px;

max-width: 60%;

}

div.lit-con{

max-width:15%;

position:relative;

float:right;

}

.big-rnd{

width:75%;

float:left;

position:relative;

}

.lit-rnd2,

.lit-rnd1{

right:50%;

position:relative;

width:20%;

margin-top:15%;

}

p.caption{

color:darkcyan;

font-size:32px;

}

p.caption{

right:75%;

}

</style>

<div>

<div><div class=”big-con”>

<img class=”big-rnd” src=”images/dog.png” alt=””></div></div>

<aside class=”lit-con”>

<table>

<tr><th><img class=”lit-rnd1″ src=”images/dog.png” alt=””></th><th><p class=”caption”>Wellness Exam</p></th></tr>

<tr><th><img class=”lit-rnd2″ src=”images/dog.png” alt=””></th><th><p class=”caption”>Nope</p></th></tr>

</table>

</aside>

		</div>



Source link

Write A Comment