Home/ Questions/Q 7783309
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T19:47:59+00:00

I want to do this: This is the HTML/CSS that I have so far,

  • 0

I want to do this:

enter image description here

This is the HTML/CSS that I have so far, but after trying various combinations of float, position absolute/relative, left, left-margin, clear, overflow, etc. I can’t get it to handle varying lengths.

<!DOCTYPE html> 
<html>
<head>
    <style>
        .container {
        }
        .leftColumn {
            float:left;
        }
        .rightColumn {
            float:left;
            left:120px;
            position:absolute;
        }
        .clear {
            clear:both;
        }
    </style>
</head>
<body>
  <div class="container">
        <div class="leftColumn">Apr 14: Title: </div>
        <div class="rightColumn">This is a text that will have a variable width, sometimes short and sometimes very, very long, sometimes short and sometimes very, very long.</div>
        <div class="clear"></div>
  </div>
  <div class="container">
        <div class="leftColumn">Apr 15: Another Title: </div>
        <div class="rightColumn">This is a text that will have a variable width, sometimes short and sometimes very, very long, sometimes short and sometimes very, very long.</div>
        <div class="clear"></div>
  </div>
  <div class="container">
        <div class="leftColumn">Apr 16: A Still Longer Title: </div>
        <div class="rightColumn">This is a text that will have a variable width, sometimes short and sometimes very, very long, sometimes short and sometimes very, very long.</div>
        <div class="clear"></div>
  </div>

</body>
</html>

What do I have to change to the a above CSS so that it handles variable length text in both columns as in the screenshot above?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    see this fiddle : http://jsfiddle.net/UHMtW/

    1) Remove all those awful empty div for clearing of floats (just use easyclearing or some other not-structural equivalent technique)

    2) You’re missing all closing </div> for every .rightColumn

    3) Use this css code [updated]

    .container {
     height: auto; overflow: hidden; width: 100%;
     margin : 0 0 20px 0;
 }
 .leftColumn {
     float:left;
     width : 120px;
 }
 .rightColumn {
     margin-left: 120px;   
 }

    of course change the width of the elements as you prefer and give some margin to .container elements

    (As aside note I would suggest to use instead a description list <dl> but this would require to set a maximum height for the left columns. Or maybe you can avoid all that <div>ification using headings and paragraphs properly)

    • 0