how to fit fieldset to the div?

Question

I have the next html code:

<div id="panel" style="width:100%; height: auto;position:relative; overflow: auto;">
    <fieldset style="position:relative; width: 48%;float:left;">
    ...
    </fieldset id="A" style="position:relative; width: 48%;float:left;">

    <fieldset id="B" style="position:relative; width: 48%;float:left;">
    ...
    </fieldset>
</div>

When I execute the page both fit correctly one left and the another right. My problem is when I reduce (when I resize) the explorer. Of course B set under A fieldset but the width is set to 47%. I would like to fit it in this situation to 100% and when the I expand the explorer to fit again to 47%. I hope I was clear if not ask me.

Could some body give me some idea? maybe using jquery, css, I don't know

Do you need it with percentages or do you want to give it a width with pixels? i.e: 100px? — Trufa, Nov 08 '13 at 12:19

score 0 · Answer 1 · answered Nov 08 '13 at 12:20

So you're wishing to make a responsive design, where on a bigger screensize the two elements are side to side, and on a smaller screensize they are on top of each other but using all the available space? Consider using something like Bootstrap with a responsive grid for achieving this.

score 0 · Answer 2 · edited May 23 '17 at 11:57

What you would need is something like media queries for responsive design.

Take a look at this example here.

The relevant code is this:

@media only screen and (max-width: 980px) {
  fieldset{
      float: none;
      width: 97%;
  }
}

This code is executed when your screen fits that size.

Btw, I separated your css properties to a css file since it's not good practice to have them inline.

Media queries don't work in ie8, the do work after that version.

If you want to be ie8 compatible, you must do it with javascript.

Please take a look at this anser: https://stackoverflow.com/a/5770956/463065

You can also do it with modernizr.

It is completely modular so you can download only the part you need for media queries, go here and choose only media queries, download the js file and add it you your source.

You can see an example I made for you here, the first part of the javascript is just the modernizer I downloaded, in you case you should include the file you downloaded, go to the bottom of the js part to see what I actually did.

trufa, is it working in internet explorer 8? as I answered u before in percentages — david, Nov 08 '13 at 13:40

how to fit fieldset to the div?

2 Answers2