Wrap text around right floated column where left c

Question

------------------------
h1

tab1 tab2 tab3
------------------------
text text  | photo
text text  | photo              
text text  | photo          
text text  | photo          
text text  | photo          
text text  |           
text text text text text                    
text text text text text

In the above two column layout the text is floating around the right panel. This is easily achieved by right floating the right column, however this requires that the right column and its images are placed before the left column and the text in the html.

Given the possibility (who knows really but I'm not up for taking a chance) of losing page rank due to text content being lower down the page, how can I achieve the same result with the left column before the right in the html?

Related question on webmasters

Answer 1

Updated:

I moved the image div after the text div. If the size of the image is dynamic you can use jQuery to set it dynamically

jsFiddle link

Answer 2

I read in that referenced thread that these images are a slideshow, does that mean you know the width and height of the right "floated" block?

IF so the following fiddle example may be an option, if not I don't think it's possible without keeping the images first in source.

IF so, it means inserting one empty div first in source, dimensioning it to match the images/slideshow area and floating it right for a "placeholder".. then add position relative to your main content area, and absolutely position the actual images/slideshow over the placeholder:

example fiddle : HERE

---

full code as per comments :

HTML:

<div id="wrapper">
  <div id="header"><h1>Header</h1></div>
    <div id="tabs">Tabs</div>

    <div id="main">
      <div id="ssholder"></div>

        <div id="left">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
        </p>
        <p> add loads more content!</p>
    </div>

    <div id="sshow">
       <img src="" alt="" width="200px" height="50px" />
       <img src="" alt="" width="200px" height="50px" />
       <img src="" alt="" width="200px" height="50px" />
       <img src="" alt="" width="200px" height="50px" />
       <img src="" alt="" width="200px" height="50px" />
       <img src="" alt="" width="200px" height="50px" />
    </div>

    </div>
</div>

CSS:

#wrapper {
  width: 600px;
  border: 1px solid #000;
}

#main { 
  position: relative; 
  border: 1px solid red;
}        

#ssholder {
  float: right; 
  width: 200px; 
  height: 300px;
}

#sshow {
  position: absolute; 
  width: 200px; 
  height: 300px; 
  top: 0; 
  right: 0; 
  background: #eee;
}

#sshow img {
  display: block;
}

jQuery to detect heights if not explicitly set on #sshow:

$(function() {
    var sshowHeight = $('#sshow').height();
    $('#ssholder').height(sshowHeight);
});

Answer 3

If you don't know the width and height of your image element

Having text content wrap around an element can only be done using float, and since the width and height of your images are not known in advance we'll have to use javascript. I think the easiest way would be to:

1. Serve the HTML with the text before the image.
2. Using Javascript move the image before the text.
3. Use a simple float: right; to position the image.

This way you wont lose page rank (search engine will see the proper HTML) and users will have the desired layout.

The javascript would be as simple as

var image = document.bodocument.getElementById('imageContainer')
var text = document.getElementById('textContainer')
text.parentNode.insertBefore(image, text)

If width and height are always the same

We can fake it using CSS pretty easily by using a pseudo-element

#wrapper{
    position: relative;
}
#textContainer:before {
    content: '';
    display: block;
    width: 200px;
    height: 200px;
    float: right;
    margin: 0 0 1em 1em;
}
#imageContainer{
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
}

Here we create a fake 200x200 element before the textContainer and use it to save space for the imageContainer we put over using absolute positioning. For the absolute positioning to work you'll need a wrapper div around your textContainer and ImageContainer with position: relative;

Answer 4

This works from IE6 on. Float it left and set width to it. Your sidebar part gets margin-left that has to be same ammount as total width of floated part (take care with margins, borders and paddings as they count to total width too).

JSfiddle: http://jsfiddle.net/easwee/reXaT/1/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .content {width:800px;margin:0 auto;background:#ccc;}
    .content-text {float:left;width:500px;background:green;}
    .content-sidebar {margin-left:500px;background:red;}
.clear {clear:both;height:1px;line-height:1px;font-size:1px;}
    </style>
</head>
<body>
<div class="content">
<h1>Winrar text</h1>
    <div class="content-text">
    Texte
    </div>
    <div class="content-sidebar">
    asdfasdf
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

Answer 5

Why not write your html in such a way that all the text occurs before all the images. Something like :

<div id="MainWrapper">
        <div id="LeftFloatedText">
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
        <div>
        <div id="LeftFloatedImages">
            <img src="http://placekitten.com/150/150">
            <img src="http://placekitten.com/150/150">
            <img src="http://placekitten.com/150/150">
            <img src="http://placekitten.com/150/150">
            <img src="http://placekitten.com/150/150">
        </div>
    </div>