I'm trying to scrap the awful table layout on the site i'm working on, to make it more fluid.
Where there were, say, 4 td elements in a row, I wanted it to resize to the screen so you could have more elements, or less. I've put a bunch of divs in a row and let them wrap according to space.
You can see where I'm up to here:
http://www.aocd00.dsl.pipex.com/files/floor.php
I've got so far with this but am having a few problems:
1. how do i center the layout, such that however many divs fit on a line, with equal space on each side of the page?
2. If the content of one of the divs pushes its height beyond the height of its neighbours, then any subsequent wrapping is this extended div, rather than the beginning of the line (kind of hard to explain this - see the link). Can I force it to wrap to the next line?
3. I've stuck with table layout within each div as i couldn't get the text to align vertically otherwise. How do i do this without tables?
Here's code:
- Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="float:left">
<table width="250">
<tr>
<td>
<img src="images/emailchair.gif" height="100" width="100">
</td>
<td>
Some flkfqwlhfwe fweilohcfeoi hcfweloih cwekih coih
</td>
</tr>
</table>
</div>
<div style="float:left; height:150px;">
<table width="250" >
<tr>
<td>
<img src="images/emailchair.gif" height="100" width="100">
</td>
<td>
Some flkfqwlhfwe fweilohcfeoi hcfweloih cwekih coih<br>jhgfiuwehf<br>oihfoewhiofw<br>hhjuer<br>ihfoiweh<br>kijfeoijhoi<br>uuihuefwi
</td>
</tr>
</table>
</div>
<div style="float:left">
<table width="250">
<tr>
<td>
<img src="images/emailchair.gif" height="100" width="100">
</td>
<td>
Some flkfqwlhfwe fweilohcfeoi hcfweloih cwekih coih
</td>
</tr>
</table>
</div>
<div style="float:left">
<table width="250">
<tr>
<td>
<img src="images/emailchair.gif" height="100" width="100">
</td>
<td>
Some flkfqwlhfwe fweilohcfeoi hcfweloih cwekih coih
</td>
</tr>
</table>
</div>
</body>
</html>