8 Replies Latest reply on Mar 15, 2010 9:34 AM by EagerBob

    div height and float

    EagerBob Level 2

      Hello Webwarriors,

       

      I am working on a site: link

       

      Inside the "mainContent" div there is an "imagebox" div which has some pictures in it. This will later become a gallery/slideshow thing.

      This imagebox is floated to the left.

       

      To the right of it comes some text, where you see the Heading 2 followed by the Lorem Ipsum dummy text now.

       

      I want the white background of this text, which is white, to always be the whole height of the imagebox div whatever size that is.

      So the white background should always extend until the footer, and if the text should become longer the footer should move down.

       

      What am I missing?

        • 1. Re: div height and float
          osgood_ Level 8

          EagerBob wrote:

           

          Hello Webwarriors,

           

          I am working on a site: link

           

          Inside the "mainContent" div there is an "imagebox" div which has some pictures in it. This will later become a gallery/slideshow thing.

          This imagebox is floated to the left.

           

          To the right of it comes some text, where you see the Heading 2 followed by the Lorem Ipsum dummy text now.

           

          I want the white background of this text, which is white, to always be the whole height of the imagebox div whatever size that is.

          So the white background should always extend until the footer, and if the text should become longer the footer should move down.

           

          What am I missing?

           

          Add overflow: hidden; to the 'mainContent' css selector and a background-color: #FC0; so you can see the effect (see below). Then change the background-color to what is required.

           

          .twoColFixLtHdr #mainContent {
              margin: 0 0 0 144px;
             overflow: hidden;
          background-color:#FC0;
            }

          • 2. Re: div height and float
            martcol Level 4
            .twoColFixLtHdr  #mainContent {
            background:none  repeat scroll 0 0 #FFFFFF;
            margin:0 0 0 144px;
            overflow:hidden;
            }

            Does that work?

            If it does, it's too complicated for me to explain!  It has something to do with the floated elements in a container spilling out of the container.  It's connected to something called haslayout which I think is part of the Microsoft conspiracy to rule the world.

            Martin
            1 person found this helpful
            • 3. Re: div height and float
              martcol Level 4

              Ha! Osgood...

               

              Quick on the draw!

              • 4. Re: div height and float
                EagerBob Level 2

                "Does that work?"

                 

                O yes, that works, brilliant!

                 

                Thanks

                 

                Although strange things seem to happen in Safari (see the updated link in the opening post)

                • 5. Re: div height and float
                  osgood_ Level 8

                  EagerBob wrote:

                   

                  "Does that work?"

                   

                  O yes, that works, brilliant!

                   

                  Thanks

                   

                  Although strange things seem to happen in Safari (see the updated link in the opening post)

                   

                  Change the margin to 0px:

                   

                  .twoColFixLtHdr #mainContent { 
                       margin: 0 0 0 144px;
                       background: #FC0;
                      overflow: hidden;

                  }

                  As below:

                  .twoColFixLtHdr #mainContent {
                       margin: 0 0 0 0;
                       background: #FC0;
                      overflow: hidden;

                  }

                  • 6. Re: div height and float
                    martcol Level 4

                    I think you might have one too many </div>s going on there?

                    1 person found this helpful
                    • 7. Re: div height and float
                      martcol Level 4
                      .twoColFixLtHdr #mainContent h2 {
                           color:#cc0033;
                           font-size:1,5em;
                           padding: 10px 20px 0px 380px;     
                      }

                       

                      That should be a period not a comma

                      • 8. Re: div height and float
                        EagerBob Level 2

                        osgood_ wrote:

                         

                         

                        Change the margin to 0px:


                         

                         

                        Yes, that's it !

                         

                         

                         

                         

                         

                        martcol wrote:

                         

                         

                         

                        I think you might have one too many </div>s going on there?

                         

                        That should be a period not a comma

                         

                         

                         

                        Right, cleaned those things up too

                         

                        Thanks again!