Hi, I have found what appears to be a bug with floated elements - at least Prince renders it differently to other web browsers (including Opera).
I have a container div which holds 4 block level elements, each with a set width and floated left. The markup looks like this:
(yes I know I have closed the div element in the code above before the class attribute, it seems to be the only way for this forum to show element attributes for some reason...)
And the CSS:
So what I expect to see (and I see if Firefox and Opera) is something like this:
However, output from Prince looks like this:
So Prince is getting the bounding boxes of the elements and their horizontal positions correct, but each floated element is placed vertically underneath the last.
I have experimented with changing the widths of the elements, and applying various display: and position: properties to them to try and cure this strange behaviour, but without success.
I have also tried to achieve this layout by using dispay: table on the boxout div and display: table-cell on the inner elements, but without adding extra wrapper markup to act as a table-row, I can't get the effect I want.
Thanks,
Scott
I have a container div which holds 4 block level elements, each with a set width and floated left. The markup looks like this:
<div> class="boxout">
<h5>Element 1:</h5>
<p>Prepare and cook a light meal</p>
<h5>1.3:</h5>
<p>The meal is cooked in accordance with the instructions or the recipe.</p>
</div>
(yes I know I have closed the div element in the code above before the class attribute, it seems to be the only way for this forum to show element attributes for some reason...)
And the CSS:
#header .boxout {
float: right;
clear: both;
width: 50%;
margin-top: 0.8em;
padding: 2%;
background: white;
font-size: 0.98em;
}
#header .boxout h5 {
float: left;
width: 20%;
margin: 0;
text-align: right;
}
#header .boxout p {
float: left;
width: 75%;
margin-left: 0.5em;
margin-bottom: 0.3em;
}
So what I expect to see (and I see if Firefox and Opera) is something like this:
Element 1: Prepare and cook a light meal
1.3: The meal is cooked in accordance with
the instructions or the recipe.
However, output from Prince looks like this:
Element 1:
Prepare and cook a light meal
1.3:
The meal is cooked in accordance with
the instructions or the recipe.
So Prince is getting the bounding boxes of the elements and their horizontal positions correct, but each floated element is placed vertically underneath the last.
I have experimented with changing the widths of the elements, and applying various display: and position: properties to them to try and cure this strange behaviour, but without success.
I have also tried to achieve this layout by using dispay: table on the boxout div and display: table-cell on the inner elements, but without adding extra wrapper markup to act as a table-row, I can't get the effect I want.
Thanks,
Scott