Setting width to occupy space that needs to be occupied in a div

Question

Setting width to occupy space that needs to be occupied in a div

Navigation

#1 by (5 votes)

1

Assuming I have this structure:

<div style="width:1000px">
    <div id="div1" style=""></div>
    <div id="div2" style="width:300px"></div>
</div>

How to make div1 exactly occupy the remaining space (700px)?

Preferably taking into account already possible margins of div1 and div2.

At first I would like to do this with CSS only, but if there is no solution it can be via javascript / jquery.

NOTE: I can not add extra html elements. Div2 has fixed width.

OBS2: The actual scenario is a Table cell. In that cell I have the input field that would be the "div1" in my example. And a small image of magnifying glass next to it, which would be the div2 with fixed size. I want these two elements to fit to take up all the cell space

html css

asked by anonymous 18.07.2014 / 19:59

1 answer

Get all divs with jquery Change value of a select in CakePHP

score 5 · Accepted Answer

First, you must allow the two divs to occupy the same line. To do this, use display: inline-block . Then you need to remove the space between the divs. Note the following:

<div id="div1">Conteúdo 1</div>
<div id="div2">Conteúdo 2</div>

There is a line break and spaces between </div> and <div> . Unfortunately they will make a difference in layout. HTML rendering collapses multiple spaces into one space, but it does not cease to exist. The " " character will be inserted between the two divs. Some separation pixels that will be visible. You can work around this:

<div id="div1">Conteúdo 1
</div><div id="div2">Conteúdo 2
</div>

Ugly, but it works. Then, apply the width you want in the second div and first use the following:

width: calc(100% - 200px);

That is, the total size of the container minus the size of the second div. Note that the space around the - operator is important, do not remove it.

Example running: link