5 replies [Last post]
mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 2 years 20 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Puzzled 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! Big smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 25 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9057
Points: 3026

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

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 2 years 20 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

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.

Big smile

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 2 years 20 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

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!!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 25 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9057
Points: 3026

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

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 2 years 20 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Ohhhh... okay, I see now.

Ohhhh... okay, I see now. Thanks so much for explaining this to me!!!! Big smile