css equivalent of table-row

I am trying to shift my style awa开发者_运维技巧y from using tables to control formatting, but I haven't seen a simple css solution that does exactly the same thing as

<table><tr><td>aribitrary-html-A</td><td>aribitrary-html-B</td></tr><table>

All I want is to make sure aribitrary-html-A and aribitrary-html-B are aligned horizontally. I have tried various CSS concoctions using display: inline, clear: none, and float: left but they all have unwanted side-effects of moving my content around, while the table-tr solution just does what I want, regardless of what's in the arbitrary HTML, and regardless of what is in HTML that contains my table.

Am I missing something?

Why not use a grid system then like 960gs

You probably need this

<div id="wrap">
    <div id="left">
        content 1
    </div>
    <div id="right">
        content 1
    </div>
</div>


#wrap {
    width: 50%; /* change this as you wish */
}

#left, #right {
    display: block;
    float: left;
}

You need to use <div>s and decent CSS. For people that aren't confident enough (or lazy, like me) Yahoos YUI CSS Grid Builder is invaluable! Enjoy!

Maybe this might help you?

    <div style="width:400px;margin:0 auto;">
        <div style="background-color:red;float:left;height:200px;width:200px;">

        </div>
        <div style="background-color:blue;float:right;height:200px;width:200px;">

        </div>
    </div>

Just don't put your css within style attributes like I did.

Just create two Divs and align the one you want to have on the left side.

Like so (update):

<div id="wrap" style="  width:300px; 
                          margin:auto;                      
                        border: 1px solid black; 
                        padding:1px">
    <div id ="A" style="float:left; 
                        border: 1px solid black;"> aribitrary-html-A </div>

    <div id = "B" style="border: 1px solid black;"> aribitrary-html-A</div>
</div>

Update: I added a wrapper with a defined width. Also I used some borders to visualize the table-like layout. Hope that helps.

Wrap element in a div, set fixed width for the wrapper. Give each element in the div a width and set the margin to 0 auto.

Just set the CSS "float" property to left on every element you want to display horizontally, and make sure each of those elements have a set width.