Skip navigation
Currently Being Moderated

Child DIV's collapsing?

Mar 12, 2013 11:47 PM

Tags: #fluid_grid #parent_div

Good day all, I was trying my hand with the fluid grid design feature on dreamweaver and ran into a problem with the child divs. I'm redoing an old site with this feature cause of my familiarity with the site....anyhow.

 

My problem is that in design view; the images shrink as soon as I "wrap around selection" and assign them to a div, the images furthermore dissapear as soon as I float them to the left but they appear as soon as I opt the "live view option" and/or preview them on a browser. Are they dissapearing because their parent div is already floated to the left and I'm being redundant when I float them also. What is the cause of this behavior?

 

I looked for fixes and ran into these: "min-height: 100%; overflow-y: hidden; clear: both;" I understand that the fluid grid default setting's in dreamweaver come with the "clear: both;" as a default, that is named as the cultrip in many of the fixes that I found online, this leaves me at a loss as to why parent div's collapsing in design view? Is this a DM bug since all seems well in live view and on browsers? Or is it just me? I'd really like to fix my view in design mode as it would help me design better without having everything scrambled, only for it to appear properly in live mode...Here are screen shots that I took (I hope that you can see them).

 

 

before.PNGafter.PNG

 
Replies
  • Currently Being Moderated
    Mar 13, 2013 5:51 AM   in reply to BorneZeus

    The problem is likely caused by an unmanaged float. When you float an element within a container, the container will collapse around its non-floated content (since a floated element is removed from the normal flow, meaning that the container treats it as if it weren't really there). The solution is one of these three alternatives:

     

    1.  Apply an overflow:hidden style to the container (only do this if you have NOT specified a height for the container).

    2.  Float the container as well.

    3.  Add a clearing element (e.g., <div style="clear:both;"></div>) before closing the container.

     

    See if one of those fixes your problem.  If not, then we would need to see the HTML as well as the CSS.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 13, 2013 6:22 AM   in reply to BorneZeus

    Changing this -

     

        <div id="flags">

     

    to this -

     

        <div id="flags" style="overflow:hidden;">

     

    Will surely work, but a better solution would be to do this -

     

        <div id="flags">

          <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('us_flag','','_images/_main_site_logo/usa_r ollover.png',1)"><img id="us_flag" src="_images/_main_site_logo/usa.png" alt="American Flag"></a>

          <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('romanian_flag','','_images/_main_site_logo /romania_rollover.png',1)"><img id="romanian_flag" src="_images/_main_site_logo/romania.png" alt="Romanian Flag"></a>

         <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('czech_flag','','_images/_main_site_logo/cz ech_rollover.png',1)"><img id="czech_flag" src="_images/_main_site_logo/czech.png" alt="Czech Republic Flag"></a>

         <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sa_flag','','_images/_main_site_logo/sa_ro llover.png',1)"><img id="sa_flag" src="_images/_main_site_logo/sa.png" alt="South African Flag"></a>

        </div>

     

    In other words, remove the divs wrapping the images. You don't need them, and then you don't have any unmanaged floats in that container, so no collapse.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 13, 2013 10:45 AM   in reply to BorneZeus

    The recommendations I made worked for me with your page's code. If they didn't work for you then please make sure you did them as I suggested.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 15, 2013 4:55 PM   in reply to BorneZeus

    <bravo>

     

    You get the standing O!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points