Question

I am trying to add a left column to a simple web page that I am building primarily out of CSS and HTML. It is basically just an image in the center with text bellow and a small column on the right describing it. I am trying to make it look like the image is a polaroid image and I think I have gotten that down but I am having trouble adding a left column with text to the site…

Can anyone lend me a hand?

I want the left column to be about the size of the margin on the left side at the moment…

Here is the whole site so far: https://www.dropbox.com/s/kpr1wy18uvv1ez5/picturesoftoday.zip

I tried creating a div ‘leftcol’ and then making it float:left; width: 200px; background-color: ccc; but nothing really seemed to work.

Sorry for the beginner questions..

Thanks,
Lucas

Answer 1

Lucas,

Try this –

Use this for style:

.leftcol {
    width:170px;
    height:auto;
    float:left;
 }

.polaroid {
    width:930px
    height:auto;
    float:left;
 }

.polaroid img {
    border: 20px solid #fff;
    border-bottom: 75px solid #fff;
    -webkit-box-shadow: 5px 5px 5px #778;
    -moz-box-shadow: 5px 5px 5px #778;
    box-shadow: 5px 5px 5px #778;
  }

Use this for HTML:

  <div class="leftcol">
     <p>Whatever you want in your left column</p>
    </div>
    <div class=polaroid">
       <p>October 29th, 2012<p>
       <img src="images/today.jpg" width="1000" height="670" border="0" />
    </div>

If you’re going to float one div to the left, make sure if you want one next to it you float them both left.