1

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.

Improve this question
3
  • 1
    Is there any reason not to use display: inline-block on the elements with the min-width? Like this example? inline-block will fit the width to the content. Commented Jul 8, 2015 at 3:24
  • You can also use inline-table on the table elements so that they are shrunk down in width. The tables are then centered with text-align: center on the parent div. Example for you here Commented Jul 8, 2015 at 3:31
  • Thanks! I think that would do, though I heard there were issues with using inline block with older version of IE. Also, to center an inline-block element, I need to use text-align:center on the parent element instead of using margin: 0 auto right? Commented Jul 8, 2015 at 4:37

3 Answers 3

Reset to default
2 
#main {
  min-width: 1024px;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

But the div will initially expand to the full width of the screen.
What are you trying to achieve?
Sorry for not being clear, so the div should normally have a width of 1024px and only expand if the content is wider than 1024 px. If I give it min-width, the initial width of the main div will be the width of the screen.
If the width is coming out to be greater than 1024px, that means you have a child element whose width is greater than 1024px. Hunt it down and set it to the right value. You can share the code over JS Fiddle too if you need more help.
Thanks, though the content is dynamic, like for example table data that may have or may not have, a lot of columns. I'll try to create a fiddle for this, thanks!
2

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

#main {
    min-width:1024px;
}
Improve this answer

4 Comments

Thanks for answering, but I believe the div will initially expand to the full width of the screen, I wanted it to have 1024 width initially and expand as needed to accommodate the content.
^ This would only expand to the full screen if your screen is 1024px wide, or it could be that there is an inherited parameter from a later declaration in that case just use !important after the 1024px to override that inheritance.
I tried using !important but it still expands to the full width of the parent (in this case, the body tag which spans the full width of the screen) since it's a div. Or maybe I'm just doing it wrong.
If you had a JSFiddle that demonstrated what you're seeing it would be easier for us to diagnose the issue. You could also try to use overflow:hidden to see if it's a child or not.
0

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;
}
Improve this answer

1 Comment

Thanks for answering, but I believe the div will initially expand to the full width of the screen, I wanted it to have 1024 width initially and expand as needed to accommodate the content.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.