Two Column DIVs that expand with content inside - css

Question

I'm trying to create a page with two divs inside a content div to act as columns. While I understand that this is a question that is often asked here, the difference is, I need the left side to be a title for the corresponding content on the right, but the content on the right will differentiate in height, and I need this to affect where the next title below on the left will appear.
Below is an image of how I want this to work, and how I'm guessing it can be done?
http://i.stack.imgur.com/aY8bt.png
Currently I'm doing this with HTML tables, which we all know is messy!
Many thanks in advance!
Dylan

Answer 1

without table, we can do it like this:
<div id="master">
<div class="title">TITLE A</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac velit risus. Donec et libero erat. Pellentesque eros libero, lobortis eu diam accumsan, commodo tincidunt diam. Integer nec tincidunt dui.</div>
<div class="magicClear"></div>
<div class="title">TITLE B</div>
<div class="content">Tiny content with tiny height</div>
<div class="magicClear"></div>
<div class="title">TITLE C</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac velit risus. Donec et libero erat. Pellentesque eros libero, lobortis eu diam accumsan, commodo tincidunt diam. Integer nec tincidunt dui.</div>
<div class="magicClear"></div>
</div>
css :
#master {
width: 650px;
margin: auto;
}
.title {
float: left;
width: 100px;
}
.content {
width: 450px;
padding-left: 100px;
margin-bottom: 20px;
}
.magicCLear {
clear: both;
}
http://jsfiddle.net/djedjex/GU7RW/1/

Answer 2

try this one
table
{
border:none;
}
table td:first-child
{
border-right:2px solid #000;
text-align:right;
}
table td
{
padding:10px;
vertical-align:top;
min-width:100px;
}
http://jsfiddle.net/GRX99/2/

Answer 3

if you used table tags, you can turn them into regular tags and use display:table / table-cell :
demo : http://codepen.io/anon/pen/aEBkA
HTML BLOCK for your title > content . use as many as needed.
<article>
<h1>titre</h1>
<div>
<p>text</p>
<p>and text again</p>
</div>
</article>
and minimal CSS:
article {
display:table;
table-layout:fixed;
/* tune next 2 rules */
width:80%;
margin:auto;
}
article h1,
article div {
display:table-cell;
padding:0.5em;
}
article h1 {
width:15%;
border-right:solid;
}

Answer 4

You can also do something fluid, Bootstrap inspired.
<div>
<div class="row">
<div class="span2">
<p>Title A</p>
</div>
<div class="span10">
<p>Very long content</p>
</div>
</div>
<div class="row">
<div class="span2">
<p>Title B</p>
</div>
<div class="span10">
<p>Another very long content</p>
</div>
</div>
</div>
And the CSS:
[class*="span"] {
float: left;
}
.span2 {
width: 20%;
}
.span10 {
width: 80%;
}
.span2 p {
float: right;
}
You have to adjust margins/paddings, but that's it.