CODEWITHSUNDEEP
htmlcss
Jurudocs
Jurudocs

Reputation: 9175

Positioning mutiple div elements on the right to each other within a fixed parent div element

I have some trouble finding a way to position some divs next to each other (to the right) so that there is a horizontal scroll bar and not a vertical scroll bar)...Has someone a hint? http://jsfiddle.net/WRT6E/2/

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            html,body{
                height: 100%;
                width:100%;
            }
            .static{
                position:fixed;
                top:30%;
                width:20%;
                left:10%;
                height:20%;
                overflow:scroll;
                float:right;
                display:inline;
            }
           .static div{
                float:right;
                display:inline;
            }
        </style>
    </head>
    <body>
    </body>
    <div class="static">

        <div>
            <h1>Test Headline</h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>

                <div><h1>Test Headline2</h1>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
    </div>


</html>

Upvotes: 1

Views: 61

Answers (1)

Dampsquid
Dampsquid

Reputation: 2474

Does JSFiddle

do what you wanted, Ive used another internal DIV to grow and hold the 2 float right DIVs, and setup a javascript to size the 2 divs so that the height is less than the holding DIVs height.

If you even add margin, border or paddings the code will need modifying to take those into account.

Update

updated the Fiddle i forgot to take the scroll into account done a crude reduction of the height for now and changed holding DIV's overflow to auto to remove the vertical scroll

Upvotes: 2

Related Questions