Divs in a row

hessodreamy · #1 (**permalink**) Feb 17th, 2006, 14:36

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>

herkalees · #2 (**permalink**) Feb 17th, 2006, 14:54

I don't know the answer (or even understand the question) to number two, but numbers one and three are answered in the results of this modified code:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Yay</title>
<style type="text/css" media="all">
div#wrap {
	margin: 0 auto; /*This centers the 4 divs*/
	width: 1000px; /*This number is necessary, it is the total of your 4 divs. Removing it ends the centering abilitly.*/
}
div.block {
	float: left;
	width: 250px;
	background-color: #cff; /*This just shows the area taken up by each div, delete when necessary*/
}
div.block img {
	background-color: #ffc; /*This just shows the area taken up by an image, delete when necessary*/
	display: block; /*This puts the image on it's own line, remove if desired*/
}
</style>
</head>
<body>
<div id="wrap">
  <div class="block"><img src="" height="100" width="100" alt="image">Some flkfqwlhfwe fweilohcfeoi
    hcfweloih cwekih coih</div>
  <div class="block"><img src="" height="100" width="100" alt="image">Some flkfqwlhfwe fweilohcfeoi
    hcfweloih cwekih coih<br>
    jhgfiuwehf<br>
    oihfoewhiofw<br>
    hhjuer<br>
    ihfoiweh<br>
    kijfeoijhoi<br>
    uuihuefwi</div>
  <div class="block"><img src="" height="100" width="100" alt="image">Some flkfqwlhfwe fweilohcfeoi
    hcfweloih cwekih coih</div>
  <div class="block"><img src="" height="100" width="100" alt="image">Some flkfqwlhfwe fweilohcfeoi
    hcfweloih cwekih coih</div>
</div>
</body>
</html>

hessodreamy · #3 (**permalink**) Feb 17th, 2006, 15:02

OK but now it won't wrap to the size of the screen.

herkalees · #4 (**permalink**) Feb 17th, 2006, 15:05

yeah, that's because of the defined 1000px width (which is necessary to make it center itself).

I'm not sure how to make both possible, but someone else might pipe up and tell you.

In the meantime, if you remove the line of CSS that states the 1000px width, you'll get the wrapping.

masonbarge · #5 (**permalink**) Feb 17th, 2006, 17:10

Center the text in the body style
Text left in the wrapper div and set Width=95% or whatever.

herkalees · #6 (**permalink**) Feb 17th, 2006, 18:40

There ya go, I'm not thinking clearly today...

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Having two divs which do not affect each other?	LGS	Web Page Design	11	Oct 28th, 2007 23:41
Style with DIVS	cyberseed	Web Page Design	5	Oct 31st, 2006 14:37
Divs in a row	hessodreamy	Web Page Design	1	Nov 15th, 2005 15:58

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Divs in a row