SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div under another div doesnt line up correctly

    I am trying to have a div show an image on the left then text to the right of that image. So I float to divs next to each other, one to hold the image and one to hold the text. I then want the same exact setup underneathe it. The problem is the first div's work but when I add the second div underneathe the image in the second div shows directly under the text from the first div on the right then the text from the second div is pushed below the second image thats under the text and shows on the left. What am I doing wrong? Below is the code and here is the image showing how it looks:




    Code:
    #main_content
    {
     padding:20px;
     padding-top:10px;
    }
    #main_content #main_image
    {
     float:left;
     width:200px;
    }
    #main_content #main_text
    {
     float:left;
     width:320px;
     font-size:11px;
     font-family:verdana;
     color:#000;
     line-height:16px;
    }
    And here is how I implement it on the page:

    Code:
     <div id="main_image"><img border="0" src="images/reilly_hall.gif" height="130" width="190" style="border:1px #000 solid;"></div>
     <div id="main_text"><p><strong>Test title</strong></p>
     <p>Test text</p>
     </div>
     <div id="main_image"><img border="0" src="images/natatorium_field.gif" height="130" width="190" style="border:1px #000 solid;"></div>
     <div id="main_text"><p><strong>Test title</strong></p>
     <p>test text</p>
     </div>

  2. #2
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sillysoft,

    I believe all you need to do is float the image to the left and add a paragraph after it. The text should then default to the right of the left-floated image. Or, did I miss something?

    Alex
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  3. #3
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Alex View Post
    Sillysoft,

    I believe all you need to do is float the image to the left and add a paragraph after it. The text should then default to the right of the left-floated image. Or, did I miss something?

    Alex
    Ok after changing default text I now have the same issue as before. Here is the new div layout that Im using and the image of how it looks now:



    Code:
     <div id="main_image"><img border="0" src="images/reilly_hall.gif" height="130" width="190" style="border:1px #000 solid;"></div>
     <p><strong>test title</strong></p>
     <p>test text</p>
     <div id="main_image"><img border="0" src="images/natatorium_field.gif" height="130" width="190" style="border:1px #000 solid;"></div>
     <p><strong>test title</strong></p>
     <p>test text</p>

  4. #4
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was sort of able to get it working in both IE and FF by adding each div inside another div and float it. But I dont know if that is a proper way of doing it:

    Code:
     <div style="float:left;width:520px;">
     <div id="main_image"><img border="0" src="images/reilly_hall.gif" height="130" width="190" style="border:1px #000 solid;"></div>
     <p><strong>test title</strong>
     <p>test text</p>
     </p>
     </div>
     <div style="float:left;width:520px;">
     <div id="main_image"><img border="0" src="images/natatorium_field.gif" height="130" width="190" style="border:1px #000 solid;"></div>
     <p><strong>test title</strong>
     <p>test text</p>
     </p>
     </div>
    The problem with this is in IE there is a space between the first div and the second div but in FF they are directly on top of one another with no spacing.

  5. #5
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still having issues with this, any suggestions?

  6. #6
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think a better HTML structure would help you a lot. I'd recommend either wrapping each image and text combination in a single div, or using an unordered list.

    Also a quick note, you're using the same ID twice. An ID is unique, and can only be used once. For multiple items with the same styling, use classes. Also, avoid inline styles where possible - it will help prevent any future change headaches.

    Here's an easy example using the aforementioned div method:

    Code HTML4Strict:
    <div class="img">
        <img src="images/reilly_hall.gif" height="130" width="190" alt="" />
        <h2>Test Title</h2>
        <p>Test text.</p>
    </div>
    <div class="img">
        <img src="images/natatorium_field.gif" height="130" width="190" alt="" />
        <h2>Test Title</h2>
        <p>Test text.</p>
    </div>

    Code CSS:
    div.img {
        clear: both;
    }
     
    div.img img {
        float: left;
        margin-right: 10px;
        border: 1px solid #000;
    }
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com

  7. #7
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Aken View Post
    I think a better HTML structure would help you a lot. I'd recommend either wrapping each image and text combination in a single div, or using an unordered list.

    Also a quick note, you're using the same ID twice. An ID is unique, and can only be used once. For multiple items with the same styling, use classes. Also, avoid inline styles where possible - it will help prevent any future change headaches.

    Here's an easy example using the aforementioned div method:

    Code HTML4Strict:
    <div class="img">
    <img src="images/reilly_hall.gif" height="130" width="190" alt="" />
    <h2>Test Title</h2>
    <p>Test text.</p>
    </div>
    <div class="img">
    <img src="images/natatorium_field.gif" height="130" width="190" alt="" />
    <h2>Test Title</h2>
    <p>Test text.</p>
    </div>

    Code CSS:
    div.img {
    clear: both;
    }
     
    div.img img {
    float: left;
    margin-right: 10px;
    border: 1px solid #000;
    }
    Crud, cant believe I didnt catch that. I still have a long road ahead of me. Thank you all for your input. One last question, when I use the CSS above and apply it to the page it puts the divs on top of each other like it should but in IE there is a space between the divs but in FF there is not space between the divs. Any idea why?

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depends on which version of IE you are talking about. In decent browsers, the .img div in the code above will not actually surround the floated image, and the clear on subsequent divs is clearing the float hanging out the bottom of the div above it. A more consistent method would be to force the divs to actually surround the contents, and this can be done via the overflow for decent browsers, and tripping HasLayout via a width for IE6 :
    Code:
    div.img {
    overflow: hidden;
    width: 100%;
    }

  9. #9
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    Depends on which version of IE you are talking about. In decent browsers, the .img div in the code above will not actually surround the floated image, and the clear on subsequent divs is clearing the float hanging out the bottom of the div above it. A more consistent method would be to force the divs to actually surround the contents, and this can be done via the overflow for decent browsers, and tripping HasLayout via a width for IE6 :
    Code:
    div.img {
    overflow: hidden;
    width: 100%;
    }
    Good catch. Myself, if I was in your situation where the image was a set size each time, I would define a height for each div. Either method is fine.
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com

  10. #10
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a good SitePoint article explaining HasLayout, when you are likely to run into it, and how to fix: http://reference.sitepoint.com/css/haslayout
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com

  11. #11
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for the feedback, I will give it a try and see what happens. Another quick question, what is the proper way of making a space between the top and bottom div? Do you put another div inbetween and give it a height?

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I personally set margins but you had best read up on collapsing margins as it is a tricky subject.

    I wrote a peice on it myself
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You would use margins on the elements to push them further away. You shoold never need to add empty elements just to make space.

    Just apply a margin-bottom to the element on top and it will push the other element away.


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
  •