www.webdeveloper.com
Results 1 to 8 of 8

Thread: Add space between image and table without br tag

  1. #1
    Join Date
    Jan 2011
    Posts
    4

    Add space between image and table without br tag

    Hello folks, sorry for the remedial question but I have an image that is aligned to the left and I want my table to sit centered below the image. I have tried to increase the padding and margin spacing, but the only method that seems to work are < b r > tags, which feels unprofessional.

    Thanks for any help!

  2. #2
    Join Date
    Feb 2011
    Location
    South Carolina
    Posts
    25
    Can you post your code?

  3. #3
    Join Date
    Jan 2011
    Posts
    4
    The just of the code is

    <img href="someimage.jpg" align="left">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor vel dui bibendum consectetur id sit amet nisi. Cras.
    </p>
    <br>
    <br>
    <div align="center">
    <center>
    <table
    <div align="center">
    <center>
    <table border="0" cellpadding="10" cellspacing="0">
    <tr>
    <td>some type</td>
    </tr>

    </table>
    </center>
    </div>

  4. #4
    Join Date
    Feb 2011
    Location
    South Carolina
    Posts
    25
    Quote Originally Posted by sirdanfortesque View Post
    The just of the code is

    <img href="someimage.jpg" align="left">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor vel dui bibendum consectetur id sit amet nisi. Cras.
    </p>
    <br>
    <br>
    <div align="center">
    <center>
    <table
    <div align="center">
    <center>
    <table border="0" cellpadding="10" cellspacing="0">
    <tr>
    <td>some type</td>
    </tr>

    </table>
    </center>
    </div>
    To center a table, use CSS:
    Code:
    table { margin:auto; }
    Also, your code had a lot of unnecessary tags. This is all you need:
    Code:
    <table border="0" cellpadding="10" cellspacing="0"> 
    <tr> 
    <td>some type</td> 
    </tr> 
    
    </table>
    You can see my example here.

  5. #5
    Join Date
    Jan 2011
    Posts
    4
    Oops, I accidentally pasted the script twice and I wasn't clear about what I am trying to achieve.


    http://dshanson.com/test This is a better example of what I am trying to achieve, but without using the < b r > tag to create the spacing. I want the image aligned left to allow the text to wrap around the image. After that small change, the table wants to cram itself between the image and the containing div such as this example http://dshanson.com/test2
    Last edited by sirdanfortesque; 02-02-2011 at 08:32 PM.

  6. #6
    Join Date
    Feb 2011
    Location
    South Carolina
    Posts
    25
    Ahh I see!

    Okay, here's what I did. I created CSS class .alignleft and floated it left and added that to the image tag. Then, I add "clear:both;" to the table selector.
    Code:
    .alignleft { float:left; }
    table { margin:auto; clear:both; }
    Code:
    <img src="http://images.shizucor.com/mermaid-site-wip.jpg" class="alignleft" />

  7. #7
    Join Date
    Jan 2011
    Posts
    4
    Awesome. Thanks for the help!

  8. #8
    Join Date
    Feb 2011
    Location
    South Carolina
    Posts
    25

    Smile

    You're welcome! Glad I could help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles