Sat, 2011-11-19 00:58
Hello,
This may seem like a really simple thing to do but I need to create a tableless layout which will include 5 rows and two columns. In the left column on each row will be thumbnail images. In the right column will be the content. I do not want the content to wrap around the image.
I have been researching the best way to create this and I keep finding different ways. Some use divs, some just say to float the image and add padding, etc. I am hoping to receive some recommendations on the best approach for this which is also cross-browser compatible.
Thank you! 
Sat, 2011-11-19 01:38
#1
Structure
If I read you right, you want stacked blocks, each block consisting of an image to one side and text, &c. on the other. You want these blocks to not overlap or otherwise affect the other blocks. For example:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test document</title> <style type="text/css"> .item { border: 1px dotted #ddd; margin: 1.2em 0; overflow: hidden: /*encloses float elements*/ } .photo { float: left; width: 200px; /*Set for your situation. May be left to shrink-wrap if desired, but different width images will cause a ragged edge for the item-text.*/ } .item-text { overflow: hidden; /*Creates a new block formatting context, which is a rectangle that is aware of the float element beside it.*/ } </style> </head> <body> <h1>Stuff</h1> <div class="item"> <p class="photo"><img src="my-tnail.jpg" alt="photo of item"></p> <div class="item-text"> <h2>item heading</h2> <p>Something about this item</p> </div> </div> <div class="item"> <p class="photo"><img src="my-tnail.jpg" alt="photo of item"></p> <div class="item-text"> <h2>again with the item heading</h2> <p>Something about another item.</p> </div> </div> <div class="item"> <p class="photo"><img src="my-tnail.jpg" alt="photo of item"></p> <div class="item-text"> <h2>yet another item heading</h2> <p>Something about this item</p> </div> </div> </body> </html>
It may be that this should be marked as a list, in which case, <li> would replace <div class="item">, and css would reflect the difference.
cheers,
gary
Sat, 2011-11-19 02:09
#2
Thanks so much Gary. This is
Thanks so much Gary. This is exactly what I need. This code looks much more clean and simple than what I was seeing in other places online when researching the best solution. Many of the other solutions worked but they just seemed more complicated than what I needed and also I was having a hard time keeping the text from wrapping when shrinking the screen size down after a certain size.
Thanks again for the learning lesson and taking the time to respond.
Sun, 2011-11-27 22:40
#3
Hi Gary or anyone else
Hi Gary or anyone else reading this. This code works great when testing via Dreamweaver and browsers. The only browser that had display issues was Safari. When I placed the code into our CMS it broke the template. The company that manages our custom CMS said that the opening and closing <div> tags do not match.
Should I be placing a closing </div> tag after the <div class="item">? For example:
That is the only place where I do not see a closing tag?
I experimented and added closing </div> tags after the code below and it looks great in Safari now but I still need to test within the CMS. I am just wondering about comments made about the opening and closing
tags not matching.
<div class="item"> <p class="photo"><img src="my-tnail.jpg" alt="photo of item"></div></p>
Thanks!!
Sun, 2011-11-27 23:38
#4
Formatting
Formatting can make all the difference. It lets you (sometimes) see at a glance whether everything is kosher. My example broke one of my own formatting rules; siblings should be separated by an empty line. Nested block elements are separated by indention. Inline elements depend on what conveys the structure best. Attribute are one to a line. Look at this snippet properly formatted.
<div class="item"> <p class="photo"> <img src="my-tnail.jpg" alt="photo of item"> </p> <div class="item-text"> <h2>item heading</h2> <!-- single lines may be closed on same line --> <p>Something about this item</p> </div> </div> <!-- empty line separates this from the following sibling --> <div class="item"> <p class="photo"> <img src="my-tnail.jpg" alt="photo of item"></p> <!-- p elements may be closed on same line --> <div class="item-text"> <h2>again with the item heading</h2> <p>Something about another item.</p> </div> </div>
Notice how obvious the structure becomes. A good formatting scheme will make errors easier to spot, and less likely to happen in the first place.
Your example above shows a common error, mismatched closing tags. Notice the ordering; <div><p></div></p>. You need to close the inner element before closing its parent. Notice that you cannot follow the formatting rules without fixing the mismatched closing tags.
cheers,
gary
Mon, 2011-11-28 01:19
#5
Ohhhh... okay, I see now.
Ohhhh... okay, I see now. Thanks so much for explaining this to me!!!!