CODEWITHSUNDEEP
csshtmlcss-floatwidth
jack5891
jack5891

Reputation: 99

2 floated divs with first div width 100%

I have 2 divs floated left in a container div. The second div has width: 20px. I need the first div to fill all the available space and remains inline. Set first div width to 100% doesn't work because the second div with fixed width goes down. How can i do?

The code is described here: http://jsfiddle.net/7EW5h/4/

Thanks

Upvotes: 0

Views: 834

Answers (4)

yibe
yibe

Reputation: 378

I think, without complicating things, you can do the following.

  1. ​Remove the floats from the two inputs.
  2. Absolutely position the second input as shown below.

  3. add padding-right to the first input to avoid content overlap. also, even if it is not shown in my code below, don't forget the presence of default border, margin and padding.​ ​

           #container {
           overflow: hidden;
           background-color: red;
        }

               #inner1 {
                  width: 100%;
                   background-color: blue;
                   padding-right:45px;

                 }

             #inner2 {
                height: 20px;
                width: 20px;
                 background-color: green;
                 position:absolute;
                 right:0;
                 top:0;
                 }

    ​

Upvotes: 0

strmstn
strmstn

Reputation: 872

I have tested and worked out a solution in Chrome, IE9, Firefox and Opera:

  1. Use containers for the two input elements.
  2. Change the order of the elements so that the right one is first.
  3. Do not float the element that is supposed to fill the remaining space, just set the display to block (which is the default for div elements).
  4. Set the margin-right of the larger container to the total width of the right element. Here we also need to account for things like borders, margins and paddings of both elements.

HTML: 

<div id="container">
    <div id="inner2">
        <input />
    </div>
    <div id="inner1">
        <input />
    </div>
</div>​

CSS:

#inner2 {
    float: right;
}
#inner2 input {
    height: 20px;
    width: 20px;
    border: 1px solid #000;
}
#inner1 {
    margin-right: 24px;
}
#inner1 input {
    width: 100%;
    height: 20px;
    border: 1px solid #000;
}

Live example: http://jsfiddle.net/7EW5h/22/. Also note that i have explicitly set borders on the two input elements.

I can not get it to work without changing the HTML or the order of the two elements without using absolute positioning.

Upvotes: 1

Aljullu
Aljullu

Reputation: 444

You can use calc CSS3 function and set a dynamic width to #inner1 div as follows:

width: calc(100% - 20px);

It will be compatible with Firefox 16 (or later) and Internet Explorer 9 (or later).

You can add vendor prefixes as shown:

width: -moz-calc(100% - 20px);
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);

To make it compatible with Chrome 19 (or later), Firefox 4 (or later), Internet Explorer 9 (or later) and Safari 6 (or later).

You can check compatible tables here: http://caniuse.com/#search=calc

Regarding to you example, I had to set border: 0 to #inner1 and #inner2 divs.

Upvotes: 2

Kami
Kami

Reputation: 19407

Have you tried using position:absolute; to position the elements as you need?

See fiddle - JSFiddle Example

Upvotes: 0

Related Questions