Простой HTML-макет с двумя столбцами без использования таблиц

Question

Я ищу супер простой способ создания двухколоночного формата для отображения некоторых данных на веб-странице.Как я могу достичь того же формата, что и:

<table>
    <tr>
        <td>AAA</td>
        <td>BBB</td>
    </tr>
</table>

Я также открыт для методов HTML5 / CSS3.

Answer 1

несколько небольших изменений, чтобы сделать его отзывчивым

<style type="text/css">
#wrap {
    width: 100%;
    margin: 0 auto;
    display: table;
}
#left_col {
   float:left;
   width:50%;
}
#right_col {
   float:right;
   width:50%;
}
@media only screen and (max-width: 480px){
    #left_col {
       width:100%;
    }
    #right_col {
       width:100%;
    }
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>

Answer 2

<div id"content">
<div id"contentLeft"></div>
<div id"contentRight"></div>
</div> 

#content {
clear: both;
width: 950px;
padding-bottom: 10px;
background:#fff;
overflow:hidden;
}
#contentLeft {
float: left;
display:inline;
width: 630px;
margin: 10px;
background:#fff;
}
#contentRight {
float: right;
width: 270px;
margin-top:25px;
margin-right:15px;
background:#d7e5f7;
} 

Очевидно, вам нужно будет настроить размер столбцов в соответствии с вашим сайтом, а также цветами и т. Д., Но это следует сделать. Вам также необходимо убедиться, что ширина вашего ContentLeft и ContentRight не превышает ширину содержимого (включая поля).