Grow your CSS skills. Land your dream job.

floating issues

  • # January 5, 2012 at 6:38 am

    i had a big problems with floating area .. i dont know why , also i tried to fix it by using ( class=”clearfix” ) once , and using ( overflow : hidden ) once , and ( empty div ) , but all of these not changing any things .

    the problems in the (div=”mainheader”) i put two div on it ( div=”logo” + div=”advheader” ) but there is no floating wrapped this divs .

    that is my original layout :link here
    this is my problems :link here

    this my code :



    this my css :


    /* css reset */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    /* this section for ARABIC , added by mine */
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, input, ul, li, {
    direction : rtl;
    }
    /* END ARABIC section */
    /* END css reset */

    /*main css*/



    body {
    font-family: Tahoma, Georgia, Arial, sans-serif;
    font-size: 14 px ;
    background : #e3eaf0;
    }

    #wrap {
    width : 960px;
    margin : auto;
    background : red;
    }

    #header {
    background : gray;
    width : 960px;
    position : relative;
    }

    #headerbar {
    background : green;

    }

    #searchbar {
    position : relative ;
    right : 700px;

    }
    #mainheader {
    hieght : 50px ;
    background : white;
    overflow: hidden ;
    }

    #logo {
    position : absolute;
    right : 10px;
    float : right;

    }
    #advheader {
    position : absolute;
    left : 10px;
    float : left;
    }

    #nav {
    background: url(images/navbarmid.png) ;
    background-repeat:repeat-x ;
    width: 795px;
    hieght: 39px;

    }

    .nav {
    text-align: center;
    line-hieght: 39px;
    }

    .nav li{
    display: inline;
    padding: 8px 10px 7px 10px;

    }

    .nav li a {
    color : #285677;
    text-decoration : none;
    font-family : Tahoma, Georgia, Arial, sans-serif;
    font-size: 16px ;
    }

    /* END header */


    /* START featuredslider */
    #featuredslider {

    }
    /* END featuredslider */


    /* START contenter */
    #container {
    padding : 5px;
    border: 4px solid #0C0;
    background: orange;

    }

    #posts {
    background : #fdfdfd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    float : right;
    width : 670px;
    margin:0 0;
    }

    #sidebar {
    background : #e3aee3;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    float : left ;
    width : 240px;
    position : relative ;
    left : 0;
    top : 0;

    }


    /* post area */
    .post {

    }

    .posttitle {

    font-family : Tahoma, Georgia, Arial, sans-serif;
    font-size : 20px ;
    }

    .postmetadata {
    background : #e3e9ee ;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    border : 2px solid #e1e1e1;
    font-size : 12px;
    font-family : Tahoma, Georgia, Arial, sans-serif;
    }

    .spanDash {
    color : #b7b6b5 ;
    }

    .commentsnumber {

    }

    .postimage {

    }

    /*here we put the image borders*/
    .postimage img {

    }

    .postcontent {

    }

    #footer {
    background : #d48d78;
    }


    # January 5, 2012 at 7:08 am

    The problem isn’t the floats, you applied position: absolute; to the floated elements, that is causing the problem. Try changing “absolute” on your floated elements to “relative” in your CSS

    # January 5, 2012 at 7:36 am

    thanx kgscott284 it is working good now

    # January 5, 2012 at 9:13 pm

    Not a problem :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".