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.

How can I achieve the same result with the left column before the right in the html?

Related question on webmasters

Answer 1

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);
});