I am having this issue when going through a php loop where not all of my test is being aligned to the right of an image. Currently my app is utilizing phpexcel and reading off of a sales order spreadsheet where it displays an image for that product, the product id, size, and quantity. I have found that if there is more than one specified quantity it is not being aligned. See example photo: http://i.stack.imgur.com/QeRuC.png My php loop is the following:
echo "<html>
<head>
<link rel='stylesheet' type='text/css' href='mycss.css'>
</head>
<header>
<h3>Run Date: " . $runDate . "
PO# " . $poNumber . "
Start: " . $startDate . " End: " . $endDate . "
Total Piece Count: " . $totalQuantityCount . "</h3>
</header>
<body>
";
//this for loop generates the report
$VendorSkus = array();
for ($x = 13; $x <= $highestRow; $x++) {
if ($sheetData[$x]["E"] != null) {
if (!in_array($sheetData[$x]["J"], $VendorSkus)) {
echo "
</br/>
<div class='content'>
<img src='/images/" . $sheetData[$x]["J"] . ".jpg' alt='' height='262' width='262'>
" . $sheetData[$x]["J"] . "<br/>";
echo $sheetData[$x]["E"] . "</div>";
}
echo "
<div class='container clearfix'>
Size: " . $sheetData[$x]["M"] . "Qty: " . $sheetData[$x]["N"] . "
</div>
";
echo "
";
$VendorSkus[] = $sheetData[$x]["J"];
}
}
echo "
</body>
</html>";
I have tried adding more div tags and moving things outside of the forloop but I cannot seem to figure it out. Also just in case, here is the css file:
clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* ie 6/7 */
}
.content img {
margin-right: 15px;
float: left;
}
.res {
height:60px;
background-color:yellow;
border-bottom:1px solid black;
}
img, .text{
vertical-align:top;
}
.text{
display:inline-block;
}
p, h5{
margin:0;
padding:0;
}
Do you guys have any idea of what I am missing?
The HTML/CSS you need could look as follows.
Wrap the description and quantity text lines in a separate container and use overflow: auto to establish block formatting contexts to keep the text blocks from wrapping around the floated image.
You will need to port this to you PHP script, but this solves the CSS issue.
In your original code, I think that you were clearing your floats prematurely so they were wrapping around the image in an unexpected manner.
.panel {
overflow: auto;
}
.panel img {
float: left;
margin-right: 20px;
}
.panel .desc {
overflow: auto;
border: 1px dotted blue;
}<div class="panel">
<img src="http://placehold.it/200x100">
<div class="desc">
<p>Description text...</p>
<p> Size: 1 Qty: 1</p>
<p> Size: 2 Qty: 2</p>
<p> Size: 3 Qty: 3</p>
<p> Size: 4 Qty: 4</p>
</div>
</div></div>