CODEWITHSUNDEEP
csshtml
Lucas
Lucas

Reputation: 457

Add left Column To Web Page HTML/CSS

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

Upvotes: 0

Views: 8364

Answers (3)

Kelly Taylor
Kelly Taylor

Reputation: 68

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.

Upvotes: 1

Parker Young
Parker Young

Reputation: 1165

I went ahead and added a .leftcol column to the left side of your page, 200px in width. It's rough but I think this is what you were attempting. You had your body selector formatted like a class, so I removed the period. I also told your .polaroid div to float left along with the .leftcol

http://dl.parkrr.com/picturesoftheday.zip

Hope this helps!

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

you can assign the css property to your div for making it of size of the margin.dynamically you can set the width of div='leftcol' inside onload function.

and for making it fix, style position:fixed; will solve your problem. a fixed position element is positioned relative to the viewport, or the browser window itself.

Upvotes: 0

Related Questions