CODEWITHSUNDEEP
cssfluid-layout
Siamak
Siamak

Reputation: 45

How to keep width of the main container to maximum width in a 3 column fluid layout?

I have a 3 column fluid (100% width) layout. I need to hide columns on click, while the main container remains to maximum width.

Imagine that bellow is my layout:

-------------------------------------------------------
|           |                             |           |
| Col 1     |    Main container (Col 2)   |  Col 3    |
| (20%)     |        (60%)                |  (20%)    |
|(or 100px) | This is a paragraph in which|(or 100px) |
|           | some text is written.       |           |
-------------------------------------------------------

If I click on Col 1, I need to have bellow layout:

------------------------------------------------------
|                                         |           |
|      Main container  (Col 2)            |  Col 2    |
|         (80%)                           |  (20%)    |
| This is a paragraph in which some text  |(or 100px) |
| is written.                             |           |
------------------------------------------------------

Then if I click on Col 3, I need to have bellow layout:

------------------------------------------------------
|                                                    |
|                 Main container (Col 2)             |
|                    (100%)                          |
| This is a paragraph in which some text is written. |
|                                                    |
------------------------------------------------------

How can I write css styles in a way that the mainContainer expands to the maximum possible width?

Here is the code I have curenlty written (which is not what I exactly want) enter link description here

Upvotes: 1

Views: 104

Answers (2)

Germain
Germain

Reputation: 380

You should really look at CSS3 Flexbox module.

Your HTML structure : 

<div class="container">
   <div class="col1"></div>
   <div class="col2"></div>
   <div class="col3"></div>
</div>

Your CSS : 

.col1, .col2, .col3, .container {
    display: flex;
    flex-wrap: nowrap;
}
.col1 {
    flex: 1 20%;
}
.col2 {
    flex: 3 60%;
}
.col3 {
    flex: 1 20%;
}

Full example running on JSFiddle

Upvotes: 2

NoobEditor
NoobEditor

Reputation: 15901

to display div inline....display:table would be helpful instead of float and also expands when there is no div around

working demo

html, body {
    width: 100%;
}
#columnContainer {
    display:table;  /* remove float and added this */
    width: 100%;
    border: 1px dotted black;
}
#left {
    display:table-cell; /* remove float and added this */
    min-width: 20%;
    max-width: 100%;/* helps you expanding the divs after others collapse*/
    display:table-cell;
    border: 1px solid blue;
}
#main {
    display:table-cell;  /* remove float and added this */
    min-width: 58%;
    max-width: 100%; /* helps you expanding the divs after others collapse*/
    border: 1px solid green;
}
#right {
    display:table-cell;   /* remove float and added this */
    min-width: 20%;
    max-width: 100%;/* helps you expanding the divs after others collapse*/
    border: 1px solid blue;
}

Make sure to give max-width...this will decide, how much a div should expand......

Upvotes: 1

Related Questions