CODEWITHSUNDEEP
htmlcss
parchment
parchment

Reputation: 4002

div with inline-block not resizing

I have two elements, both with display: inline-block, and the parent has white-space: nowrap.

When the screen is resized, the div on the right side don't resize, like this.

I'm trying to make only the blue div resize.

Full source (jsfiddle)

The structure of the html is like this:

<div class="container">
    <div class="header">...</div> <!-- red -->
    <div class="aside">...</div>  <!-- pink -->
    <article>...</article>        <!-- blue -->
</div>

Relevant css:

* {
    box-sizing: border-box;
}

div.container {
    margin: 0 auto;
    max-width: 40em;
    padding: 0;
    white-space: nowrap;
}

div.container > * {
    white-space: normal;
}

.aside {
    display: inline-block;
    max-width: 15em;
    vertical-align: top;
}

.article {
    display: inline-block;
    max-width: 25em;
}

Upvotes: 1

Views: 3279

Answers (3)

Crist&#243;bal Ramos Merino
Crist&#243;bal Ramos Merino

Reputation: 397

Old question, but for the sake of knowledge of anyone who reads this and also has the doubt:

What I've found is that setting position: relative on the .container and position: absolute on the .article does what I want.

An absolute positioned element is positioned relative to the nearest positioned ancestor, where a positioned element means anything with a position property different to static, the default; if does not found any positioned element, uses the body element.

The absolute positioned elements, if has their width and heigth in auto, resizes to fit its content, and limits the maximun sizes by its positioned ancestor. You can check this putting a short string instead a large one: the element will shrink to the length of text. If you remove the positioning from div.container, the article (if still positioned absolute) will grow (depending on its content) to cover the space between previous element and body width.

And, related to the aforementioned and to add some utility to this delayed answer, a not-very-know bonus: if you define the right and left properties of a absoluted positioned element, and leave the width in auto, the element will cover the horizontal size between the right and left defined. This way you could put something like 

article {
    background-color: #a0f4ec;
    display: inline-block;
    position: absolute;
    right: 0;
    left: 30%;
}

div.aside {
    background-color: #faf;
    display: inline-block;
    max-width: 15em;
    width: 30%;
}

This trick also applies in a vertical sense, but with height, top and bottom properties.

Upvotes: 2

parchment
parchment

Reputation: 4002

Unfortunately, Narxx's answers require the divs to be floated. I'm sure that's what you should do if you're building a real site, but in my case, I'm trying not to use it.

What I've found is that setting position: relative on the .container and position: absolute on the .article does what I want.

Simplified fiddle

If anyone can explain why, I'll mark it as an answer.

Upvotes: 0

Narxx
Narxx

Reputation: 8299

There are a few ways to do it. Method 1: two divs the same line, one dynamic width, one fixed

Method 2 (negative margins) http://alistapart.com/article/negativemargins

Upvotes: 0

Related Questions