ansaurus

Question

How to position two elements side by side?

Answer 1

+4 A:

Based on your comment, here is one way of achieving this:

#container { margin-left: 200px; width: 750px; } /* this is the comment area */
#container p { float: right; }
#cpmtaomer p.main { margin: 10px; width: 730px; } /* 730 + 2*10 = 750 */
#container p.comment { margin-left: -160px; width: 130px; border: 1px solid black; }

Note the use of negative margins to move the comment outside the container. I'e done a fuller example of this in negative margins in css: good tutorial and tricks site? with an example of how to put side notes on some text, which sounds a lot like what you're trying to achieve.

Additionally you could hide or show these side notes without changing the layout.

cletus 2009-11-21 04:59:32

well i think that's what is happening here, what i want to achieve is that i want .main to be in a box, and the comment to be in another box, and the top of the comment box is to the left of the main, and the top of two boxes line up. Also the item box should be visually outside of the .container. Thank you very much for your answer!

FurtiveFelon 2009-11-21 05:21:34

Answer 2

+2 A:

This is my suggestion. Have a css class for each main, comment pair. Add float: left for both 'main and comments` class.

CSS Style:

 #container{
        margin-left:auto;
        margin-right:auto;
        width:700px;
        background-color:#eee9e9;
        padding:5px;
  }
  div.item {
       clear: both;
  }
  div.item p {
       float: left;
       width: 400px;
  }
  div.item p.comment {
       padding-left: 10px;
       width: 260px;
  }

The HTML:

   <div id="container">
        <div class="item">
            <p class="main">Some content Some contentSome contentSome
            <p class="comment">Comments: some comments</p>
        </div>
        <div class="item">
            <p class="main">Some content Some contentSome contentSome
            <p class="comment">Comments: some comments</p>
        </div>
    </div>

o.k.w 2009-11-21 05:00:50

I don't think this solution works in firefox 3.5, the only perceived difference is that remove the background from the second item

FurtiveFelon 2009-11-21 05:19:21

@FurtiveFelon: Frankly, I didn't really test it first, so you are probably right:P. Anyway cletus got what you needed. +1 for him!

o.k.w 2009-11-21 07:49:20

@FurtiveFelon: I did a proper test at last, I missed out the width for the `<p>` elements hence the float doesn't work as expected. I've amended my codes above.

o.k.w 2009-11-21 07:56:02

ansaurus

tags:

views:

answers:

How to position two elements side by side?

related questions