CODEWITHSUNDEEP
htmlcssscrollbar
Chris
Chris

Reputation: 26888

Negative margin and scrollbars

I have something like this currently:

<div class = "className" style = "position: absolute; left: 50%; margin-left: -500px;" >

This works just fine when the browser's window is large enough (more than 1000px wide), but when I resize it to a smaller width, part of the div overflows to the left and the scrollbar doesn't cover the overflowed area. I tried it on Firefox, Chrome and IE8, all result in the same symptoms. How can I fix this? Here's a demo: http://pastehtml.com/view/bsanetaio.html (try resizing your browser window to a width smaller than 1000px to see the problem).

Upvotes: 3

Views: 3574

Answers (3)

the Hutt
the Hutt

Reputation: 18408

Here is one way to achieve this:

<html>
  <head>
    <style>
      #container {
        margin: 0 auto;      /* if you want center the container */
        white-space: nowrap; /* get all divs on one line, don't need this if fixed width used */
        width: min-content;  /* you can use fixed size*/
      }
      #container div {
        display: inline-block;
        margin: 0 10px;
        width: 320px;
        height: 300px;
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <div id="title"> Welcome! </div>
    <div id="container">
      <div> Data, data, data<br />data data, data </div>
      <div> Data, data, data<br />data data, data </div>
      <div> Data, data, data<br />data data, data </div>
    </div>
  </body>
</html>

Upvotes: 0

diolemo
diolemo

Reputation: 2671

This should achieve the desired effect. Notice that the inner div does not have position absolute. 

<div style="position: absolute; left:50%">
  <div style="width: 1000px; margin-left: -500px;">

  </div>
</div>

There may be a better way to do what you are trying to do though.

Upvotes: 1

sandeep
sandeep

Reputation: 92793

It's better you can use margin:0 auto for center the content. It's better then absolute

Upvotes: 0

Related Questions