Css default width with min-width but grown to fit content

Question

I have a container that I want to have a min-width of 250px and a default width of 500px. However, if the content inside of it becomes bigger than 500px I want it to grow to fit that content.

How do I do this?

Here's an example http://jsfiddle.net/e0uo7w8n/

.e
{
    font-size:20px;
}
.viewport1, .viewport2
{
    border-width:1px;
    border-color:#000000;
    border-style:solid;
    padding:20px;
}
.viewport1
{
    width:300px;
}
.viewport2
{
    width:800px;
}
.root
{
    background-color:#FFCCCC;
    min-width:400px;
    max-width:600px;
    padding:20px;
}
.colFixed
{
    background-color:#CCFFFF;
    width:200px;
    float:right;
    height:150px;
    padding:20px;
}
.colFluid
{
    background-color:#FFCCFF;
    overflow:hidden;
    padding:20px;
}

<div class="viewport1">
    <p class="e">Viewport 1: Demonstrates min-width</p>
<div class="root">
    <div class="colFixed"></div>
    <div class="colFluid">
        <img src="http://placehold.it/20x150">
    </div>
</div>
</div>
    
<div class="viewport2">
    <p class="e">Viewport 2: Demonstrates default width</p>
<div class="root">
    <div class="colFixed"></div>
    <div class="colFluid">
        <img src="http://placehold.it/200x150">
    </div>
</div>
    </div>
    
<div class="viewport2">
    <p class="e">Viewport 2: But it should resize to the picture</p>
<div class="root">
    <div class="colFixed"></div>
    <div class="colFluid">
        <img src="http://placehold.it/400x150">
    </div>
</div>
    </div>

I have a container with two columns. One is a fixed width float, the other takes up the rest of the space. By setting the parents container width I can set the width of the column that fills the rest. This also shinks when the page is smaller. I want a min width so it doesnt get too small. A default width so it doesnt get too big on big screens but not a max width so that if it needs to get bigger on big screens it can. — Cobertos, May 23 '15 at 20:58
That's a very odd way try to make it responsive. That's what media queries are for. — Paulie_D, May 23 '15 at 20:59
Perhaps this is more what you are trying to do - http://stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width — Paulie_D, May 23 '15 at 21:01
Im using that technique to make the one div take the remaining width. But to resize it, I'm changing the width of the parent container as described above. I think media queries might be the way to go. I dont know the width of what I'd need to set it to unless I checked the width of every child in the column — Cobertos, May 23 '15 at 21:07

ET-CS · Answer 1 · 2015-05-23T21:06:45.370

0

Maybe try to remove the width:500pxso the div could grow with content and add max-width to limit it as your needs and set your min-width to 500px to use it as default width with media-query for smaller screen. I could help you more if you'll add some code.

edited May 23 '15 at 21:06

answered May 23 '15 at 20:55

ET-CS

6,334
5
43
73

Ill add a fiddle, give me a sec – Cobertos May 23 '15 at 21:11

Css default width with min-width but grown to fit content

1 Answers1