CODEWITHSUNDEEP
css
zekia
zekia

Reputation: 4857

Body width smaller than content width

I'm having a problem width body width and it's weird. Please check out this fiddle to test it yourself.

<div class="topbar" style="width:100%; background:#000; color:#fff">
    <div class="container" style="width:970px; margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere semper velit, quis gravida dui elementum posuere. Aliquam hendrerit sagittis sapien elementum lacinia. Praesent sagittis, magna sed molestie suscipit, dolor ante pharetra neque, a ornare lorem arcu eget mauris. Donec ornare cursus velit vel mattis. Donec malesuada euismod metus ac posuere. Sed vulputate tortor ac lorem ultrices, eget scelerisque neque tincidunt.....</div>
</div>

The problem is when the content is wider than the window width, the body gets the window's width and not the content's width.

Take a look of the following screenshot. enter image description here The window width is 787px and the content width is 970px. You can see that there's a scrollbar appearing for scroll-x.

But look what happens when I scroll to the right enter image description here Body doesn't expand to the 100% of width available, but gets the window's width.

Do you have any idea why is this happening?

Upvotes: 2

Views: 4649

Answers (4)

Sarbbottam
Sarbbottam

Reputation: 5570

Add min-width: width:970px to the body. This is a standard caveat. When ever there is a fixed-widthcontainer, make sure to add the width value of the fixed-width container, as min-width to the body.

Upvotes: 1

Re Captcha
Re Captcha

Reputation: 3133

The problem is with the parent <div>. You have assigned it width: 100%, which is basically the width of the window. Check out the updated Fiddle.

<div class="container" style="width:970px; margin:0 auto;">...</div>

Or you can change the style of .topbar: Fiddle

<div class="topbar" style="width:970px; background:#000; color:#fff">
    <div class="container" style="margin:0 auto;">...</div>
</div>

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

Add display:table to your body. So that it will extend its area based on the child content.

body{display:table;}

DEMO

Upvotes: 2

4dgaurav
4dgaurav

Reputation: 11506

Demo

add min-width: 970px; to <body> (equal to your content width)

This will make sure that <body> has a minimum width of 970px and id your screen size is larger that 970px it will take the full width as setting width: 100% means that body occupies the whole browser width.

Upvotes: 1

Related Questions