Hi all,

I am quite new to the world of CSS, and i've been trying to figure out how to position the .main and .comment side by side in the example at the end, with one caveat. I don't want to squeeze both into the same #container, i would like the comment to sort of "pop" out of the bounding box, and be aligned with the .main but outside of #container. The reason i want to do this is that the comment would initially be hidden and after the user clicks on something, the comment would sort of 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 tops of each .comment should line up with their respective .main. Preferably .comment should be visually outside of #container.

If anyone can give me a pointer of what to do it would be much appreciated! The HTML is not set in stone, so if there is a more convenient representation, please do advise!

<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>
  • Tangent: Designers frequently use placeholder text like you did when testing out layouts. There is a standard body of text that is designed to look more like natural text from a roman language called Lorem Ipsum. Some tools have a snippet that will insert it into your pages. TextMate's version looks like this: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. The nice thing about this is that it avoids distracting crashes like "contentSome!" This pedantry doesn't solve your current problem but I hope you find it helpful some time in the future! Cheers, Alex Alex Taylor about 7 years ago

1 answer

0
points

Here's some basic CSS that does what you describe, to turn the comments on and off you'll need some Javascript, or a link to hover over.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
        #container{
            margin-left:auto;
            margin-right:auto;
            width:700px;
            background-color:#eee9e9;
            padding:5px;
                        overflow: hidden;
        }

                #container div{
                    position: relative;
                    width: 490px;
                    float: right;
                }

                p {
                    margin: 0 0 1em 0;
                }

                .comment{
                    display: block;
                    width: 180px;
                    min-height: 60px;
                    position: absolute;
                    top: 2px;
                    left: -210px;
                    padding: 10px;
                    border: 1px solid #ccc;
                    background-color: #FFF;
                }
    </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>
Answered about 7 years ago by Tony Crockford