How do I prevent overflow in CSS?

Question

I have this code in CSS:

#top_bar {
width: 100%;
padding: 10px;
border: 3px solid gray;
/*margin: 0px;*/
margin-left: auto;
margin-right: auto;
position: fixed;
bottom: 0px;
}

And I run into the problem of having it overflow and I can't see the end of my status bar(because it's off of the page). It doesn't show a scroll bar(I don't want it to) but I want it to exactly hit the end the of the page, not go over it.
It is going over on the right side.

Clive · Accepted Answer · 2011-11-04 00:39:03Z

3

Take the padding off, the width is being set as 100% + 10px at the moment. You could then add the padding to a container within #top_bar eg.

#top_bar .inner {
  padding:10px;
}

<div id="top_bar">
  <div class="inner">
    ...Content...
  </div>
</div>

Or alternatively you can change the box-sizing to force the box model to ignore the padding when calculating the width:

#top_bar{
  box-sizing: border-box;
  width: 100%;
}

edited Nov 4, 2011 at 0:39

answered Nov 4, 2011 at 0:26

Clive

1

Sign up to request clarification or add additional context in comments.

1 Comment

reisio Over a year ago

Or use padding: 10px 0;, or use line-height instead of padding.

Collectives™ on Stack Overflow

How do I prevent overflow in CSS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related