Home/ Questions/Q 7553623
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T11:06:40+00:00

I have some trouble finding a way to position some divs next to each

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0