Geek Answers Handbook

Wrap text around the right column where the first column in html is displayed on the left

------------------------ 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 column layout, text floats around the right pane. This is easily achieved by right-rotating the right column, however, this requires that the right column and its images are placed in front of the left column and text in html.

Given the possibility (who really knows, but Iā€™m not ready to take a chance) to lose page ranking due to the fact that the text content is below the page, how can I achieve the same result with the left column before the right in html?

A related issue with webmasters

+7
source share
5 answers

I read in the mentioned topic that these images are slide shows, does this mean that you know the width and height of the correct "floating" block?

IF so that the following script example may be an option if I don't think it is possible without saving the image first in the source.

IF so, that means first insert one empty div into the source code so that it matches the image / slideshow area and floats to the right for the "placeholder" .. then add a position relative to your main content area and absolutely position the actual images / slide- show above placeholder:

Sample script: 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 determine height if not explicitly set to #sshow :

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

This works with IE6 on. Float it left and set width for it. Your sidebar gets margin-left , which should be the same as the total width of the floating part (take care of the margins, borders, and spacers, as they also take into account the total width).

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>
+1
source

Updated:

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

jsFiddle link

+1
source

If you do not know the width and height of your image element

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

  • Serve HTML with text before image.
  • Using Javascript moves the image in front of the text.
  • Use a simple float: right; to place the image.

Thus, you will not lose the page rank (the search engine will see the correct HTML), and users will have the desired layout.

javascript will be as simple as

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

If the width and height are always the same

We can easily fake it with CSS using 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 in front of the text container and use it to save space for the imageContainer, which we impose using absolute positioning. To ensure absolute positioning, you will need to wrap a div around your text container and ImageContainer with position: relative;

+1
source

Why not write html so that all the text appears in front of 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>
+1
source

More articles:


All Articles