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.

mskfisher
  • 3,291
  • 4
  • 35
  • 48
Zdeněk Gromnica
  • 854
  • 2
  • 14
  • 31

3 Answers3

3

Simple you have add the following css

#content {
    float: left;
    width: 300px; /* put here the width you want */
}

demo: http://jsfiddle.net/qTDLr/1/

Edit: make sure that the sum of #content and #menu width is less than the container width.

Ahmed Magdy
  • 5,956
  • 8
  • 43
  • 75
3

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

Community
  • 1
  • 1
clairesuzy
  • 27,296
  • 8
  • 54
  • 52
0

You could just use a table. This 'sidebar before content' problem of CSS has been a huge step backwards in terms of accessibility.

Kevin
  • 4,225
  • 2
  • 37
  • 40