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

Community
  • 1
  • 1
mark
  • 10,316
  • 6
  • 37
  • 58
  • Why would you lose rank because you placed an image before text? – easwee Apr 18 '11 at 13:27
  • This is what I asked in the other linked question. I really should try and get some more opinion on that. Worth mentioning that there may be 20 or more fairly large (500 wide) pictures in the slideshow. – mark Apr 18 '11 at 13:31
  • No idea, anyway there is another approach to achieve this - check my answer. Maybe this will help you more. – easwee Apr 18 '11 at 13:50
  • I have updated my answer below, also created a jsFiddle entry. – secretAgentB Apr 20 '11 at 16:45
  • @mark [Rand Fishkin of SEOMoz](http://www.seomoz.org/blog/perfecting-keyword-targeting-on-page-optimization): "Some practitioners swear by the use of particular content formats ... but we haven't seen any formal data suggesting these are valuable for higher rankings." Your keywords _should_ be high on the page, though, so with that many images if they all have alt tags, you might see some difference. However, I stick to my answer on the Webmasters - much greater SEO gains can be made elsewhere. – Dan Blows Apr 26 '11 at 00:36
  • Great link. It actually appears that the photos before text approach may be preferable due to the fact that the image is also a link. Also I have navigation in the same right panel. Maybe you could post this link in the other post Thanks! – mark Apr 26 '11 at 07:35

5 Answers5

3

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);
});
Community
  • 1
  • 1
clairesuzy
  • 27,296
  • 8
  • 54
  • 52
  • Hi and thanks for your answer. The right column will vary in height due to other content in there but I think you're onto something. I can have a slideshow holder inside the right floated column with everything else following it. I need to go and play around with this later. – mark Apr 20 '11 at 16:13
  • You're Welcome! as per Ryan Adriano's updated answer where he adds some jQuery to my code to detect the height of the float, I've updated a version of my own fiddle to include the code [**updated fiddle**](http://jsfiddle.net/clairesuzy/ZNWvd/2/) - jQuery could of course be able to add together the multiple div heights of your "other content" too if using script is even an option that is ;) – clairesuzy Apr 20 '11 at 17:24
  • This seems the be the way to go. Using jQuery to set the dimensions of the placeholder to the widest width and highest height would keep your text from reflowing around different size images. – Brent Friar Apr 25 '11 at 13:35
  • Thanks Brent, I agree. ClaireSuzy, I'm going to accept your answer as it seems to be the best approach and you were the first to suggest it. Please can you incorporate your fiddle code into your answer so we have the whole thing on stack overflow. – mark Apr 26 '11 at 08:47
1

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>
easwee
  • 15,757
  • 24
  • 60
  • 83
  • Thanks for your answer but I think I've not explained myself well. In your example I need content-text to fill the space under content-sidebar. – mark Apr 18 '11 at 14:47
  • Sorry, missread. This will be an ugly one to do if you can't change the element rendering. I'm actually really interested myself to find out a solid solution for this. – easwee Apr 19 '11 at 13:56
  • Yeah me too, even though I'm not even sure I'm going to keep this approach. Going to put a bounty on it anyhoo. – mark Apr 20 '11 at 12:32
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

secretAgentB
  • 1,279
  • 4
  • 19
  • 36
  • Thanks for your answer but your example still has the right column before the content of the left, which it is now contained within. You can leave comments now btw. :) – mark Apr 20 '11 at 15:40
1

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;

Guillaume Esquevin
  • 2,992
  • 20
  • 25
1

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>
BentOnCoding
  • 27,307
  • 14
  • 64
  • 92