CODEWITHSUNDEEP
css
Lukáš Ježek
Lukáš Ježek

Reputation: 75

CSS div shifts when its height reaches the screen resolution

I don't know why but when the height of the content_second_box is set higher then the height of the screen resolution then the whole page shifts left by a few pixels. Once the div reaches the bottom of the screen it shifts, when the height does not reach then it is ok. I have tried many things but nothing has worked. Does anyone please know why?

CSS is as follows:

body {
background-color: white;
}

#container { 

        position: relative;

        width: 1300px;

        margin-left: auto;

        margin-right: auto;

        padding: 10px 50x 30px 50px; 

}

#content { 

        width: 1000px;

        margin-left: auto;

        margin-right: auto;

        padding: 40px 0px 0px 0px;

        /*text-align: center;*/

}

#content_first_box {

        width: 225px;
        height: 50px; 
     /* min-height: 160px; */
    /*  height: auto !important; */ 

        background-color: #ff8b00; /*#9caad6;*/
        border-radius:5px;
        box-shadow: 3px 3px 5px #888888;
        padding: 5px 5px 5px 5px;
        overflow: hidden;
        float: left;
        text-align: center;
        margin-right: 15px;

}

#content_second_box {

        width: 225px;
        height: 500px; 
     /* min-height: 160px; */
    /*  height: auto !important; */ 

        background-color: #79bbff; /*#9caad6;*/
        border-radius:5px;
        box-shadow: 3px 3px 5px #888888;
        padding: 5px 5px 5px 5px;
        overflow: hidden;
        float: left;
        text-align: center;
        margin-right: 15px;

}


HTML file is as follows:

    <body>
    <div id="container">
    <div id="content">
      <div id="content_first_box">text</div>  
      <div id="content_first_box">text</div>
      <div id="content_first_box">text</div>
      <div id="content_first_box">text</div>

      <div id="content_second_box">text druhy</div>
      <div id="content_second_box">text druhy</div>
      <div id="content_second_box">text druhy</div>
      <div id="content_second_box">text druhy</div>
    </div> 
    </div>

    </body>

Upvotes: 0

Views: 244

Answers (2)

Dipak
Dipak

Reputation: 12190

You can get rid of the content shift by always showing the scrollbar in browser as - 

html{
    overflow-y: scroll;
}

Upvotes: 1

Scott
Scott

Reputation: 21892

The scroll bar appears once the page is longer than the viewport. This causes all content to shift left to allow for the scrollbar.

Upvotes: 2

Related Questions