SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div header problem

    Hi there, I'm running into a problem, I don't have the actual website up online but its pretty straight forward. I have a header that consists of 2 cropped images. They go left to right, then the navigation underneath. The problem that I'm running into is trying to have them both on the same line side by side, but it keeps fighting me. I'm trying to stay away from tables, so I'm using divs, I'm not really sure what I could do, maybe put them in a list or what would you think work best? thanks for any help.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Just set them to float:left and they will be side by side . Floating gets elements lined up next to each other.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, then underneath for the navigation div, would i have to do something like clear: both, or no? also im wondering for the images, would i put them in span tag and set a class to float:left for both or just the one?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Depends on how your HTML is structured, if the two divs you just floated are contained with a parent, all the parent needs is overflow:hidden (and if you are supporting IE6, then a haslayout mechanism like zoom:1)

    If no such parent exists, then yes a clear:both will be needed to make sure it doesn't snag

    Edit-Both need to be floated (not technically but just float both), but I thought you siad these were <div>'s and not <span>'s ?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Depends on how your HTML is structured, if the two divs you just floated are contained with a parent, all the parent needs is overflow:hidden (and if you are supporting IE6, then a haslayout mechanism like zoom:1)

    If no such parent exists, then yes a clear:both will be needed to make sure it doesn't snag

    Edit-Both need to be floated (not technically but just float both), but I thought you siad these were <div>'s and not <span>'s ?
    yea i have them contained in a div.

    i got the #header div, which both are inside, then I applied #header img to both of them, would that be considered correct practice for css?

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Not quite sure I follow. You applied #header img to both of them? What does that mean? Do you mean you applied float:left to both? If so, then yes that's fine (though if you have more images in the header in the future then you would need to edit it
    Always looking for web design/development work.
    http://www.CodeFundamentals.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
  •