Advanced Search

Results 1 to 5 of 5

Thread: Help with CSS rows and columns

  1. #1
    Join Date
    Mar 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with CSS rows and columns

    Hello,

    I want to create a layout that has a header, footer, and body with two columns. I can do the header/footer fine, but the body is tricky. The body will contain information about my members in two columns; one column holds a picture, the other text about them. I want the order to switch on alternating lines like this:

    image text.text.text.text
    text.text.text.text image


    The text sections are variable in height and generally taller than the image. I think this is breaking my format because things aren't lining up properly. The text blocks are working, but the second picture is displaying under the first image, not to the right of the second text block. It looks fine in DW MX 2004 and IE, but not Firefox. Here is my CSS related to this:

    .left_pic {
    float: left;
    width: 150px;
    }

    .right_text {
    float: right;
    width: 510px;
    }

    .right_pic {
    float: right;
    width: 150px;
    }

    .left_text {
    float: left;
    width: 510px;
    }

    Any ideas how I can force the "right" image to display properly?

    Thank you!

  2. #2
    Join Date
    Mar 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I think I figured it out. I added a couple more div tags shown below:

    .about_table {
    display: table;
    }

    .about_row {
    display: table-row
    }

    Is this proper CSS though? It seems to work, but I'm really trying to break free of using "tables".

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    how are you declaring the "headers" for the users information.

    .about_table {
    display: table;
    }

    .about_row {
    display: table-row
    }

    Is this proper CSS though? It seems to work, but I'm really trying to break free of using "tables".
    the table value of the display function is not supported widely.

    have you thought about using an unordered list with the css style display:inline ?

    then you can use another style to float the image on the left / right

    HTML Code:
    <div class="members right">
         <ul>
              <li>INFO TEXT</li>
              <li>INFO TEXT</li>
              <li>INFO TEXT</li>
         </ul>
         <img src="/path/to/image.ext" width="" height="" alt="__alt_desc__" title="__mouseover_text__">
    </div>
    <div class="members left">
         <ul>
              <li>INFO TEXT</li>
              <li>INFO TEXT</li>
              <li>INFO TEXT</li>
         </ul>
         <img src="/path/to/image.ext" width="" height="" alt="__alt_desc__" title="__mouseover_text__">
    </div>
    alt = textual representation of an image if the image cannot be displayed
    title = text that the user sees when he/she mouses over the image

    Code:
    div.members {clear:both}
    div.members ul li{
         list-style: none;
         display: inline;
    }
    div.right ul {float: left;}
    div.right img {float: right}
    
    div.left ul {float: right;}
    div.left img {float:left;}

  4. #4
    Join Date
    Mar 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by boogyman View Post
    how are you declaring the "headers" for the users information.
    By headers, I assume you mean thead, correct. I hadn't done that. Is it necesary?


    Quote Originally Posted by boogyman View Post
    have you thought about using an unordered list with the css style display:inline ?

    then you can use another style to float the image on the left / right

    HTML Code:
    <div class="members right">
         <ul>
              <li>INFO TEXT</li>
              <li>INFO TEXT</li>
              <li>INFO TEXT</li>
         </ul>
         <img src="/path/to/image.ext" width="" height="" alt="__alt_desc__" title="__mouseover_text__">
    </div>
    <div class="members left">
         <ul>
              <li>INFO TEXT</li>
              <li>INFO TEXT</li>
              <li>INFO TEXT</li>
         </ul>
         <img src="/path/to/image.ext" width="" height="" alt="__alt_desc__" title="__mouseover_text__">
    </div>
    alt = textual representation of an image if the image cannot be displayed
    title = text that the user sees when he/she mouses over the image

    Code:
    div.members {clear:both}
    div.members ul li{
         list-style: none;
         display: inline;
    }
    div.right ul {float: left;}
    div.right img {float: right}
    
    div.left ul {float: right;}
    div.left img {float:left;}
    Interesting. I like this approach. It seems much more elegant. I do have a question though.When naming a class like this <div class="members right">, do both names apply seperately? It looks like you are applying CSS as .members and .right. Am I correct?

    Thank you

  5. #5
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    that is correct, by separating the words with a space you are assigning the element to two classes. it would be the same as if you were to declare it incorrectly as below
    Code:
    <div class="members" class="right">

Bookmarks

Posting Permissions

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