Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8

Thread: Nested Divs

  1. #1
    Junior Member nathacof's Avatar
    Join Date
    Sep 2006
    Posts
    10
    Member #
    14015
    I'm currently working on a webpage for my place of employment. On the reception page I'm having a problem with a <div> with boarders strectching to surround several <div>s inside. The only problem with this is when I float the nested divs in order to get the images lined up the border ignores them http://www.phoenixbehavioralhealth.com/phones.html. Is there a way to have the border automatically adjust to the size of the elements inside even if they are floating?
    Please ignore all the broken links to images I've been asking a coworker of mine to get me some images but to no avail as of yet.
    Any help on this issue would be appreciated!
    -Nathan
    "When the Power of Love overcomes the Love of Power the world will know peace" -Jimi Hendrix

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,755
    Member #
    5580
    Liked
    720 times
    I'm looking at it with FireFox and IE.

    Which browser does it appear correctly in?

    IE has the name above the photos and the border appears to
    go around both name and photo.

    Once you get photos in there, things might look different with FireFox.
    Put some blank .jpgs in there for now.


  4. #3
    Junior Member nathacof's Avatar
    Join Date
    Sep 2006
    Posts
    10
    Member #
    14015
    Well even in IE if the page width is adjusted to be smaller the last picture floats outside of the border.
    I don't understand why the containing element isn't expanding to "contain" the floating divs.

    Edit: I'm at work so I'm not able to create the blank jpgs :P
    -Nathan
    "When the Power of Love overcomes the Love of Power the world will know peace" -Jimi Hendrix

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,755
    Member #
    5580
    Liked
    720 times
    I see what you mean now.
    I have a large browser window, so I didn't notice that before.

    Without spending too much time looking at the CSS, I wasn't able to
    see the exact solution to the problem, but I'm thinking you might want
    to look at a CSS BLOCK property ... maybe something there might work.

    http://www.webdesignfromscratch.com/...and-inline.cfm

    I do know that IE has a lot of rendering problems when a browser
    window is resized. One possible solution might be to "fix" the width of
    your webpage instead of allowing it to be "fluid".


  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Yeah, floating elements are always ignored for width and height calculations. That's part of the specification for a floating element. That's why tricks such as faux columns must be used when using floating elements.

  7. #6
    Junior Member nathacof's Avatar
    Join Date
    Sep 2006
    Posts
    10
    Member #
    14015
    While I understand where you are coming from I think it would be a better idea to fix the width and height of the div because my site can flow around it without difficulties. I realize that once I get the pictures in they will be for the most part permanent so that shouldn't be an issue but thanks for your suggestion!
    I believe this is possible with the property "clear:bottom" but I'm not sure I'll have to try it out.
    -Nathan
    "When the Power of Love overcomes the Love of Power the world will know peace" -Jimi Hendrix

  8. #7
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Indeed, if you ask the next element in to clear: both (not bottom -- the options are left, right, and both), then it will pop the containing div to contain all of the stuff.

  9. #8
    Junior Member nathacof's Avatar
    Join Date
    Sep 2006
    Posts
    10
    Member #
    14015
    Indeed, if you ask the next element in to clear: both (not bottom -- the options are left, right, and both), then it will pop the containing div to contain all of the stuff.
    I realized that shortly after my post what I have done at this point is to align everything to the left and I guess all of my content will be running down the right side. This is not what I had originally intended but for now it's a sufficient work around I don't have the time to figure out how to get it exactly how I'd like it.

    [edit]
    Got it looking pretty good. Created placeholder.jpg so the site doesn't look so bad with broken images everywhere. And I have set the content to be center aligned with 2px padding on the left and right. I really like the look of it now. It seems better than my original concept. Only problem I'm seeing is in Firefox the background color of the names below the text isn't showing up. This only worries me because I trust Firefox more than IE, anyone know why it might be doing that?

    And so you don't have to scroll all the way back up ....
    http://www.phoenixbehavioralhealth.com/phones.html

    [/edit]
    -Nathan
    "When the Power of Love overcomes the Love of Power the world will know peace" -Jimi Hendrix


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:16 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com