AJP AJP - 24 days ago 8
CSS Question

CSS to simulate tables: inline divs which also have borders and break text?

I'm trying to float two divs inline with each other inside a div of set width. Additionally they have borders and content that requires wrapping. It stops working when there's more content than fits on one line.
I'm trying to be avoid using tables to solve this (see solution below) but but no luck so far. Any one got any ideas?

Edited question: expanding requirements to include:
the divs should minimise their total width and not expand beyond the boundarys of the two main 50% columns. I've managed to achieve the first and second part (please see my own answer below) however I have an additional third requirement in that as these can be nested, the content then still stays within the two main columns but doesn't expand to fill up to a maximum width of 50% of the columns width. I'm working on a javascript solution which I won't be able to post back for some time.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>

<style>
body {
width: 1024px;
}

.a_column {
width: 50%;
float:left;
}

.some_text {
float:left;
display:inline;
border: thin solid green;
}
.a_block {
float:left;
display:inline;
border: thin solid red;
/*width: I can't set this as I don't know how much some_text will need, this can vary from nothing to a lot.*/
word-wrap: break-word; /* this doesn't work without a width specified*/
}


/*solution when using tables */
.some_text_in_table, .a_block_in_table {
vertical-align:top;
}
.some_text_in_table div {
border: thin solid green;
}
.a_block_in_table div {
border: thin solid red;
word-wrap: break-word;
}

</style>

</head>
<body>

<div class="a_column">
<div class="some_text">
some text here.
</div>
<div class="a_block">
Less text and there's no problem.
</div>
</div>
<div class="a_column">
<div class="some_text">
some text here.
</div>
<div class="a_block">
Putting a lot of text into a div that you want a border around will
cause it to move down one line. Instead I'd like it to float inline
with its sibling div; you can remove the float:left but then it
completely messes up the border. An_additional_thing_I'd_like_is_for_long_sentences_to_be_broken_by_the_word_wrap,_but_this_requires_that_the_width_of
a_column be set and I can't do this as I don't always know how much
room some_text will need.
</div>
</div>
<div style="clear:both;"></div>

<h3> With tables, solution with in 7 minutes. So much easier:</h1>

<table style="table-layout: fixed; width: 100%;">
<tr>
<td colspan="2" style="width: 50%;">

</td>
<td colspan="2" style="width: 50%;">

</td>
</tr>
<tr>
<td class="some_text_in_table">
<div>
some text here.
</div>
</td>
<td class="a_block_in_table">
<div>
some text here.
</div>
</td>
<td class="some_text_in_table">
<div>
Less text and there's no problem.
</div>
</td>
<td class="a_block_in_table">
<div>
Putting a lot of text into a div that you want a border around will cause it to move down one line. Instead I'd like it to float inline with its sibling div; you can remove the float:left but then it completely messes up the border. An_additional_thing_I'd_like_is_for_long_sentences_to_be_broken_by_the_word_wrap,_but_this_requires_that_the_width_of a_column be set and I can't do this as I don't always know how much room some_text will need.
</div>
</td>
</tr>
</table>

</body>
</html>


Fiddle with my code here: http://jsfiddle.net/cdepZ/

v42 v42
Answer Source

Set your widths properly with the space you have. Borders take 2px vertically and horizontally as well.

.a_column {
    width: 512px;
    float:left;
}
.a_block, .some_text{
    width: 254px;
    float: left;
    word-wrap: break-word;
}
.a_block{
     border: 1px solid green;
}
.some_text{
     border: 1px solid red;
}

I got it working here: http://jsfiddle.net/cdepZ/7/