How to? Min-width, width and max-width (css)

0
votes

I had my main div set with 

max-width:600px;

However, when the content is not long enough that div will resize to the length of the content. Which makes sense.

So Instead I declared:

  width:600px;
  max-width:600px;

But now the div won't resize down when you resizing the window. I tried setting the min-width:

  min-width:200px;
  width:600px;
  max-width:600px;

But it still won't resize down passed 600px (on window resize);

So what am I missing? Can I use all 3 width settings together? (min-width,width,max-width)?

If so, how? I am trying to understand the logic.

I want the content to stretch up to 600px, but also resize down on windows resize.

3
css
What results are you looking for? Do you want the div to be 600px if the user window is above 600px but adapted to the window size if it is smaller than 600px? - Mathias
Correct. I think I got it. I needed width:100% and max-width:600px; - user1214678

3 Answers

0
votes

Just take out the "width: 600px" The div will be 600 px if the browser window is large enough, otherwise it will adjust down to your min width if the browser window is smaller than 600px.

0
votes

I think you want

width: 600px;
max-width: 100%;

This way, the element will attempt to have a width of 600px. But if the parent isn't wide enough, it will be less.

Demo

-1
votes

You could use media queries to apply a width for certain screen sizes

.div {
    width: 600px;
}

@media screen and (max-width 600px) {
    .div {
        width: 100%;
    }
}