Position a div to float in the top right corner without overlapping its sibling header

Question

Position a div to float in the top right corner without overlapping its sibling header

Is there a way to position a div in the top right corner of a section without overlapping the text of a h1?

This is the HTML code:

<section>
  <h1>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</h1>
  <div><button>button</button></div>
</section>

I attempted absolute positioning relative to the parent, but the text overlapped, see http://jsfiddle.net/FnpS8/2/

Using this CSS code:

section { position: relative; }
h1  { display: inline; }
div {
    position: absolute;
    top: 0;
    right: 0;
}

I also tried floating the div to the right, but it didn't stay in the top right corner, see http://jsfiddle.net/P6xCw/2/

Using this CSS code:

h1  { display: inline; }
div { float: right;    }

I've searched for similar questions but couldn't find a solution specific to this case.

css html

Answer 1

Answer №1

If you rearrange the elements, floating will be effective.

section {
  position: absolute;
  width: 70%;
  border: 2px solid black;
}
h1 {
  display: inline-block;
}
div {
  float: left;
}

<section>
  <div>
    <button>click me</button>
  </div>

  <h1>a very long header that spans multiple lines once it becomes too lengthy to fit all on one line</h1>
</section>

When you move the div ahead of the h1 and float it to the left, you achieve the desired result.

Answer 2

If you rearrange the elements, floating will be effective.

section {
  position: absolute;
  width: 70%;
  border: 2px solid black;
}
h1 {
  display: inline-block;
}
div {
  float: left;
}

<section>
  <div>
    <button>click me</button>
  </div>

  <h1>a very long header that spans multiple lines once it becomes too lengthy to fit all on one line</h1>
</section>

When you move the div ahead of the h1 and float it to the left, you achieve the desired result.

Answer 3

Answer №2

Yet another issue resolved with the help of a rubber duck:

The CSS seems fine, but don't forget that the order of HTML elements is crucial: ensure that the div precedes the header. Check out this link for reference.

Rearrange your HTML code so that the div comes before the header:

<section>
<div><button>button</button></div>
<h1>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</h1>
</section>

Also, maintain your CSS as simple as possible: div { float: right; }.

Answer 4

Yet another issue resolved with the help of a rubber duck:

The CSS seems fine, but don't forget that the order of HTML elements is crucial: ensure that the div precedes the header. Check out this link for reference.

Rearrange your HTML code so that the div comes before the header:

<section>
<div><button>button</button></div>
<h1>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</h1>
</section>

Also, maintain your CSS as simple as possible: div { float: right; }.

Answer 5

Answer №3

Remove the wrapping <Button> div by utilizing display:block and float:left on both the <Button> and <h1>, while setting their widths with a position:relative on your Section. This method eliminates the need for an additional div just to position your <Button>

html

<section>  
    <h1>long header text here</h1>     
    <button>click me</button>
</section>

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;
}

Answer 6

Remove the wrapping <Button> div by utilizing display:block and float:left on both the <Button> and <h1>, while setting their widths with a position:relative on your Section. This method eliminates the need for an additional div just to position your <Button>

html

<section>  
    <h1>long header text here</h1>     
    <button>click me</button>
</section>

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;
}

Answer 7

Answer №4

article {
    position: absolute;
    width: 60%;
    border: 2px solid black;
}
h2 {
    display: block;
}
span {
    position: absolute;
    float:left;
    top: 10px;
    right: 20px;

}

Answer 8

article {
    position: absolute;
    width: 60%;
    border: 2px solid black;
}
h2 {
    display: block;
}
span {
    position: absolute;
    float:left;
    top: 10px;
    right: 20px;

}

Answer 9

Answer №5

Here's a solution that worked well for me:

h1 {
    display: inline;
    overflow: hidden;
}
div {
    position: relative;
    float: right;
}

This technique is reminiscent of the media object approach by Stubbornella.

Update: It's important to remember, as mentioned in the comments below, that the floating element should come before the wrapping element (like in your initial code snippet).

Answer 10

Here's a solution that worked well for me:

h1 {
    display: inline;
    overflow: hidden;
}
div {
    position: relative;
    float: right;
}

This technique is reminiscent of the media object approach by Stubbornella.

Update: It's important to remember, as mentioned in the comments below, that the floating element should come before the wrapping element (like in your initial code snippet).

Position a div to float in the top right corner without overlapping its sibling header

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Shorten Text - React Native

Display a symbol retrieved from the backend server

ReactJS fetching previous data through POST request

Extract information from a page that must navigate through an initial webpage

"Encountered an HTTP 400 error when trying to retrieve content from a Persian URL using file

Modify the useRef value prior to the HTML rendering (React functional component)

The functionality of $(selector).css() seems to be malfunctioning

Using JQuery to parse an XML file and automatically redirecting the page if a specific attribute equals "Update"

Moving from the end to the beginning with a jQuery slider transition

The background image is not displaying correctly

Testimonials paired with captivating visuals

The web application located on the server is having trouble recognizing and loading the stylesheet

Tips for indicating errors in fields that have not been "interacted with" when submitting

Developing an unchanging structure for HTML pages

Positioning images within a relatively positioned div using absolute positioning

I'm wondering if there is a method for me to get only the count of input fields that have the class "Calctime" and are not empty when this function is executed

Is there a way to insert a record upon the user clicking on the Add Record button?

Having trouble retrieving cell values from a table using tr and td tags in C# Selenium is causing issues

Harvesting data from an HTML document using BeautifulSoup and Python

How can CSS image hover affect the layout of other elements on the page?