CODEWITHSUNDEEP
htmlcss
1252748
1252748

Reputation: 15372

float element to top right corner of fieldset

Is there a way to take this box that I have floating on the right side of a div, and make it so that it is flush with the top-right corner? I have tried making it position:relative and top:0px, but it stubbornly remains offset by the padding of the legend.

http://jsfiddle.net/loren_hibbard/dpUM2/

Upvotes: 1

Views: 1942

Answers (4)

Rick Calder
Rick Calder

Reputation: 18695

Position:relative on the parent, position:absolute on the child, notice the -1px to make it overlap the border of the parent. 

#out{
width:300px;
height:400px;
background:#efefef;   
border:1px solid gray;   
position:relative;
}
#top{
top:0;
right:-1px;
background-color:#fff;
width:150px;
height:25px;
border:1px solid black;
position:absolute;
}

http://jsfiddle.net/calder12/dpUM2/14/

Upvotes: 1

Jon
Jon

Reputation: 976

Try adding this in #top:

position: relative;
top: -24px;

demo: http://jsfiddle.net/dpUM2/10/

Upvotes: 0

SaidbakR
SaidbakR

Reputation: 13544

change your CSS to be as follows: 

#out{
        width:300px;
    height:400px;
     background:#efefef;   
         border:1px solid gray;
    padding:0px;    
    }
    #top{
     float:right;   
        background-color:#fff;
        width:150px;
        height:25px;
        border:1px solid black;
        margin:0px;
    }
    #title{
     padding:0px; 
        margin:0px;
        float:left;

    }​

Upvotes: 0

bozdoz
bozdoz

Reputation: 12860

You either need to set the position to absolute, or set the #title element to float:left.

Example with position:absolute on #top and position:relative on #out:

http://jsfiddle.net/bozdoz/dpUM2/9/

Example with #title set to float:left:

http://jsfiddle.net/bozdoz/dpUM2/13/

Upvotes: 1

Related Questions