SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,027
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to force 2 DIVs one after another to start on new lines?

    Hello,

    I have a set of images displayed in a DIV like this:

    '<div class="image-float-left" style = "float: left;">' . $image_code. '</div>'

    And I want to place under these images another DIV, where the buttons are loacted.
    However, whatever I do the DIV that is to contain the buttons rather being located beneath the
    DIV containing the images is always located to its RIGHT!!

    What does one need to include in the DIVs coming after:

    '<div class="image-float-left" style = "float: left;">' . $image_code. '</div>'

    to force this 2nd DIV to get located beneath it and not to its right?

    ThanX.

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    We'd need to see this in context to know what's going on here.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by WorldNews View Post
    Hello,
    And I want to place under these images another DIV, where the buttons are loacted.
    However, whatever I do the DIV that is to contain the buttons rather being located beneath the
    DIV containing the images is always located to its RIGHT!!

    What does one need to include in the DIVs coming after:

    '<div class="image-float-left" style = "float: left;">' . $image_code. '</div>'

    to force this 2nd DIV to get located beneath it and not to its right?

    ThanX.
    As the images are floated then obviously any following content will sit to the side of the image unless you set it to clear or don't float the image at all.

    If you want pairs of elements floated then wrap them both in a parent div and float the parent instead.

    Code:
    <div class="image-float-left" style="float: left;">
    ' . $image_code. '
    
    <div class="button">Button</div>
    </div>

    or

    Code:
    <div style="float: left;">
     <div>' . $image_code. '</div>
    <div class="button">Button</div>
    </div>
    However as Ralph said we'd probably need to know more about what you have in place already.

  4. #4
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,027
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    I did what you suggested but it is not working.

    You can see a sample page here:
    http://www.anoox.com/news/profile_update_new.php

    This is a password protected section, so enter with these login info:
    Username: test-account
    Password: test_temp

    ThanX


    Quote Originally Posted by Paul O'B View Post
    As the images are floated then obviously any following content will sit to the side of the image unless you set it to clear or don't float the image at all.
    If you want pairs of elements floated then wrap them both in a parent div and float the parent instead.

    Code:
    <div class="image-float-left" style="float: left;">
    ' . $image_code. '
    
    <div class="button">Button</div>
    </div>

    or

    Code:
    <div style="float: left;">
     <div>' . $image_code. '</div>
    <div class="button">Button</div>
    </div>
    However as Ralph said we'd probably need to know more about what you have in place already.

    Anoox search engine volunteer

    www.anoox.com

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    There are better ways to do this, but adding clear: both to the div underneath will get you what you want:

    Code:
    <div align="center" style="display: block; block; width: 100%; border: blue 1px solid; clear:both;">

  6. #6
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,027
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks. This worked.
    I tell you though this darn CSS has given me so many headaches
    I dont know why but some how I have never fully grasped its nuances!

    Have good day anyway & happy new year

    Quote Originally Posted by ralph.m View Post
    There are better ways to do this, but adding clear: both to the div underneath will get you what you want:
    Code:
    <div align="center" style="display: block; block; width: 100%; border: blue 1px solid; clear:both;">

    Anoox search engine volunteer

    www.anoox.com

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by WorldNews View Post
    I tell you though this darn CSS has given me so many headaches
    Yes, I guess the key is to understand its nature, and how it relates to HTML, so that you can picture from the beginning the best way to set up your HTML. If you haven't already, I recommend getting a book or taking a course that builds the concepts from the ground up.

  8. #8
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,027
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What do you think is a best book on mastering CSS?
    FYI, I did buy a book or 2 here from SitePoint about this subject but they were not that good.
    ThanX.

    Quote Originally Posted by ralph.m View Post
    Yes, I guess the key is to understand its nature, and how it relates to HTML, so that you can picture from the beginning the best way to set up your HTML. If you haven't already, I recommend getting a book or taking a course that builds the concepts from the ground up.

    Anoox search engine volunteer

    www.anoox.com


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
  •