2 div in a row: one rubber, the other fixed

Question

It is necessary to make 2 blocks on the page that together would occupy the entire possible width. The right block is narrow and should not change its size when stretching or compressing the page, and the left block should occupy the rest of the width. I tried it on my own, but either the left block does not occupy the entire space, or squeezes the right one into a new line, but this should not be.

.div3 { max-width: 700px; } .div1 { height: 50px; max-width: 550px; background: #f99; width:100%; text-align:center; display: inline-block; float:left; } .div2 { height: 50px; background: #99f; display: inline-block; float: right; }

 <div class="div3"> <div class="div1">Резиновый блок</div> <div class="div2">Фиксированный</div> </div>

If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer).
@Grundy Yes, I would not say that this is a duplicate, since there is a question about the picture and about input, there is still a lot of add.
There, another 50% of the window must be occupied, etc., in short, some very specific one.
I am sure that the current question was asked, but I would search for another option.
@VadimOvchinnikov, it is probably worth closing on the contrary.
In essence, the questions are the same: one block of fixed width, the second one not
If you look for a purely conceptual similarity, then you can close most of the questions on HTML / CSS, since the principles of the solution are often the same.

Vadizar 4,617 2 nineteen 54 · Answer 1 · 2016-03-14T08:32:17

I know that Flexbox can. It is, however, should be used with caution, in IE it is buggy :

 .container { display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; height: 200px; border: 5px solid black; } .fixed { flex: 0 0 200px; background-color: #FF9999; } .rubbery { flex: 1 1 25%; background-color: #9999FF; }

 <div class="container"> <div class="rubbery"></div> <div class="fixed"></div> </div>

It works very badly with a mobile phone :( There are no other options?

Vadizar 4,617 2 nineteen 54 · Answer 2 · 2016-03-14T08:42:02

Look carefully, your .div2 is not fixed now. Give it a width explicitly.

For your task display: inline-block not needed, remove it. Remove the max-width parameter from .div1 .

Set the .div1 property to float: right, if the blocks are pushed into places, fixed their position in the html-code.

Should help.

A controversial question, I prefer to use it inline-block IE7 supports it, but there is no point in making it more ancient .... The only question is the ability to use and the correct understanding of these rules ....
In my opinion, inline-block and block are few for different tasks.
For example, in your example, the use of inline-block and float at the same time is impractical, since from the point of view of markup they perform the same task.
Made your option - rubber stretched to full width and pushes fixed onto a new line :(

Community spirit ♦ one · Answer 3 · 2016-03-14T08:36:56

A similar question has already been discussed .

In your code, you need to use either float or inline-block . and calculate the size of the rubber block using the calc function. If you use float , do not forget about clear , when using an inline-block it is necessary for the parent element to kill the font size in order to kill the spaces between the blocks, which will arise as the blocks acquire all the properties of the lower-case elements. vertical-align: top in this case is set to ensure that the blocks do not slide down when adding text to them. Try experimenting ....... However, the markup on float already outdated and it is increasingly using inline-block . More advanced technologies allow you to use Flex, but it is supported only by modern browsers ... and if your project is not aimed at cross-browser compatibility, then it is better to use it.

Here is an example:

 .a { height: 400px; background: red; font-size: 0; /*для отображения текста в блоках не забудьте задать размер шрифта им.*/ } .b, .c { display: inline-block; /* можно использовать свойство float */ vertical-align: top; } .b { width: 200px; outline: 3px solid green; height: 400px; font-size: 14px; } .c { width: calc(100% - 200px); /* расчет ширины */ outline: 3px solid blue; height: 400px; font-size: 14px; }

 <div class="a"> <div class="b">фиксированный</div> <div class="c">резиновый</div> </div>

Answer 4 · 2017-01-01T14:51:48

Knowing the advanced features of flexbox and calc good, but knowing the basics is much more important:

 * { box-sizing: border-box; } .divMain:after { content: ''; display: block; clear: both; } .divA { float: right; width: 200px; background: #99f; } .divB { overflow: hidden; background: #f99; }

 <div class="divMain"> <div class="divA"> Фиксированный блок </div> <div class="divB"> Резиновый блок </div> </div>

PS The order of the blocks in the markup is important.

You can the humiliating part "I look at the answers with flexbox and calc and tears are welling up."
Knowing modern CSS capabilities is good, but knowing the basics is much more important: “You call the basics of development with hacks like float , clear , overflow , which were used before due to the lack of decent alternatives? We don’t take into account table layout and absolute positioning.
I do not argue that you have the perfect answer for those who need to support IE7-9, but just just consider old CSS as the basics, it seems to me wrong.
My version is supported by a large number of browsers, while it requires fewer variables, which makes it the most acceptable option.

Vadizar 4,617 2 nineteen 54 · Answer 5 · 2016-03-14T10:04:22

Another option:

 *{ padding: 0; margin: 0; box-sizing: border-box; } .container { display: table; width: 100%; height: 200px; border: 5px solid black; } .fixed, .rubbery{ display: table-cell; vertical-align: top; padding: 25px; } .fixed { width: 150px; background-color: #FF9999; } .rubbery { background-color: #9999FF; }

 <div class="container"> <div class="rubbery">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> <div class="fixed"> text text text text text text text text text text text text text text text text </div> </div>

If you build a table using css properties, is it as resource-intensive as HTML?

2 div in a row: one rubber, the other fixed

5 answers 5

More articles: