htmlcsscss-position

CSS positioning - two elements next to each other


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!


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/