CODEWITHSUNDEEP
htmlcsscss-positionfieldset
Paulcraey
Paulcraey

Reputation: 391

Why the width of my fieldsets changes so much if position = relative or absolute?

This is a form, it works very well with the fieldset positioned absolute

<form name="register" method="post" action="login.php"> 
    <fieldset id="login"> 
        <legend><h4>Bent u reeds klant?</h4></legend>
        <label> E-mailadres : </label><input name="mail" type="text" id="mail"><br>
        <label>Password : </label><input name="pass" type="password" id="pass"><br> 
        <label></label><input type="submit" name="submit1" value="OK"><br> 
        <label></label><a href="passReset.php">Paswoord vergeten?</a><br>
    </fieldset>
</form> 

<form name="register" method="post" action="login.php"> 
    <fieldset id="subscribe"> 
        <legend><h4>Wordt nieuwe klant!</h4></legend> 
        <label>E-mailadres : </label><input name="mail" type="text" id="mail"><br>
        <label></label><input type="submit" name="submit2" value="OK">
    </fieldset>
</form>

here is my first CSS, this works ok

#login {
position: absolute;
top: 300px;
left:200px;
border: 1px black solid; 
border-radius: 10px;
}



#subscribe{
position:absolute;
top: 300px;
left:550px;
border: 1px black solid; 
border-radius: 10px;
}

label {
padding: 6px;
width: 6em;
display: inline-block;
}

Now i change the position from absolute to relative, and the fieldsets become far too wide

#login {

position: relative;
top: 300px;
left:200px;
border: 1px black solid; 
border-radius: 10px;

}
subscribe{

position:relative;
top: 300px;
left:550px;
border: 1px black solid; 
border-radius: 10px;
}

label {
padding: 6px; width: 6em; display: inline-block; }

Now the result is very bad, why do the fieldsets now stretch over the whole screen?

Upvotes: 0

Views: 231

Answers (1)

hungerstar
hungerstar

Reputation: 21725

That's because <fieldset> is a block level element. Block level elements by nature want to take up the full width of their parent element.

Applying position: relative; does not affect it's block level layout. The element remains in the normal document flow, meaning, everything works as expected.

Applying position: absolute; does affect it's block level layout. The element is taken out of the normal document flow causing the element to not take up any space. It's content however does take up space. So the element's dimensions effectively become whatever the space it's content takes up. In other words, it "shrinks" to the content dimensions.

Here's an example.

.example-default {
    background-color: yellow;
}
.example-absolute {
    position: absolute;
    background-color: lime;
}
<div class="example-default">Hello, I'm using <strong>relative</strong> positioning.</div>
<div class="example-absolute">Hello, I'm using <strong>absolute</strong> positioning.</div>

Upvotes: 1

Related Questions