CODEWITHSUNDEEP
htmlcssstyleswidthinline
SParc
SParc

Reputation: 1779

Unable to have display: inline-block and width:100% at the same time

I am not a CSS professional. So I only know some basics of it. My task is to have 100% body width and at the same time it should not wrap the contents when browser window resizes.

To achieve this I added display: inline-block to my body tag's CSS style. But when I does that the width gets decreased. Then I try to add width:100% to body style. The width changed as I wanted but then display: inline-block stopped working. How to enable both these properties at the same time?

<body style="display: inline-block; width:100%"><!--content---></body>

Upvotes: 0

Views: 471

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157344

Why you want to fix the body width? simply use a container inside the body if you want like

CSS

body {
  height: 100%;
  width: 100%;
}

.container {
  width: 1000px;
  margin: 0 auto;
}

HTML

<body>
  <div class="container"></div>
</body>

OR if you want your content area to be 100% than just change your CSS to this

CSS

body {
  height: 100%;
  width: 100%;
}

.container {
  width: 100%;
}

Upvotes: 1

Related Questions