Home/ Questions/Q 4593126
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T22:38:20+00:00

I need to have a floated element after the content/text that’s supposed to flow

  • 0

I need to have a floated element after the content/text that’s supposed to flow around it in my code for SEO reasons. Usually floats are done like so:

CSS:

#menu {
float: right;
width: 180px;
padding: 10px;
background: #fcc;
margin: 0 0 15px 15px;
}

HTML:

<div id="menu">This is a right float. The long text flows around it.</div>

<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent nec risus.
Praesent adipiscing aliquet magna. Proin bibendum velit
vitae tortor. Vestibulum a dui quis urna feugiat viverra. 
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at, 
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec, 
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet, 
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p>
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut, 
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis 
a nibh. Integer ipsum. Vestibulum lacus diam, varius in, 
blandit non, viverra sit amet, sapien. Sed porta sollicitudin 
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div>

But I need to have the HTML like this:

<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent nec risus.
Praesent adipiscing aliquet magna. Proin bibendum velit
vitae tortor. Vestibulum a dui quis urna feugiat viverra. 
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at, 
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec, 
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet, 
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p>
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut, 
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis 
a nibh. Integer ipsum. Vestibulum lacus diam, varius in, 
blandit non, viverra sit amet, sapien. Sed porta sollicitudin 
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div>

<p id="menu">This is a right float. Because it's placed below the text in code,
it also appears that way.</p>

Basically, I need this HTML to look like the previous example (HTML and CSS). How can I do this?

The width of the floated element is constant, but the height can change. The content has to flow around it. The reason I need to have it this way is because the floated element is the menu, which doesn’t contain any important text and is usually the same for many pages, so the content should be topmost in the code.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This recent question may be the same

    Wrap text around right floated column where left column appears first in html

    the solution involves floating a empty “spacer” div right , this spacer is first in source, it should have the width and height of the content to be in the right side – in the link a solution including a bit of jQuery to get the height – the position the actual menu over the top of the floated spacer

    a JS fiddle example produced from that link : HERE

    • 0