CSS positioning - two elements next to each other

Question

Ok, I know this question has been here at least hundred of times but this positioning is driving me crazy - can someone help me?

I have a portlet page (its basically html) with a table and a div tag. I would like to position them next to each other (table on the left, div on the right). Here are parts of my html:

<div id="page>

 <table id="logtable">
  ...
 </table>

 <div id="divMessage>
  ...
 </div>
</div>

...and CSS:

#page {
    width: 1200px;
    margin: 0px auto -1px auto;
    padding: 15px;
}

#logtable {
    width: 800px;
    float: left;
}

#divMessage {
    width: 350px;
    position:relative;
    right:-5px;
    top: -20px;
}

I have tried various positions - absolute, fixed, float etc, but I cant seem to get it right... Thanks for any help!

Answer 1

You could use...

float: left;

on your div 'logtable'

I would advise using DIVs to do you alignment of content so wrap the table in a DIV. I also prefer to use inline-block over float left and gives more predictable results.

so...

<div id="page">
 <div id="divTable" class="InsideContent">
     <table id="logtable">
      Left
     </table>
  </div>

 <div id="divMessage" class="InsideContent">
  Right
 </div>
</div>

#page {
    width: 1200px;
    margin: 0px auto -1px auto;
    padding: 15px;
}
.InsideContent{
    display:inline-block;
}
}
#divTable {
    width: 800px;
}
#divMessage {
    width: 350px;
}

Code needs tidying up but you get the idea...

JSFiddle http://jsfiddle.net/3N53d/