Grow your CSS skills. Land your dream job.

Having troubles with Divs staying in Place.

  • # April 22, 2009 at 9:00 pm

    Hi All,
    I am having a problem with divs. I have multiple divs contained within the "extras" div as you can see below.
    I currently have a jquery/php photo scroller("api"), an rss to html converter("blog"), and a contact form("contact"), all within "extras".
    Well as you can see below, I still need to add content to "books" div and the "music" div. Every time I do, the "blog" and "contact" divs are effected and get moved down.

    The divs don’t really have margins that would be causing this.

    What can I do so that this doesn’t happen. Do I need to use "clear-both" somewhere?

    Code:
    I also take pictures…
    < ?php echo $flickr ?>
    //I need content Here.//
    //I need content Here.//
    < ?php
    require_once '/homepages/37/d221555405/htdocs/carp/carp.php';
    CarpConf('maxitems',1);
    CarpConf('poweredby','');

    CarpCacheShow('http://preem.com/blog/feed/');
    ?>

    Contact me anytime!

    Here is the css for the divs above:

    Code:
    #extras {
    background: url(“api.png”);
    position:relative;
    height:536px;
    width:980px;
    overflow:hidden;

    #api {
    position:relative;
    left:60px;
    top:20px;
    width:200px;
    height:200px;
    }

    #blog {
    position:relative;
    left:470px;
    width:150px;
    top:-65px;
    }

    #takepictures {
    position:relative;
    left:83px;
    top:13px;
    width:250px;
    font-size:25px;
    font-family:Georgia, “Times New Roman”, Times, serif;
    }

    #contact {
    position:relative;
    float:right;
    width:200px;
    top:-375px;
    margin-right:70px;
    }
    }

    # April 23, 2009 at 4:49 am

    What do you mean by "Every time I do, the "blog" and "contact" divs are effected and get moved down"?
    Do you mean that the output in the browser actually gets moved down?

    The first thing that I recognize is that you css definition for the #extras div is not being closed!!
    In most cases when I have trouble with css a invalid css definition is the cause for the problems.
    Try using a xhtml validator like the http://validator.w3.org/
    This (in most cases) will help you identify problems, that are caused by e.g. not closed div tags or wrong definitions!

    Greets, Michael

    # April 24, 2009 at 7:39 pm

    Hello!
    Thanks for your reply! Yes, that is what I mean there. Actually in the browser the other divs are being affected.
    As for the "extra" div not being closed. Sorry about that. In my actual code, it is closed. I just copy and pasted wrong.

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

You must be logged in to reply to this topic.

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