positioning in CSS using margin

Question

I have a div with fixed width which contains three fieldsets with the ids "first", "second", "third":

Now i want them positioned as followed: First fieldset to the left, second to the center and third to the right. I want them to stay on their position even when one or all of the others are hidden, without using absolute or fixed positions.

Before I show you what I have tried already i will give you some code. HTML first:

 <div class="container_options">
                <fieldset class="fieldset_first" id="first">
                    <legend>Konfiguration des offenen Endes</legend>
                </fieldset>
                <fieldset class="fieldset_second" id="second">
                    <legend>Verfügbare Optionen für Ihr Kabel</legend>

                </fieldset>
                <fieldset class="fieldset_third" id="third">
                    <legend>Konfiguration des offenen Endes</legend>
                </fieldset>
    </div>

Now CSS:

  div.container_options {
        margin: 15px;
        clear: both;
        width: 980px;
    }


    fieldset.fieldset_first{
        width: 300px;
        border: 1px solid black;
        border-radius: 5px;
        margin-left: 0;
        margin-right: auto;
        float: left;
        margin-top: 10px;

    }

    .fieldset_first legend {
        font-weight: bold;
    }

    .fieldset_third{
        width: 300px;
        border: 1px solid black;
        border-radius: 5px;
        margin-left: auto;
        margin-right: 0;
        float: right;
        margin-top: 10px;
    }

    .fieldset_third legend {
        font-weight: bold;
    }

    .fieldset_second {
        width: 300px;
        border: 1px solid black;
        border-radius: 5px;
        margin: auto;
        float: right;
        float: left;
        margin-top: 10px;
    }

You can test this code in the following JSFiddle with the possibility to hide / show the fieldsets to see how they behave.

Now i will get to the problem:
When all three fieldsets are displayed, everything is fine.
If i hide the right one, everything is fine.
If i hide the left one, the middle one jumps to the left and doesn't care about the margin: auto;

I found some questions on Stackoverflow that seemed to be similar:
CSS: Positioning components using margins
div won't center with margin: 0 auto;
CSS Positioning Margin Trouble
I tried the things that worked for them but they don't seem to work for me. For example, one answer says I should not use float property when trying to position with margin. I created another JSFiddle where I tried to do that, but the result is not what i wanted. What am I doing wrong?

score 2 · Accepted Answer · 2013-12-13T09:47:02.783

2

The second JSFIDDLE works if you give to all fieldsets the style display: inline-block;.

fieldset.main_options_plug1{
    width: 300px;
    border: 1px solid black;
    border-radius: 5px;
    margin-left: 0;
    margin-right: auto;
   /* float: left; */
    margin-top: 10px;
    display: inline-block;
    vertical-align: top; 
    visibility: hidden;
}

Then when you want to hide one of those fieldsets you can't use display: none; because this is going to remove the element from the flow of the document. Use visibility: hidden; instead.

edited Dec 13 '13 at 09:47

answered Dec 11 '13 at 10:11

Thanks for your answer. I have two more questions for your solution: When using `display: inline-block` do i have to use the CSS `visibility: hidden` instead of the JavaScript `setAttribute("hidden", true);`? In your solution the middle fieldset starts at the top, while the right and left start at the bottom of the middle fieldset. Is it possible that all three start at the top? – Jbartmann Dec 11 '13 at 10:22
1

to make them start at the top you may use vertical-align: top; on your fieldset. for the javascript part 'visibility' is a css property so you need: your_element.style.visibility = 'hidden'; – Dec 11 '13 at 10:35
Ah great! now it is exactly how i wanted it to be. Thank you! :) – Jbartmann Dec 11 '13 at 10:44

score 1 · Answer 2 · answered Dec 11 '13 at 10:25

A solution that I could think of is columns that would look like this:

.container-options{ 
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
    }

In this case if you would hide with display:none one of the items, they will change their places, but you can avoid that by changing their visibility:none or opacity:0.

More info or properties that styles your columns can be found here.

positioning in CSS using margin

2 Answers2