CSS positioning - two elements next to each other

css, css-position, html

Solution

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/

Problem

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!

Original source