Home/ Questions/Q 961853
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T01:24:42+00:00

I have a list like this: <html> <head> <link type=text/css rel=stylesheet href=testli.css> </head> <body>

  • 0

I have a list like this:

<html>

  <head>
      <link type="text/css" rel="stylesheet" href="testli.css">
  </head>

  <body>
      <ul id='grok'>
          <li>
              <img src='na' class='cimg' />
              <div class='cinner'>
                  <p>Title, max two lines.</p> 
                  <p>Some longish text, max two lines, causes problems when too long.</p>
              </div>
              <div style='clear:both'></div>
          </li>

          <li>
              <img src='na' class='cimg' />
              <div class='cinner'>
                  <p>Title</p>
                  <p>Some longish text here which may wrap some and cause problems..</p>
              </div>
              <div style='clear:both'></div>
          </li>

      </ul>

  </body>
</html>


// testli.css
* {
  margin:0;
  padding:0;
}

#grok {
  list-style-type: none; 
  width: 200px;
}

#grok li {
  background-color: lightgreen;
  margin: 5px; 
  padding: 5px;
  text-align: left;
}

.cimg {
  width:70px;
  height:44px; 
  float:left;
}

.cinner {
  float: left;
  margin: 0px;
  padding: 0px;
  margin-left: 10px;
  font:14px;
}

when the text in the p elements is short, the layout behaves as I want – the thumbnail and the text should appear as if they’re in two separate columns. I’m basically looking to recreate the thumbnails youtube has for recommended items – thumbnail on the left, some text in another column to the right of it. Title and text each allowed two lines of text each.

If the text is too long, the cinner div gets placed below the thumbnail. What’s the right way to force it to always be to the right?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could do it by setting a min-height on the <li> and then absolutely positioning the image to the left of the title and description:

    #grok {
   list-style-type: none; 
   width: 200px;
}

#grok li {
   position: relative;
   margin: 5px; 
   padding: 5px;
   min-height: 44px;

   /* min-height fix for IE6.  Ideally this would be in an IE6 only stylesheet */
   height: auto !important;
   height: 44px;

   background-color: lightgreen;
}

.cimg {
   position: absolute;
   left: 0;
   top: 0;
   width: 70px;
   height: 44px;        
}

.cinner {       
   padding: 0 0 0 80px; /* Makes room for the image so it doesn't overlap text */
   font: 14px;
}
    • 0