SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    faux columns not working[pls help]

    Hi,

    I read the faux columns description on Tried to do the same for my site located at
    Although i have a image and have tiled it as shown in the code below, i dont get the effect desired. Can someone tell me why?

    Thanks in advance

    Code:
    <div id="container">
      <div id="header">
        <!-- A 100 px height header -->
      </div>
      <div class="buttons">
        <!-- The class with the style def 
            background-image: url(../images/strip.gif);
    	background-repeat: repeat-y;
            width:160px;
            float:left;
     -->
      </div>
       <div class="contents">
    The main contents. Often longer than the buttons div.
     </div>
    <div class="footer">
    <!-- 100 % width float left clear both -->
    </div>
    </div>

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made the following change still doesnt work.

    And where is the CSS FAQ btw?

    Code:
     <div id="container">
      <div id="header">
        <!-- A 100 px height header -->
      </div>
      <div class="wrapper">
    <!-- The class with the style def 
            background-image: url(../images/strip.gif);
    	background-repeat: repeat-y;
            width:160px; 
    -->
    <div class="buttons">
        Why doest this faqux column work ???
      </div>
      </div>
        
     -->
      </div>
       <div class="contents">
    The main contents. Often longer than the buttons div.
     </div>
    <div class="footer">
    <!-- 100 % width float left clear both -->
    </div>
    </div>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay got the FAQ page but i didnt quite understand what do u mean by floats not cleared

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually dont understand the problem. Its easier to understand the solution once u understand the problem. What do u mean by not clearing floats? Is this because i use FF 1.5+?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks for the nice demo. I finally understand what you mean. I applied the hack and now my floats are cleared or so i think
    Check
    http://www.cse.iitb.ac.in/~mohitz/new_mohit/test.php

    The red lines are borders for the two wrappers. But still doesnt solve my problem of faux columns. HAve i made a mistake somewhere

    Thanks a ton again

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem here is when i use clearfix on the wrapper it clears both side. However i need the content text on the right. So, how exactly am i supposed to do it?

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    on the container and the wrapper

    <div id="container" class="clearfix">
    <div id="header">
    <!-- Some fixed height stuff over here -->
    </div>
    <div id="wrapper" class="clearfix">
    <div class="buttons">
    Why doest this faqux column work ???
    </div>
    </div>
    <div class="contents">
    The content supposed to be on the right sits here
    </div>
    </div>

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my clearfix code after removing the visibility:hidden
    wrapper and containers are #
    clearfix is .


    .clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    }
    .clearfix {
    display:inline-block;
    }
    /* mac hide \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide */

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont get you. ANyways modified my style.css to be really short and only contain what is needed Please tell me what needs to be done.

    I know this might be quite frustrating for you but give it a last chance.

    Thanks

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ohhh

    I had given the path wrong. Corrected it. Thanks
    But how do i now get the contents to the right of the wrapper. I guess i will have to remove the clearfix class for that.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Finally made it. []

    Thanks a ton dude, thanks a lot


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •