Reputation: 544
I wrote CSS for screen size bigger than 1100 px. When I press ctrl and +(plus) sign and zoom in the center container of the page can't wrap. It breaks suddenly.
HTML:
<div id="outer_footer_bottom">
<div class="center">
blabla balaa blabalblabla
</div>
</div>
CSS:
<style>
#outer_footer_bottom{
width: 100%;
float: left;
background: #8ac53f;
height: 26px;
padding: 16px 0 0 0;
text-align: center;
color: #fff;
overflow-x: auto;
}
.center {
width: 1000px;
margin: 0 auto;
}
</style>
Upvotes: 1
Views: 1113
Reputation: 1520
the problem is in your code.
your "outer_footer_bottom"
div has width 100% (not fixed)
and the "center"
div has width 1000px (fixed)
lets suppose you have zoom level 100% and your window size is approximately 1200px this means that your "outer_footer_bottom"
div has width 1200px and size of "center"
div is 1000px.
ok when you increase the zoom level the window size decreased and size of "outer_footer_bottom"
will become lesser than 1000px. but size of "center"
div remain unchanged i.e 1000px.
so that is the reason you are facing this problem.
SOLUTION 1: change the "outer_footer_bottom" div's width to fixed (e.g 1000px or 1200px)
SOLUTION 2: change the "center" div's width to unfixed (e.g 100% or 90%)
Upvotes: 1
Reputation: 85633
You have nothing problem with your code. When you increase or decrease the zoom level it is having 100% width in #outer_footer_bottom
and showing scroll-bar when your zoom level less than 1000px defined in .center
Upvotes: 0
Reputation: 2437
.center {
margin: 0 auto;
}
Remove width:1000px from the style of center class.
Upvotes: 0
Reputation: 4648
Try using media queries to get responsive web design
Check the following articles to get started
http://css-tricks.com/css-media-queries/
Upvotes: 2