CODEWITHSUNDEEP
javascripthtmlcss
Jbartmann
Jbartmann

Reputation: 1539

positioning in CSS using margin

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?

Upvotes: 1

Views: 85

Answers (2)

user1047100
user1047100

Reputation:

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.

Upvotes: 2

Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

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.

Upvotes: 1

Related Questions