html block : image on right, text on left

Comments

• Options

  rht Registered Users Posts: 44 Big grins

  October 1, 2013 edited October 1, 2013

  You could do two divs, one beside the other.
  

  <div class="left-div">left content</div>
  <div class="right-div">right content</div>
  

  /* left and right columns */
  .left-div{
  float:left; clear:none; width:50%;
  }
  
  .right-div{
  float:left; clear:none; width:50%;
  }
  

  Each pair of DIVs should sit beside each other.
  Use a HR with a clear:both; CSS property between each "row" of divs. That will prevent other ones flowing where you don't want them to go.

  w: Reheat Images
  Torn between cycling and photography!
  

  0
• Options

  grosloulou Registered Users Posts: 87 Big grins

  October 2, 2013 edited October 2, 2013

  thanks rht,
  
  I think that ounce mastered html block is much more flexible than the new text and title blocks of new smugmug becaue their editor is very simplified.
  
  q1. is it better code than table with one row and two columns ?
  
  q2. i am surprised to see 50% in each div. I thought it was 50% for one and nothing for the other because it takes the remaining available room
  
  q3. is my hr ok because it has already a clear both to avoid hr below text only !
  
  q4. Is it better now to use margins in div left and right instead of in img and p ?
  
  q5. what does clear:none mean ?
  
  q6. is the following code ok now ? I have left alignment for img and p. it seems to work as expected on :
  http://www.labrophotography.com/Buy-images
  
  when i compare to identical section above it where i removed the 5 br (to have glossy option below image and so text align left) and used text center for second p instead of align left.
  
  

  <hr />
  
  <div class="image_line">
  
    <div class="left-div">
       <img class="image_left" src="http://www.labrophotography.com/Galleries/Nature/Nature-and-landscapes/i-4XjfXvd/2/S/D30_8337_nx2_640-S.jpg" alt="californie" />
    </div>
    
    <div class="right-div">
    <p style="text-align: center;font-family: Karla,Roboto,Helvetica,Arial,sans-serif;font-style: normal;color:#87878C;font-size: 16px;font-weight: 400;">
    
  
     
    
      <span style="font-size:20px;color:#EDEDF0;">Prints Options</span>
      <br /> <br />
      
      Each image has five size options :<br /> <br />
      
      <strong>20 x 30 cm :</strong> 40 euros<br />
  <strong>30 x 40 cm :</strong> 45 euros<br />
  <strong>40 x 40 cm :</strong> 50 euros<br />
  <strong>40 x 50 cm :</strong> 55 euros<br />
  <strong>50 x 50 cm :</strong> 65 euros<br />
  <strong>50 x 70 cm :</strong> 80 euros<br />
          
    </p>
      <p style="text-align: center;font-family: Karla,Roboto,Helvetica,Arial,sans-serif;font-style: normal;color:#87878C;font-size: 16px;font-weight: 400;">
        
        You can choose different photographic finishing and paper: <br /> <br />
  
      Glossy finish – for the glossy “photo lab” look with bright,    rich and vibrant colors.  Glossy paper reflects the most amount of light, so your eyes will see the most color saturation, density, and brightness <br /> <br />
        Luster/Satin finish – what you’d expect from traditional photo lab prints. Luster and satin papers print bright colors and sharp details but because of their textured surfaces they lower reflections compared to glossy paper and make prints more resistant to fingerprints and smudges. <br /><br />
        Matte finish – with matte paper details are “king.” Matte paper is free of surface texture or reflections so every detail in the image is faithfully displayed with wonderfully saturated and bright colors.<br /><br />
  
        If you need a size that’s not available to be ordered let me know that as well since most images can be printed in these sizes although some cropping of the original image could occur.<br /><br />
  
        <i>To order, simply send me a email with the name of the image, the print size and paper type.  Payment can be made securely through PayPal.</i>
      
      
    
  </p>
  
    </div>
    
  </div>
  
  
  <hr />
  
  <p>hallo</p>
  

  
  
  
  many thanks for the advises
  best regards
  
  marc

  0
• Options

  rht Registered Users Posts: 44 Big grins

  October 2, 2013 edited October 2, 2013

  Clear:none means that the elements will flow alongside each other. If you clear:both, they will not flow alongside each other, the left and right sides will be cleared.
  
  Clear right clears the right, clear left, the left side and so on.
  
  I think tables are still okay to use for presenting tabular data, but it isn't good practice to use them for page layout.
  
  The HTML block is extremely useful. That's how I got a news section on my homepage. I couldn't see a very simple way to adjust a default content block to do that, and certainly not in the way I wanted it.
  
  Your HR is okay.
  
  And yes, my bad, you can use 50% in one and nothing in the other. Your last section on the page seems to be working how I think you wanted it to work.

  w: Reheat Images
  Torn between cycling and photography!
  

  0