Szworny Dziąch Szworny Dziąch - 3 months ago 10
CSS Question

Position icon at the top right corner of a fieldset with legend

I'm having trouble making the below layout look the same across all browsers:

<html>
<head>
<style type="text/css">
.wrapper {
margin-top: 100px;
position: relative;
height: 400px;
width: 400px;
border: 1px solid black;
}
.icon {
position: absolute;
width: 40;
height: 40px;
border: 1px solid black;
background-color: white;
top: -20px;
right: 10px;
}
</style>
</head>
<body>
<fieldset class="wrapper">
<legend>Legendary!</legend>
<div class="icon">icon</div>
</fieldset>
</body>
</html>


The problem is that when the
legend
element is present, the
div.icon
is pulled few pixels down on firefox, and a few pixels up on chrome. When I remove the
legend
element, it's working fine, but I can't do that. Any ideas on how to make it look the same everywhere?

Answer

here you have a working UPDATED :jsfiddle tested in chrome and firefox. You don't need to work with position:absolute; you can just float:right; your div and give margin-top:-40px; or whatever value you want.

 #wrapper{
         margin-top: 100px;
         position: relative;
         height: 400px;
         width: 400px;
         border: 1px solid black; 
    }

#icon{
 float:right;   
    background-color:#fff;
    width:40px;
    height:40px;
    border:1px solid black;
    margin-top:-20px;
    margin-right:20px
}
legend#title {
    margin-left: 20px;
    float: left;
    padding-left: 10px;
    margin-top: -10px;
    background: #f3f5f6;
    width: 74px;
}