11 Replies Latest reply: Nov 8, 2009 11:06 AM by Stuart Haiz RSS

    Help with css float

    Stuart Haiz Community Member

      I have a layout that I need help with please. The bright green panel is going to have a Flash file inserted but I need it to sit inside the detailsWrapper div, which needs to stretch to allow this to happen. The content is being generated through php modules and the details will vary in length, so I'm having difficulty styling this. I'm sure it's something obvious but I need help please!

       

      Here's the link: http://www.designermagic.co.uk/hobarts/reapitDetails.php?clearcache=true&pagevars=1-bedroo m-property-for-sale-in-London-N22-hobrps-ALE090002

        • 1. Re: Help with css float
          E. Michael Brandt Community Member

          Try adding this css to your style sheet:

           

          div#detailsWrapper [

               overflow:hidden;

          }

           

          if that does not work well, you can try overflow:scroll

           

          OR alternatively you may be able to do this:

           

          div#detailsWrapper [

               float:left;

          }

           

          For other options see this:

           

          http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.asp

           

          -- 

          E. Michael Brandt

          www.divahtml.com
          www.divahtml.com/products/scripts_dreamweaver_extensions.php
          Standards-compliant scripts and Dreamweaver Extensions

          www.valleywebdesigns.com/vwd_Vdw.asp
          JustSo PictureWindow
          JustSo PhotoAlbum, et alia

          --
          • 2. Re: Help with css float
            Stuart Haiz Community Member

            Thanks Michael

             

            Unfortunately, no luck! I'll have alook through the link and see if I can find anything there.

            • 3. Re: Help with css float
              Nancy O. CommunityMVP

              Your CSS code could use some tidying up. It's kind of a mess.  See details below.

              http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. designermagic.co.uk%2Fhobarts%2FreapitDetails.php%3Fclearcache%3Dtrue%26pagevars%3D1-bedro om-property-for-sale-in-London-N22-hobrps-ALE090002

               

              These statements are redundant.


              html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, {
                  margin: 0;
                  padding: 0;
                  border: 0;
                  outline: 0;
                  font-size: 100%;
              }
              * {
              margin: 0;
              padding: 0;
              }
              body {
                  margin-left: 0px;
                  margin-top: 0px;
                  margin-right: 0px;
                  margin-bottom: 0px;

               

              Try changing the above code to just this.  * = the universal selector.

               

              * {
              margin: 0;
              padding: 0;

              border: 0;
              font-size: 100%;

              outline-style:none; /**outline is not on by default so unsure why you need this**/
              }

               

              More on CSS Shorthand

              http://www.dustindiaz.com/css-shorthand/

               

              And you have HTML code errors but the symbols in your document are blocking the validator from giving results.

              http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.designermagic.co.uk%2Fhobarts %2FreapitDetails.php%3Fclearcache%3Dtrue%26pagevars%3D1-bedroom-property-for-sale-in-Londo n-N22-hobrps-ALE090002

               

              After you fix the code errors, post back with a URL to the new page.

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              www.alt-web.com/
              www.twitter.com/altweb
              www.alt-web.blogspot.com

              • 4. Re: Help with css float
                Stuart Haiz Community Member

                Hi Nancy

                 

                Thanks for the advice and the helpful links. I have amended the css but can't do anything about the erroneous characters. They are due to data that a client has input and he's out of the office today!

                 

                The link is the same as above - I don't know if you will be able to get anywhere before those charcters are taken out but would appreciate some pointers.

                 

                Below is the area of code in my page that I'm trying to style:

                 

                <div class="detailsWrapper">
                <?php
                $module_obj = new RPW_property_details_obj();
                $module_obj->set_parameter("itemOrder", "price,title,images,buttons,contacts,reference,furnish,availability,brief description,accommodation summary,room by room,location,extras,caveat");
                $module_obj->set_parameter("imageSetWidth","700");
                $module_obj->set_parameter("showFullDetails", 1);
                $module_obj->set_parameter("showRoomDesc", 1);
                $module_obj->set_parameter("roomDescShowName", 1);
                $module_obj->set_parameter("roomDescShowSize", 1);
                $module_obj->set_parameter("roomDescShowDesc", 1);
                $module_obj->set_parameter("units","m");
                $module_obj->set_parameter("showBothUnits", 1);
                $module_obj->set_parameter("mainImageWidth","440");
                $module_obj->set_parameter("mainImageHeight","320");
                $module_obj->set_parameter("imageSetType","lightbox");
                $module_obj->set_parameter("useLightboxOnClick", 0);
                $module_obj->set_parameter("pdfButtonText", "PDF Details");
                $module_obj->set_parameter("mapButtonText", "Location");
                $module_obj->set_parameter("hipButtonText", "HIP");
                $module_obj->set_parameter("emailButtonText", "Email Us");
                $module_obj->set_parameter("showOfficeName", 1);
                $module_obj->set_parameter("showTenure",1);
                $module_obj->write_html();
                ?>
                <p class="detailsCalc"><br /></p>
                </div>

                 


                Thanks - I hope you can make something of this! BTW - I'm in the UK hence the delays in my replies.

                • 6. Re: Help with css float
                  E. Michael Brandt Community Member

                  Your'e gonna kick yourself.  detailsCalc has position:absolute, complete with top/right coordinates, which takes it out of page flow.  Gotta remove that:

                   

                  .detailsCalc {
                  background-color:#00FF00;
                  height:550px;
                  position:absolute;
                  right:10px;
                  top:560px;
                  width:350px;
                  }

                  -- 


                  E. Michael Brandt

                  www.divahtml.com
                  www.divahtml.com/products/scripts_dreamweaver_extensions.php
                  Standards-compliant scripts and Dreamweaver Extensions

                  www.valleywebdesigns.com/vwd_Vdw.asp
                  JustSo PictureWindow
                  JustSo PhotoAlbum, et alia

                  --
                  • 7. Re: Help with css float
                    Stuart Haiz Community Member

                    Thank you Michael

                     

                    That has helped me to get closer to what I want. I have taken off the position attributes. That didn't work on it's own, it just moved the <p> outside of the detailsWrapper div. I also had to move the html to get the detailsCalc inside the wrapper, (new code below.) I also added a float: right; and tried clearing but that didn't get it where I want either. The problem seems to be that I need to be able to somehow insert my code into the generated content. I have tried using <<<HEREDOC without success. Also attached is an image of where I would like it to be, with the text wrapping to the left of it.

                     

                    Is this something that can be done at design-level?

                     

                    My current code:

                     

                    <div class="detailsWrapper">
                                <p class="detailsCalc"><br />
                                </p>
                                <?php
                    $module_obj = new RPW_property_details_obj();
                    $module_obj->set_parameter("itemOrder", "price,title,images,buttons,contacts,reference,furnish,availability,brief description,accommodation summary,room by room,location,extras,caveat");
                    $module_obj->set_parameter("imageSetWidth","700");
                    $module_obj->set_parameter("showFullDetails", 1);
                    $module_obj->set_parameter("showRoomDesc", 1);
                    $module_obj->set_parameter("roomDescShowName", 1);
                    $module_obj->set_parameter("roomDescShowSize", 1);
                    $module_obj->set_parameter("roomDescShowDesc", 1);
                    $module_obj->set_parameter("units","m");
                    $module_obj->set_parameter("showBothUnits", 1);
                    $module_obj->set_parameter("mainImageWidth","440");
                    $module_obj->set_parameter("mainImageHeight","320");
                    $module_obj->set_parameter("imageSetType","lightbox");
                    $module_obj->set_parameter("useLightboxOnClick", 0);
                    $module_obj->set_parameter("pdfButtonText", "PDF Details");
                    $module_obj->set_parameter("mapButtonText", "Location");
                    $module_obj->set_parameter("hipButtonText", "HIP");
                    $module_obj->set_parameter("emailButtonText", "Email Us");
                    $module_obj->set_parameter("showOfficeName", 1);
                    $module_obj->set_parameter("showTenure",1);
                    $module_obj->write_html();
                    ?>
                              </div>

                    • 8. Re: Help with css float
                      E. Michael Brandt Community Member

                      I've been looking at this for some time now, and cannot see a way clear.

                       

                      The only solution I can see is a messy one, involving re-writing the html client-side using DOM scripting.  It would not fail gracefully though, so would not really consider it.  That said,m I am not really able to map in my mind the relationship of the php code you sent and the page, so if you can see some way to move the green box code into the div <div class="contacts" which unfortuantely has no id, then you might be able to get this to work out.

                       

                      Someone far more clever than I might be able to do this within the constraints imposed upon you by virtue of your not being able to control all the html yourself, so I will sit on the sidelines now and watch who else might pop into the thread.  Sorry I could not help more.

                       

                      --

                      E. Michael Brandt

                      www.divahtml.com
                      www.divahtml.com/products/scripts_dreamweaver_extensions.php
                      Standards-compliant scripts and Dreamweaver Extensions

                      www.valleywebdesigns.com/vwd_Vdw.asp
                      JustSo PictureWindow
                      JustSo PhotoAlbum, et alia

                      • 9. Re: Help with css float
                        Stuart Haiz Community Member

                        Michael

                         

                        Thank you ever so much for giving your time to try to help me solve this.

                        Using Firebug, I too came to the same conclusion that I need to get into the contacts div to make this work. Unfortunately, it is part of the generated data and as you say, has no id.

                         

                        I think this might well be a case of trying to do something that is just not possible, unless I can persuade the Property portal to amend the underlying code. That is going to be my only real option unless the client can accept that what they want can't happen!

                         

                        Many thanks.

                         

                        BTW - I use divaFAQ on a few sites and it is always popular with my clients. Thanks too for that.

                        • 10. Re: Help with css float
                          E. Michael Brandt Community Member

                          I think this might well be a case of trying to do something that is just not possible

                          Yeah i do think so.

                           

                          I use divaFAQ

                          Glad you are finding it useful.

                           

                          At this point, since it does seem like this has hit a wall, it might be good to mark this thread as Answered so the folks who help will not have to keep clicking on it.  Thanks!

                           

                          --

                          E. Michael Brandt

                          www.divahtml.com
                          www.divahtml.com/products/scripts_dreamweaver_extensions.php
                          Standards-compliant scripts and Dreamweaver Extensions

                          www.valleywebdesigns.com/vwd_Vdw.asp
                          JustSo PictureWindow
                          JustSo PhotoAlbum, et alia

                          --
                          • 11. Re: Help with css float
                            Stuart Haiz Community Member

                            Answered! Thanks Michael.