Why does wrapper elements increase automatically?

Question

<div id="wrapper">
  <div id="top-part">
    some para here
  </div>
</div>

main css:

#wrapper {
  position: relative;
  width: 1024px;
  margin: 0 auto;
  display: block;
}

This is full of window without scroll bar.
But when added another contents after above wrapper it appears scroll bar. Why??

<div id="wrapper">
  <div id="wrap">
    <p>
      <img src="images/some.gif" />
      some para here
    </p>
    <a href="#">Link here</a>
  </div>
</div>

I have inserted wrap contents more than 3 times... Css is here.....

#wrap {width: 322px; margin: 6px;}

I've tried display: inline-block, eliminating margin, etc. How to do? I've tried class="wrap" also.

your wrap division doesn't have float:left and has far low width: thre has to be something else. place some more portion of your html. exact problem will be highly appreciated — Manish Mishra, Mar 06 '13 at 11:28
Sorry I tried removing margin. giving padding value to 0 too. — Bhojendra Rauniyar, Mar 06 '13 at 11:37
Do you have a fiddle or some screenshots to demonstrate your issue? — ᴍᴀᴛᴛ ʙᴀᴋᴇʀ, Mar 06 '13 at 12:00
@ManishMishra I have done float left to the #wrap but also is showing horizontal bar. — Bhojendra Rauniyar, Mar 07 '13 at 01:14

score 0 · Accepted Answer · edited May 23 '17 at 10:32

There are two possibilities that you are having problems with.

1. Vertical scroll bar appearing causing horizontal scroll bar to appear

If you position an element to be the exact width of the screen, whenever a vertical scroll bar appears this will reduce the horizontal width available, and mean that the horizontal scroll bar will appear also. You shouldn't need to specify a width to strech a display: block element to the entire width of a page (except when using floats or position absolute). Instead just remove width: 1024px; and the element should automatically strech to fill the available space.

2. Overflowing children on the horizontal

A child within a wrapping parent will always extend outside of it's parent if forced to do so by specific CSS or styling. i.e. if you have floated children -- For example:

+--------------------+
| +---+ +------+ +------+
| |   | |      | |      |
| +---+ +------+ +------+
+--------------------+

If the parent is dimensioned to be the full width of the page, then horizontal scroll bars will appear because the child is pushing outside the scrollable area. To prevent this you can use overflow: hidden on the wrapping element:

+--------------------+
| +---+ +------+ +---|
| |   | |      | |   |
| +---+ +------+ +---|
+--------------------+

UPDATE :- With regard to your comments

It seems that you are trying to work out the best way to handle displaying content when the screen/viewport is small. The best practice for this is not to disable scrollbars or use overflow:hidden — but instead to create what is called a 'responsive layout'. There are a number of ways to achieve such a layout and they all really depend on your target audience and target devices. Which ever route you choose however, they all follow the same basic principals:

Design your layout so that it collapses, showing the most important content first.
Design your layout to stretch, either by resizing or using multi-column constructs.
Avoid using fixed widths on wrappers, you can do so on sub-elements however.
Learn to use max-width and min-width
Learn to use 'progressive enhancement', meaning that you should have a base layout that works well for most — but even better for those that can support better features.

The most simple way to create a responsive layout is to start with an off-the-shelf base template. Here are a few that can get you started:

You can find quite a lot more just searching around with the keywords responsive html template or responsive html boilerplate.

Put simply

As a basic rule, it is best to try and break your design down into columns and float these using float: left or other positioning abilities like display: inline-block. Once you get into floating however you need to know how to clear floats either using some kind of clear fix or other css tricks that have the same affect like overflow: hidden. A simple responsive layout would be as follows:

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Using the following css:

.row { 
  overflow: hidden;
  background: #aaa;
  padding: 10px;
}

.row .col {
  float: left;
  width: 200px;
  background: #777;
  margin: 2px;
}

On a wide screen this layout would display as follows:

+--------------------+
| +---+ +---+ +---+  |
| |   | |   | |   |  |
| +---+ +---+ +---+  |
+--------------------+

But on a smaller screen this would show:

+---------+
| +---+   |
| |   |   |
| +---+   |
| +---+   |
| |   |   |
| +---+   |
| +---+   |
| |   |   |
| +---+   |
+---------+

The trick is to order your elements so that you get your most important content on top. The least important content can either fall to the bottom of the page (or depending on what CSS/JS tricks you deploy) you could hide that content or convert it to appear in a totally different place. It can get rather complicated, and is a constantly evolving field, which is why it is a good idea to start with a base template which can do the hard work for you.

@pebbl- Yes! I agree with you. But see here without vertical scroll bar it appears horizontal scroll bar. [Demo](http://jsfiddle.net/Y7PhV/95/) — Bhojendra Rauniyar, Mar 06 '13 at 12:29
@user2138752 I've looked at your jsfiddle and can't see a point where the horizontal scroll bar appears when it shoudn't. Are you referring to the scroll bars appearing when the content of the page is too large for the window? — Pebbl, Mar 06 '13 at 19:17
@pebbl- Thank you for your answer. I am very impressed from your answer that describes perfectly. I want every css element description, so where could I learn like yours. — Bhojendra Rauniyar, Mar 07 '13 at 01:16
@C-Link I've updated my answer with some futher information along the lines of what I think you're trying to accomplish. Hope it helps. — Pebbl, Mar 08 '13 at 13:00
@pebbl- Thank you very much for your response. It's absolutely perfect for me. Thank you again. — Bhojendra Rauniyar, Mar 08 '13 at 13:08

score 0 · Answer 2 · answered Mar 06 '13 at 11:46

0

change your wrapper css to this:

#wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: block;
}

and also look out for the width of img tags. see if any of them is not stretching outside the bounds.

answered Mar 06 '13 at 11:46

Manish Mishra

12,163
5
35
59

yeah! i know we can specify full width by percentage method but is there not px method to show full width – Bhojendra Rauniyar Mar 06 '13 at 11:52
never give px to the large containers, as even if it doesn't come with a scrollbar on your machine, it will come on somebody's having lower resolution than yours – Manish Mishra Mar 06 '13 at 11:54
besides, what you are asking is to calculate the screen width, that you can do through jQuery very very easily. you can also adjust your div width upon window resize – Manish Mishra Mar 06 '13 at 11:54
there is no such width. that's why you use percentage. so that divs automatically scale according to the resolution. – Manish Mishra Mar 07 '13 at 07:02
@ManishMishra- Thank you for your comment. I would like to know how yahoo has managed the page width? In any resolution it looks same but their contents are not getting wider. How to use width 100%? min-width: 750px; max-width: 1000px;? Please could you show me a good example? – Bhojendra Rauniyar Mar 10 '13 at 04:28

Why does wrapper elements increase automatically?

2 Answers2

1. Vertical scroll bar appearing causing horizontal scroll bar to appear

2. Overflowing children on the horizontal

UPDATE :- With regard to your comments