CODEWITHSUNDEEP
htmlcsscss-floatinline
HelpNeeder
HelpNeeder

Reputation: 6490

How to control which elements will change width more than other? Mixing fluid with static containers inline

I am creating a fluid design where I need to place 4 inline fields. First 3 fields will be 20% width each and the 4th will be 40% and/or minimum of 280px or so and will be split into 2 separate fields. This is because 280px field will contain a background image split into separate buttons.

Now, since I am using percentage on all fields and the last field has a static minimum width, it is being moved to next line when coming close to 600px parent width.

How can I assure my elements stay in place and force first 3 elements to compress more than the last one?

Or how to leave last field with fixed width and stretch the first 3?

jsFiddle link

<div style="width: 100%; height: 50px;">
    <div style="width: 20%; height: 100%; float: left; background-color: blue; display: block">a</div>
    <div style="width: 20%; height: 100%; float: left; background-color: green; display: block">b</div>
    <div style="width: 20%; height: 100%; float: left; background-color: blue; display: block">c</div>
    <div style="width: 40%; min-width: 280px; height: 100%; float: left; display: block;">
        <div style="width: 50%; height: 100%; float: left; background-color: yellow;">d</div>
        <div style="width: 50%; height: 100%; float: left; background-color: orange;">e</div>
    </div>
</div>

Upvotes: 2

Views: 170

Answers (2)

DRD
DRD

Reputation: 5813

This is a perfect scenario for flexbox. Here's my take on it: http://jsfiddle.net/7QUY9/3/. Make sure that you are using a browser that supports flexbox or just use the latest version of Chrome.

In my book "Functional CSS," which is available for free on amazon for the next 1.5 days, I consider a lot more of flexbox in the last case: navigation menu. You are welcome to check it out if you want.

Make sure to resize the jsfiddle preview window to see the flexbox in action. Great spec.

Here's HTML code:

<div id = "main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>
        <div>4a</div>
        <div>4b</div>
    </div>
</div>

And here's CSS:

#main {
    height: 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

#main > div:nth-of-type(-n + 3) {
    -webkit-flex: 1 1 140px;
    flex: 1 1 140px;
    outline: 1px dashed red;
}

#main > div:nth-of-type(4) {
    -webkit-flex: 2 0 280px;
    flex: 2 0 280px;
    outline: 1px dashed red;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

#main > div:nth-of-type(4) > div {
    -webkit-flex: 1 1 50%;
    flex: 1 1 50%;
    outline: 1px dotted blue;
}

Upvotes: 1

HelpNeeder
HelpNeeder

Reputation: 6490

Well, did some googling meanwhile I was scratching my head and came to this solution.

Here's jsFiddle

But is this cross browser compatible and supported in browsers couple generations older?

<div style="width: 100%; height: 50px;">
    <div style="width: 100%; height: 100%; float: left; margin-right: -280px; padding-right: 269px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
        <div style="width: 33%; height: 100%; float: left; background-color: blue;">a</div>
        <div style="width: 33%; height: 100%; float: left; background-color: green;">b</div>
        <div style="width: 33%; height: 100%; float: left; background-color: blue;">c</div>
    </div>
    <div style="width: 280px; height: 100%; float: right; display: block;">
        <div style="width: 50%; height: 100%; float: left; background-color: red;">d</div>
        <div style="width: 50%; height: 100%; float: left; background-color: orange;">e</div>
    </div>
</div>

Upvotes: 1

Related Questions