Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts

    float clear (after faux columns) help

    I just don't get it. Could you please take a look at here and tell me what to add to my css where? Here's the css:
    Code:
    body
    {
    margin:20px;
    padding:0px;
    text-align: center; /* gay IE5, very gay... */
    font-family:Arial, Helvetica, sans-serif;
    background: #767676;
    }
    #main
    {
    text-align:left; /* fixing IE5's mess */
    width:770px;
    margin:0px auto;
    background: url(images/bg.gif) repeat-y 50% 0;
    }
    img
    {border:none; padding:0px; margin:0px;}
    h1
    {
    color:#ffa500;
    font-size:54px;
    position:relative; left:45px; top:55px;
    margin:0px;
    }
    h2
    {
    color:#666666;
    margin:0px;
    font-size:24px;
    position:relative; left:45px;
    margin-top:65px;
    }
    #content
    {
    font-size:17px;
    float:left;
    padding:30px 50px 20px 30px;
    background:#999933;
    width:472px;
    /*990*/
    }
    #left
    {
    /*1040*/
    width:218px;
    float:left;
    background:#b97040;
    }
    p
    {margin:0px;margin-bottom:22px; padding:0px; color:#000000; font-size:18px; text-align:justify;}
    h3
    {
    font-size:23px;
    margin:0px 0px 22px 0px;
    color:#dddddd;
    background:#003366;
    display:inline;
    }
    h1,h2,h3
    {
    cursor:default;
    }
    #footer
    {
    border: 2px inset #FF9900;
    border-top:none;
    background:#003366;
    font-size:14px;
    padding: 0px 10px;
    text-align:center;
    color:white;
    }
    #header
    {
    height:200px;
    background:url(images/header.jpg) no-repeat top;
    text-align:center;
    }
    a:link
    {color:#CCFFFF; text-decoration:none;}
    a:visited
    {color:#CCFFFF; text-decoration:none;}
    a:hover
    {color:#aaFFFF; text-decoration:none;}
    a:active
    {color:#CCFFFF; text-decoration:none;}
    .contact {margin:3px 0px; padding:3px 0px;}
    textarea {
    font-family: Verdana, Arial; 
    font-size: 12px; 
    color: #000000;
    width: 300px;
    background-color: #FFFFCC;
    border: 2px inset #CCCCCC;
    overflow:auto;
    }
    .input
    {
    border: 2px inset #CCCCCC;
    background-color: #FFFFCC;
    font-family: Verdana, Arial; 
    font-size: 12px; 
    }
    .submit{font-size:14px;}
    the faux columns part is in red. so what's the problem now (in non-IE browsers)? i understand i need to clear my floats (which i don't get). Also, I read that paddings could be a problem, which I have (paddings). thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Add clear:both; to your footer CSS. Get rid of that id="faux" div. Its not needed. You should probably read this http://www.positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    magic. I didn't understand the whole deal with :after, and display:block etc. I actually uploaded the wrong file, where the #faux div was left over.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Modern browsers will understand :after. I don't think IE7 does. Here is how it works. You would put this in your CSS
    Code:
    .clearfix:after {
    content:"."; 
    display:block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    line-height:0px;
    font-size:1px;
    }
    then on your #main div you would add class="clearfix" like so
    Code:
    <div id="main" class="clearfix">
    what this does is creates another little element that acts as a clear:both. Its done this way to avoid extra markup. IE6 doesn't support this but it doesn't really care about the floats either. I'm not sure if it works in IE7. I haven't tried it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    oh i understand. could you please take a look at this and this in IE6?
    the first one has a 2 second redirect, so you should press stop. the problem is that when the right div is shorter than the left one, the footer coms up. how can i fix this?

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I guess IE needs the clearing div. Add this just before your footer div
    Code:
    <div class="clear">&nbsp;</div>
    then add this to your CSS
    Code:
    .clear {
    clear:both;
    line-height:0px;
    font-size:0;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    well that's... [censor]. do you think
    Code:
    <div id="left">
    <img src="images/people.jpg" alt="">
    </div>
    has to do with it? it's really a decorative image, but I don't know how to get it to look like this without the IMG, could you help me with that? I know it's off topic to this thread but 1) I need help on it and 2) who knows it might be the reason to have to add the extra div (which I definitely don't like, if it can be avoided with a practical work-around like changing this. this is actually an extra div itself)

  • #8
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    by the way, concerning the "solution" with the clearing div, if I use that, do I still need clear:both; for the footer div?

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No you won't need clear:both; on the footer anymore. As for the left div just make that image a background image.
    Code:
    <div id="left">&nbsp;</div>
    Code:
    #left {
    width:218px;
    height:272px;
    float:left;
    background:#b97040 url(images/people.jpg) no-repeat;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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