Home/ Questions/Q 6556217
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T12:54:59+00:00

I’m trying to float two divs inline with each other inside a div of

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0