Geek Answers Handbook

How to place two elements side by side?

I am completely new to the CSS world, and I tried to figure out how to position .main and .comment side by side in the example at the end, with one caveat. I don’t want to compress both in the same # container, I would like this comment to look like “pop” from the bounding box and align with .main, but outside of #container. The reason I want to do this is because the comment would initially be hidden, and after the user clicks on something, the comment will look pop-open.

So, more specifically, I would like .main to be in a box and .comment in another box ..comment should be to the left of .main, and the vertices of each .comment should match their corresponding .main. Preferably .comment should be visually outside the #container.

If anyone could give me a pointer on what to do, that would be very appreciated! HTML is not installed in stone, so if there is a more convenient presentation, consult!

<html> <head> <style type="text/css"> #container{ margin-left:auto; margin-right:auto; width:700px; background-color:#eee9e9; padding:5px; } </style> </head> <body> <div id="container"> <div> <p class="main">Some content Some contentSome contentSome contentSome contentSome contentSSSSome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content</p> <p class="comment">Comments: some comments</p> </div> <div> <p class="main">Some content Some contentSome contentSome contentSome contentSome contentSSSSome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content</p> <p class="comment">Comments: some comments</p> </div> </div> </body> </html>
+4
source share
2 answers

Based on your comment, here is one way to achieve this:

 #container { margin-left: 200px; width: 750px; } /* this is the comment area */ #container p { float: right; } #container 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 fields to move comments outside the container. I made a more complete example of this in negative marks in css: a good tutorial and a trick site? with an example of how to put side notes on some text that sounds very similar to what you are trying to achieve.

In addition, you can hide or show these side notes without changing the layout.

+4
source

This is my suggestion. Have a css class for each pair main , comment . Add float: left for both main and the 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; }

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>
+2
source

More articles:


All Articles