Results 1 to 5 of 5
  1. #1
    Join Date
    May 2005
    Location
    Woking, England
    Posts
    1,396

    Basic CSS Layouts issue

    Hi, I'm not a massive CSS whizz but over the past couple of weeks I have been getting better. I am in the process of skinning a wordpress theme.

    I need a page which shows staff members with their photo on the left and some information on them on the right. Now, I can get this to work for the first staff member listed on the page.

    This is the CSS in the .css file

    Code:
    /*meet the team tables*/
    .meettheteam{
    	width: 550px;
    }
    .meettheteamleft {
    	float:left;
    	text-align: center;
    	width:130px;
    	border-right-width: 1px;
    	border-right-style: dotted;
    	border-right-color: #CCCCCC;
    }
    .meettheteamright {
    	float:right;
    	width:410px;
    }
    This is the snipit from the wordpress page file.

    Code:
    <div class="meettheteam">
    <h2>Their name - Position</h2>
    <span class="meettheteamleft">
    <img class="alignnone size-full wp-image-18" title="man" src="image file here.jpg" alt="man" width="101" height="142" />
    </span><span class="meettheteamright">
    information on them
    </span></div>
    This displays nicely, however, the issue I am having is when I copy this code to add other staff members. I'm sure i'm being stupid somewhere, but, basically their information starts on the right of this box and goes all weird.

    How can I get it so they all display properly, without bodging it with tables/making enough meettheteam1, 2, 3,4 to cover every staff member?

    Thank you in advance!!
    Web Handyman - Website and Internet Marketing Service

  2. #2
    Have you tried the Firebug Firefox plugin, a brilliant tool for diagnosing CSS problems.

  3. #3
    Did you try adding a clear div before the end of that code? like

    <div class="meettheteam">
    <h2>Their name - Position</h2>
    <span class="meettheteamleft">
    <img class="alignnone size-full wp-image-18" title="man" src="image file here.jpg" alt="man" width="101" height="142" />
    </span><span class="meettheteamright">
    information on them
    </span>
    <div class="clear"></div>
    </div>


    .clear {
    clear:both;
    }

  4. #4
    Let's put
    <div class="clear"></div>
    at the bottom, before the last div tag.

  5. #5
    Join Date
    May 2005
    Location
    Woking, England
    Posts
    1,396
    thanks guys. The clear tag has worked

    Unfortuantely, wordpress keeps deleteing it when I go on visual mode, rather than HTML mode. Silly software
    Web Handyman - Website and Internet Marketing Service

Similar Threads

  1. Turnkey Layouts - Your Source for Myspace Resource Layouts!
    By R. Solutions in forum Design Offers
    Replies: 1
    Last Post: 10-15-2006, 04:17 AM
  2. MySpace Layouts Package - 75 awesome layouts
    By SmileServe in forum Design Offers
    Replies: 1
    Last Post: 09-15-2006, 11:11 AM
  3. [ SELL ] Layouts as low as $10 - UNIQUE layouts
    By sletts02 in forum Design Offers
    Replies: 6
    Last Post: 12-30-2005, 08:26 PM
  4. Replies: 1
    Last Post: 09-26-2005, 05:17 PM
  5. Replies: 1
    Last Post: 03-23-2003, 03:12 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •