CODEWITHSUNDEEP
htmlcss
KiiroSora09
KiiroSora09

Reputation: 2287

CSS: provide initial width and expand based on content

Is there a way for my main div to have an initial width of 1024px but be able to expand based on the content if the content is longer that 1024px?

Also, the possible contents are dynamic, so if the content is longer than 1024px, then the main div must expand to accommodate the content. But if the content is smaller than 1024, then it should remain as 1024px centered on the screen.

HTML

<div id="main">
  <h1>Title</h1>
  <div id="otherContent">
    <!-- other content here -->
  </div>
</div>

CSS

#main {
  width: 1024px;
  margin: 0 auto;
}

Here is a fiddle with examples (Examples are based on 600px instead of 1024px)

Edit: The main div is also centered using margin.

Upvotes: 1

Views: 271

Answers (3)

maxxon15
maxxon15

Reputation: 1639

Set the min-width of main div to 1024px

HTML

<div id="main">
  <h1>Title</h1>
  <div id="otherContent">
    <!-- other content here -->
  </div>
</div>

CSS

#main {
  min-width: 1024px;
}

Upvotes: 0

SeedyROM
SeedyROM

Reputation: 2441

The min-width property is what you're looking for a I believe:

#main {
    min-width:1024px;
}

Upvotes: 2

aadarshsg
aadarshsg

Reputation: 2089

#main {
  min-width: 1024px;
}

Upvotes: 2

Related Questions