I am trying to float text around images, where some of the text needs to be floated right, some left, and leaving odd amounts of space. I have something that works in a browser, but not when Princed.
I'm not attached to this approach; if there's a cleaner way to do this, I would love to hear about it.
Any help would be appreciated.
What I have is a "masked_figure" class that contains
1. an absolutely positioned "mask_bg", with the actual image
2. some left and right spacers, which float to either side.
The HTML is:
<div class="example_page">Staynes1912 _032.mask.jpg - redone<div class="figcenter">
<div class="masked_figure" id="Staynes1912_032">
<div class="mask_bg"><img alt="Staynes1912_032" src="_032.mask.jpg" width="100%" /></div>
<div class="lspacer" style="width: 64%; height: 1.68in;">
</div>
<div class="rspacer" style="width: 100%; height: 0.67in;">
</div>
<div class="rspacer" style="width: 62%; height: 1.07628865979381in;">
</div>
<div class="rspacer" style="width: 100%; height: 0.0463917525773196in;">
</div>
<div class="rspacer" style="width: 47%; height: 2.58865979381443in;">
</div>
</div>
</div>
<p>hello hello hello hello hello hello hello hello hello hello
hello hello hello hello hello hello hello hello hello hello
...
</p>
<p>hello hello hello hello hello hello hello hello hello hello
hello hello hello hello hello hello hello hello hello hello
...
</p>
</div>
And, the relevant CSS looks like this:
.masked_figure{
display: block;
background: pink;
width: 100%;
width: 4.5in;
height: auto;
border: 4px solid red;
border-bottom: 4px dotted yellow;
text-align: center;
position: relative;
}
.mask_bg{
position: absolute;
top: 0;
left: 0;
border: 3px dotted navy;
background: orange;
width: 100% !important;
margin: auto;
z-index: -5;
}
.mask_bg img{
min-width: 100%;
}
.rspacer{
display:block;
float:right;
clear:right;
}
.lspacer{
display: block;
float:left;
clear:left;
}
I'm not attached to this approach; if there's a cleaner way to do this, I would love to hear about it.
Any help would be appreciated.
What I have is a "masked_figure" class that contains
1. an absolutely positioned "mask_bg", with the actual image
2. some left and right spacers, which float to either side.
The HTML is:
<div class="example_page">Staynes1912 _032.mask.jpg - redone<div class="figcenter">
<div class="masked_figure" id="Staynes1912_032">
<div class="mask_bg"><img alt="Staynes1912_032" src="_032.mask.jpg" width="100%" /></div>
<div class="lspacer" style="width: 64%; height: 1.68in;">
</div>
<div class="rspacer" style="width: 100%; height: 0.67in;">
</div>
<div class="rspacer" style="width: 62%; height: 1.07628865979381in;">
</div>
<div class="rspacer" style="width: 100%; height: 0.0463917525773196in;">
</div>
<div class="rspacer" style="width: 47%; height: 2.58865979381443in;">
</div>
</div>
</div>
<p>hello hello hello hello hello hello hello hello hello hello
hello hello hello hello hello hello hello hello hello hello
...
</p>
<p>hello hello hello hello hello hello hello hello hello hello
hello hello hello hello hello hello hello hello hello hello
...
</p>
</div>
And, the relevant CSS looks like this:
.masked_figure{
display: block;
background: pink;
width: 100%;
width: 4.5in;
height: auto;
border: 4px solid red;
border-bottom: 4px dotted yellow;
text-align: center;
position: relative;
}
.mask_bg{
position: absolute;
top: 0;
left: 0;
border: 3px dotted navy;
background: orange;
width: 100% !important;
margin: auto;
z-index: -5;
}
.mask_bg img{
min-width: 100%;
}
.rspacer{
display:block;
float:right;
clear:right;
}
.lspacer{
display: block;
float:left;
clear:left;
}