html block : image on right, text on left

grosloulou

hallo,
For a page like :
http://www.labrophotography.com/Buy-images

if i use a img float left in a <p> and i have a long text, text goes below the image instead of remaining on right.

how can i have two parts : left for image an right for text ?



it seems obvious to use table with image in a td and text in the second td but it is not very "beautiful pro code"

i would say two containers, one for the image 40% width and remaining 60% for text and in this 60% we can choose <p> align left or center

I have attached code from :
http://www.dgrin.com/showthread.php?p=1915273#post1915273

HTML :

<div class="image_line">

  <p style="text-align: center;font-family: Karla,Roboto,Helvetica,Arial,sans-serif;font-style: normal;color:#87878C;font-size: 16px;font-weight: 400;">
  

    <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" />
  
    <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 />
    <br /> <br /> <br /> <br /> <br />
    
  </p>
    <p style="text-align: left;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>

<hr />

CSS :

a {
  color: #87878C;
  text-decoration: none;
}

a:link {
  color: #87878C;
  text-decoration: none;
}

a:hover, a:focus {
  color: #cccccc;
  text-decoration: underline;
}

p, ul {
  margin-top: 0px;
  margin-right: 0;
  margin-bottom: 1em;
  margin-left: 0;
}

ul li {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 2em;
  list-style-type: square;
}

.image_right {
  padding: 5px;
  border: 1px solid #ccc;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 20px;
  float: right;
}

.image_left {
  padding: 5px;
  border: 1px solid #ccc;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 20px;
  float: left;
}

b, strong {
  font-weight: bold;
}

hr {
  clear: both;
}

.image_line {
  overflow: hidden;
  margin: 20px 0;
}

thanks
best regards
marc

rht

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.

grosloulou

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

rht

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.