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/

Answer 2

Use float:left on the element which should be on the left and float:right on the right one. Keep in mind that if the sum of their widths exceeds the available space in the parent element they will be split into two lines anyway.

Answer 3

Here you go , no need of right:-5px;

#divMessage {
    width: 350px;
    position: relative;
    top: -20px;
    float: left;
}

Answer 4

I see that you forgot closing the quotes at <div id="page>, this might cause some problems, but basically you have to use:

float: left;

for the last div.

I have created this JSFiddle for you to see if this fits your needs.

Answer 5

You can just use display: inline-* to put them side by side in a row

#logtable {
    width: 800px;
    display: inline-table;
}

#divMessage {
    width: 350px;
    display: inline-block;
}

JSFiddle

Answer 6

Just try this.

Fiddle

CSS

#logtable {
    width: 500px;
    float: left;
    background:red;
}

#divMessage {
    width: 350px;
    position:relative;
    float:left;
    background:blue;
}

Answer 7

try this:

 <table id="logtable">
    <tr>
        <td>
            table area
        </td>
     </tr>
 </table>

 <div id="divMessage">
  div area
 </div>
</div>  
#page {
    width: 800px;
    margin: 0px auto -1px auto;
    padding: 15px;
    border:red solid 1px;
    height:170px;
}
#logtable {
    width: 400px;
    height:150px;
    float: left;
    border: blue dashed 1px;
}

#divMessage {
    width: 350px;
    height:150px;
    right:-5px;
    top: -20px;
    border: green dashed 1px;
    float:right;
}

here is a smaple

Answer 8

In simple we can do like this:

table#logtable, div.divMessage{
 display:inline-block;
}

Or

table#logtable, div.divMessage{
 float:left;
 width:50%;
}