I am quite certain that I am finding the hardest way to do this as possible, but here goes.
I want to have two images side by side (or an image and a side bar) in my epub. The epub does not agree. I tried using a table, which worked quite well in Sigil, and then was completely stripped in Adobe DE. So now I'm attempting via nested divs, but from what I've tested so far, they're not scalable and will cut off with the wrong sized screen. Anyone have a better way? I've been trying to find epubs to check examples, but haven't lucked out yet.
This is what I have so far, which ADE stacks instead of having them side by side. It's been a very frustrating day, to say the least. Thanks in advance for any help!
Code:
<style type="text/css">
.outerDiv {
border:none;
width:500px;
height:350px;
position:relative;
color:#000000;
font-family:times;
font-weight:normal;
font-size:0.75em;
text-align:center;
}
.nestedDivL {
background-color:#FFFFF;
width:249px;
position:absolute;
top:10px;
left:10px;
}
.nestedDivR {
background-color:#FFFFF;
width:249px;
position:absolute;
top:10px;
right:10px;
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="nestedDivL">
<img alt="family3" src="../Images/2museum.jpeg" />
<p>Headed to the museum.</p>
</div>
<div class="nestedDivR">
<img alt="family2" src="../Images/2park.jpeg" />
<p>Catch in the park.</p>
</div>
</div>
</body>
</html>