HTML Issues with images

[KLBone]

I'm having some issues with our HTML. Attached is the new version of our website that I'm working on but the pictures need to be in a horizantal line rather than the diagonal that they're currently in. The images are coded from our /admin.php site so they aren't directly linked in the code- is this what is causing the issue? Below is the code- any thoughts? I've tried everything that I know. The //fixed highlights are the smaller images up top and the //slideshow is the larger image... The website before hade the slideshow at the top and the fixed highlights at the bottom and we just want to flip it. // fixed highlights $html = ''; $displayed = 0; $slide = unserialize(file_get_contents('images/home/highlights.txt')); if (count($slide)) { foreach ($slide as $key=>$param) { if ($param['active'] && ($displayed < 3)) { $html .= '<td>'; if ($param['URL']) $html .= '<a href="' . $param['URL'] . '">'; $html .= '<img src="/images/home/' . $param['image'] . '.jpg" width="250" height="150" border="0" alt="" style= float:left;/><br />'; if ($param['title']) $html .= '<h4>' . $param['title'] . '</h4>'; if ($param['URL']) $html .= '</a>'; $html .= '</td>' . "\n"; $displayed++; } } } if ($displayed) { print('<tr valign="top">' . "\n" . $html); if ($displayed < 3) { for ($i=$displayed; $i<3; $i++) print('<td style="width: 250px;"></td>' . "\n"); } print('</tr>' . "\n"); } // slideshow $html = ''; $slide = unserialize(file_get_contents('images/home/spotlight.txt')); if (count($slide)) { foreach ($slide as $key=>$param) { if ($param['active']) { $html .= '<div class="slide">'; if ($param['URL']) $html .= '<a href="' . $param['URL'] . '">'; $html .= '<img src="/images/home/' . $param['image'] . '.jpg" width="800" height="400" border="0" alt="" />'; if ($param['URL']) $html .= '</a>'; if ($param['title'] || $param['subtitle']) { $html .= '<div class="caption">'; if ($param['title']) $html .= $param['title'] . '<br />' . "\n"; if ($param['subtitle']) $html .= '<span class="subtitle">' . $param['subtitle'] . '</span>' . "\n"; $html .= '</div>' . "\n"; } $html .= '</div>' . "\n"; } } } if ($html) print('<div id="slideshow">' . "\n" . $html . "\n" . '</div>' . "\n" . '<div id="slidenav"></div>' . "\n"); // open lower grid print('<table cellpadding="0" cellspacing="25" border="0" style="margin: 0px -25px 0px -25px;">' . "\n"); // second row -- feeds and connect links if (dbconnect()) { print('<tr valign="top">' . "\n"); // news $sql = 'SELECT *,DATE_FORMAT(posted,"%M %e") AS pdate FROM news ORDER BY highlight DESC, posted DESC LIMIT 1'; $result = mysql_query($sql); if (mysql_num_rows($result)) { print('<td><h5>News</h5><p>' . "\n"); $row = mysql_fetch_assoc($result); mysql_free_result($result); print('<a href="' . ($row['url'] ? $row['url'] . '" target="_blank' : '/about/news.php?id=' . $row['ID']) . '">'); print($row['title'] . '</a><br />' . "\n" . '<span class="date">Posted ' . $row['pdate']); if ($row['source']) print('</span></p>' . "\n"); print('<p><a href="/about/news.php" class="social news">more news...</a></p>' . "\n"); print('</td>' . "\n"); }

[niche]

Please post the html your code generates. EDIT Or, provide a link to your work in progress.

Edited June 11, 2012 by niche

[Ingolme]

It looks like you've floated the images but not the text. (I might even assume you were using the "align" attribute) What you should do is put both the text and the image into a container, and then float the container.

<div class="container">    <p>Text 1</p>    <img src="Image1" alt="Image 1"></div><div class="container">    <p>Text 2</p>    <img src="Image1" alt="Image 1"></div>

.container {    text-align: center;    float: left;}

}