CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
OverflowStack
OverflowStack

Reputation: 919

Container Widens When Height Of Explorer Is Reached

For long time I haven't been able to figure out why the width of my container gets wider when the height of the browser is reached, I mean:

As seen in pictures:

1) Container hasn't reached the bottom of the screen.

2) Container has reached the bottom of the screen.

As you can see somehow in 2nd picture container width gets bigger.

Now, the given example is shown using text only, however the same thing happens if I use columns inside the main container.

Here is the code I'm using:

<form id="exmple" runat="server">
    <div class="container well" style="margin-top: 5em;">
        <div class="row">

        <!--sometext content here-->

        </div>
    </div>
</form>

What is causing this? No CSS has been modified and no custom CSS files are in use.

Upvotes: 1

Views: 35

Answers (2)

Erik Russell
Erik Russell

Reputation: 881

max-width will keep the width of your container to a maximum set amount.

Once content is added the width should not be altered.

You can obtain this through CSS

EDIT: if you want the div itself to be scrollable add the following line overflow-y: scroll; Did not know that was another thing you were looking for.

Upvotes: 1

Asons
Asons

Reputation: 87251

If you want the content to "look and have same width/position" whether there is 1 or 1000 lines, do this and there will be a scrollbar all the time.

html {
       overflow-y: scroll;
}

Upvotes: 1

Related Questions