4 Replies Latest reply on Apr 8, 2010 1:01 PM by John Waller

    CSS FLOATS - Can someone point me to the right tutorial?

    WRobN1

      I know the basics of floats but have some problems.

      I searched for tutorials on google but didnt exactly find the awnser (or it were site to technical to understand)

       

      I can do this:

       

       

      <div id="Container">
      <div id="Header"><p>HEADER</p></div>
      <div id="Menu"><p>Menu</p></div>
      <div id="Content"><p>Content</p></div>
      <div id="Footer"><p>FOOTER</p></div>
      </div>
      
      #Container{
      
      position:absolute;
      margin:0 auto; 
      width:80%;
      background:none;
      height:auto;
      height:100%; 
      min-height:100%;
      margin-left: 10%;
      margin-right: 10%;
      
      }
      #Header{
      height: 195px;
      width:100%;
      }
      #Menu{
      float: left;
      width: 172px;
      height: 75px;
      background: none;
      position: relative;
      }
      #Content{
      margin-left: 220px;
      height: auto;
      min-height:50%;
      width: auto;
      max-width:100%;
      min-width:77%;
      padding: 20px 20px 20px 20px;
      border-left: solid 1px #999;
      border-bottom: solid 2px #999;
      border-top: solid 1px #999;
      border-right: solid 2px #999;
      }
      #Footer{
      
      height: 50px;
      width:100%;
      
      }
      
      

       

       

      One of the problems is that the content is 100% of the input.

      So if i fill it with lots of text it lines out great, but if i enter one single word into the div it will wrap the div arround the word.

      Normally i happens also with the height. But thats supposed to be.

       

      This is it with text filled:

      __________________________

      |test test test test test test test|

      |_________________________|

       

      This is it with single word:

      ____

       

      |test|

      |___|

       

       

      Wich needs to be:

       

      __________________________

      |test                                       |

      |_________________________|

       

       

      But i dont want a fixed width in pixels! I want it to stretch a bit so it shows nice on high res as well low res.

      The problem is a fixed menubar floating to the left of the content. How do i need to treat the content so it will aways be lined up to the end of the header?

       

      <             HEADER            >      100% width of Container

      <MENU><     CONTENT     >      fixed width 172px  -  the remaining content needs to stretch so its lined up to the headers right.

       

      ________________________________________________________________________________________

       

       

      Also i need to know how to treat floats in floats.

      My footers behaviour is wrong, if i make my browsers window small, the footer is under the content but its behind the menu.

      Its because i used Spry panels who are treated as floats also. And i dont know how to clear the footer from the content as well as the menu.

      For example, if i have the setup from above and i want to treat the content div as a new "Container" wich has floats in it, how do i do it?

       

      Any help, links to good tutorials, etc would be nice.

       

      If you like to see the Footer problem and line up problem: http://www.wientjesvoegwerk.nl/

      Notice the lineup from the content. Press "INFO" and notice the content change. Its width is smaller then supposed. It should always have the same width.

      Now make your browser window small (still on "INFO" page) You only need to make the width small.

      Now you will see the footer is behind the menubar but at the bottom of the content.

       

      So i need some help or a good tutorial on how to solve this.