#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    England
    Posts
    21
    Rep Power
    0

    Css Image alignment problem! argh!!


    Hi

    I am new at css and I am having a few problems!

    I have a page which is spilt into three cols, a header taking up the length of the page, the main content and a right navigation column.

    I am trying to get a gallery of small thumbnails together. Basically I have got it so that it displays an image with some text aligned to the right of the image. Then a bit further to the right another image and more text aligned to the right. I basically want to recreate this 2 images/2 bits of text per "row". It seems to work ok, but when you rezise the browser window the further most image seems to overlap the right navigation. In 800x600 in netscape the "right" image just doesnt display at all!!

    Is there a better way to code this so the images/text neatly wrap if the browser window is resized?

    Here is my css for the right col:

    #rightcol {
    position: absolute;
    left: 85%;
    top: 15%;
    margin-top: 0;
    padding-top: 0;
    font-size: 0.8em;
    }

    css for the content col:

    #content {
    margin: 0 22% 0 0;
    padding-left: 1.5%;
    font-size: 0.8em;
    }

    Css for the images:-

    .medpics img {
    float: left;
    margin-right: 0.5em;
    border: 0.1em outset #ffffff;
    }

    .medpics {
    float: left;
    margin-top: 15px;
    width: 350px;
    }

    HTml:-

    <div class="medpics">
    <img src="eg_med.gif" width="40" height="50" />
    Lorem ipsum dolor sit amet<br />
    adipiscing elit, sed diam nonummy
    </div>

    <div class="medpics">
    <img src="eg_med.gif" width="40" height="50" />
    Lorem ipsum dolor sit amet<br />
    adipiscing elit, sed diam nonummy
    </div>

    <div class="medpics">
    <img src="eg_med.gif" width="40" height="50" />
    Lorem ipsum dolor sit amet, consectetuer<br />
    adipiscing elit, sed diam nonummy
    </div>

    Can any one help? Thanks!!
    Last edited by Mr X; July 25th, 2003 at 08:44 AM.

IMN logo majestic logo threadwatch logo seochat tools logo