• Locked
No replies
Wed, 2016-03-16 15:23
rafael.soteldo
rafael.soteldo's picture
Offline
newbie
Last seen: 16 weeks 3 days ago
Timezone: GMT+12
Joined: 2015-10-24
Posts: 10
Points: 30

Hi there:

I'm new to CSS

I'm trying to write a two column fluid layout design and I ran into the "images and browser resizing" problem.

There's so many articles out there that deal with it.

I tried setting the image width with a percentage value, and it seemed to have solved the problem, without having to set the height (to auto or something), but I don't know if there is some downsize or danger in doing so.

This is an excerpt of my code, I set the image to occupy 100% of its column for simplicity:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>flexible layout</title>
    <style>
      body {
        width: 80%;
        background: white;
        margin: 0 auto 2em;
        font: 100% Georgia, "Times New Roman", Times, serif;
      }
      .col1 {
        float: left;
        padding-left: 2%;
        width: 60%;
      }
      .col2 {
        float: right;
        width: 34%;
        padding-right: 2%;
        font-size: 90%;
        line-height: 1.6;
      }
      img {
        width: 100%;
      }
      p {
        font-size: 1em;
        line-height: 1.5;
        margin-bottom: 1em;
      }
    </style>
  </head>
  <body>
    <section class="col1">
      <p>
        All men by nature desire to know. An indication of this is the delight we take in our senses; for even apart from their  
      <p>
      <p><img src="_images/Image.jpg" alt="An Image" >By nature animals are born with the faculty of sensation, and from sensation  
      </p>
      <p>
        The animals other than man live by appearances and memories, and have but little of connected experience; 
      </p>
    </section>
    <aside class="col2">
      <p>
        It is useful to have examined the number of meanings of a term both for clearness sake (for a man is more likely  
      </p>
      <p>
        For as long as it is not clear in how many senses a term is used, it is possible that the answerer and the questioner 
      </p>
    </aside>
  </body>
</html>

As you can see, in the img css I set the width only (I don't like to embed css into my html code), it seems to work just fine, if I resize the browser the images resizes as well accordingly, but I wander:

  • will it work well with other screen sizes
  • how well will it work with IE < 9
  • will it work well with the rest of the browsers
  • etc

Thanks in advance,

Rafael

Top
Tags: