CODEWITHSUNDEEP
htmlcss
encore2097
encore2097

Reputation: 503

CSS shrink container to size of two dynamic width divs

This is what I'm trying to achieve

                            CONTAINER
 --------------------------------------------------------------
|                      CENTERED in CONTAINER                   |
|    -----------------------------------------   ----------    |
|   | Content Div                             | | Info Div |   |
|   | shrink to contents  OR                  | | shrink to|   |
|   | max size: (container width - info div ) | | contents |   |
|   |                                         |  ----------    |
|    -----------------------------------------                 |
|                                                              |
|    ------------------------------------------------------    |
|   |  text div: width = width of content div + info div   |   |
|    ------------------------------------------------------    |
 --------------------------------------------------------------

PICTURES (crude MSPAINT): small content example and large content example

DIV INFO: Max 192 pixels, but should shrink if necessary.

DIV CONTENT: Shrink to content. If content is large, width= remaining space in container.

DIV TEXT: width = width of CONTENT + width of INFO.

Here's what I have so far. I am not using floats because I want the content and info divs to be overall centered on the page.

The problems I am having are:

CSS

#container {
    width: 80%;
    min-width: 760px;
    padding-top: 0;
    margin: 0 auto; 
}
#content {
    max-width: 71%; /* Kinda solves the problem of bumping info div
                       to next line, but leave awkward gaps */
    width: auto;
    vertical-align: top;
    display: inline-block;
}
#info {
    width: auto;
    vertical-align: top;
    text-align: left;
    display: inline-block;
}
#text {
    margin: 10px auto;
    width: auto;
    display: block;
    text-align: left;
}

HTML

<div id="container">
<div id="main">
    <div id="content"><img src="image.jpg" />Lorem ipsum ...</div>
    <div id="info">Lorem ipsum dolor</div>
    <div id="text">Lorem ipsum ...</div>
</div>
</div>

Upvotes: 10

Views: 12601

Answers (3)

Shaz
Shaz

Reputation: 15867

Try this: http://jsfiddle.net/JbuBC/2/ http://jsfiddle.net/JbuBC/14/

Upvotes: 5

mylesagray
mylesagray

Reputation: 8869

Add float:left; to #info and #content

Remove max-width: 71%; from #content

HTML code would be a good help if you have some?

Demo

Upvotes: 3

user194076
user194076

Reputation: 9017

To make #text width equals to Content+Info width you need to wrap #content, #info, #text with one more div.

Upvotes: 1

Related Questions