Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with div rows

    Hello all,

    I am having an issue with html. This might be a design issue or a technical issue I am not sure yet. What I have is a row of div tags that are generated in php with a for loop and. Each <div> tag contains an <img> tag and a <label> tag. All the <div> tags have the same id.

    When the page loads it will load the <div> tags in a vertical line. The best i can do is make this a list and display it inline, but then I get a horizontal line with no wrapping.

    Ultimately, what I want is rows of pictures with a label under them that will autowrap when the browser is re-sized. Nothing more, nothing less. Let's assume that I have no css and here is basic structure for the repeating div tags:

    <div class="item_picmenu_item" id="item_picmenu_item">
    <img src="somepic.jpg"><br>
    <label>Some label</label>
    </div>

    Thanks in advance

  • #2
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    Well you can lose the id attribute on the div unless each div has a different ID value.

    You can achieve the affect you are going for by floating the divs. e.g.

    Code:
    .item_picmenu_item
    {
    
    float: left;
    }
    And that should cause them to auto-wrap depending on the browser width.

    Some thing very similar to what you are implementing is discussed in this article: http://www.alistapart.com/articles/practicalcss/
    OracleGuy

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh it was so simple it makes me want to cry.


  •  

    Posting Permissions

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