Float a div in top right corner without overlapping sibling header

Question

Having a div and a h1 inside a section  how do i float the div in the top right corner without overlapping the text of the header    The HTML code is the following    lt section gt     lt h1 gt some long long long long header  a whole line  1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 lt  h1 gt     lt div gt  lt button gt button lt  button gt  lt  div gt   lt  section gt     I tried an absolute position relative to the parent but the text is overlapped  http   jsfiddle net FnpS8 2      Using this CSS code   section   position  relative    h1    display  inline    div       position  absolute      top  0      right  0       I tried floating the div to the right but it doesn t remain in the top right corner  http   jsfiddle net P6xCw 2      Using this CSS code   h1    display  inline    div   float  right            I know there is a lot of similar questions but I couldn t find one solving this case

User · Answer

section       position  relative      width  50       border  1px solid    h1       display  inline    div       position  relative      float right      top  0      right  0

User · Answer

Another problem solved by the rubber duck   The css is right but you still have to remember that the HTML elements order matters  the div has to come before the header  http   jsfiddle net Fq2Na 1    Change your HTML code to have the div before the header    lt section gt   lt div gt  lt button gt button lt  button gt  lt  div gt   lt h1 gt some long long long long header  a whole line  1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 lt  h1 gt   lt  section gt    And keep your CSS to the simple div   float  right

User · Answer

Get rid from your   lt Button gt   wrap div using display block and float left in both  lt Button gt  and  lt h1 gt  and specifying their width with a position relative to your Section  This approach has the advantage of not needing another div only to position your  lt Button gt   html   lt section gt         lt h1 gt some long long long long header  a whole line  1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 lt  h1 gt            lt button gt button lt  button gt   lt  section gt      css  section       position  relative      width  50       border  1px solid      float left    h1       display  block      width 70       float left    button       position relative      top 0      left 0      float left

User · Answer

If you can change the order of the elements  floating will work    x000D   x000D  section   x000D    position  relative  x000D    width  50   x000D    border  1px solid  x000D    x000D  h1   x000D    display  inline  x000D    x000D  div   x000D    float  right  x000D    x000D   lt section gt  x000D     lt div gt  x000D       lt button gt button lt  button gt  x000D     lt  div gt  x000D   x000D     lt h1 gt some long long long long header  a whole line  1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 lt  h1 gt  x000D   lt  section gt  x000D   x000D   x000D     By placing the div before the h1 and floating it to the right  you get the desired effect

User · Answer

This worked for me   h1       display  inline      overflow  hidden    div       position  relative      float  right      It s similar to the approach of the media object  by Stubbornella   Edit  As they comment below  you need to place the element that s going to float before the element that s going to wrap  the one in your first fiddle

[css] Float a div in top right corner without overlapping sibling header

Examples related to css

Examples related to html