Trying to avoid tables with CSS 1

[JontyMC]

I have the following structure:

<div>
	<span class="colone">Some text:<span>
	<span class="coltwo">more text related to the text on the left.</span>
</div>
<div>
	<span class="colone">Some text2:<span>
	<span class="coltwo">more text related to the text on the left2.</span>
</div>

Which I want displayed like (so the first spans in each div are a set width and the second spans are aligned):

Some text:   more text related to the text on the left.
Some text2:  more text related to the text on the left2.

Trouble is, when you resize the browser, I dont want this:

Some text:   more text related
to the text on the left.
Some text2:  more text related
to the text on the left2.

I want this:

Some text:   more text related
             to the text on the
             left.
Some text2:  more text related
             to the text on the
             left2.

At the moment I'm using this code:

span.colone {margin-right: -10em; padding: 0 10em 0 1em; width: 100%;}
span.coltwo {width: 10em; vertical-align: top;}

Which works OK, but the second span overflows to the next line and there is a scroll bar at the bottom of the window because the margin of the second span is of the page.

Any thoughts appreciated.

Jon

 

[Vragabond]

First of all, your code has no way of working in standards compliant browsers, since width is not a valid attribute for an inline element, which span is. What you should do is work with two divs of percentage width and float them next to each other.

<style type="text/css">
 #wrapper {
   width: 100%;
   border: 1px solid black;
 }

 #colOne {
   float: left;
   width: 15%;
   background: red;
}

 #colTwo {
   float: left;
   width: 85%;
   background: blue;
}

 #clearer {
   clear: both;
   height: 1px;
}

</style>

<div id="wrapper">
  <div id="colOne"></div>
  <div id="colTwo"></div>
  <div id="clearer"></div>
</div>