Grow your CSS skills. Land your dream job.

Problems with Div’s inside of Divs

  • # July 18, 2012 at 8:53 pm

    I have a horizontal div which is inside my header and is the width of my header. In this div I want to put 3 other divs of different sizes and line them all up together. I’ve tried everything and they keep falling outside the horizontal div.

    It would seem that I could just use floats, but they wouldn’t work. The three divs are represented in the image by black, pink and white backgrounds. They are enclosed in login-breaking and are named login, search and breaking-marquee The site is down right now while I get this working but if you need to see it live I can open it up for you.

    Here’s my header section:

    /* Header Section */

    /* Header Section */

    #header {
    margin:0px auto;
    background-color:#e2e2e2;
    width:1024px;
    height:151px;
    }

    #header-logo {
    float:left;
    width:225px;
    height:77px;
    background:url({site_url}images/uploads/stfuandplaylogo.gif);
    background-repeat:no-repeat;
    margin:45px 40px 0px 28px;
    }


    #login-breaking {
    width:1024px;
    height:35px;
    background-color:red;
    margin:0 auto;



    }

    #login{
    width:166px;
    height:35px;
    background-color:pink;
    border-left:#ffffff;
    margin-top:0;
    margin-left:333px;
    float:left;

    }

    #search{
    width:333px;
    height:35px;
    background-color:#000;
    margin:0;
    margin-left:0;
    float:left;
    }


    #breaking-marquee {
    width:525px;
    height:35px;
    background-color:#ffffff;
    margin-left:499px;
    float:left;
    }

    #breaking-marquee p{
    color:red;
    font-family: 'Press Start 2P';
    font-size:10px;
    margin-top:10px;
    margin-left:5px;
    display:inline;
    }

    #breaking-marquee bm{
    color:black;
    font-family: 'Press Start 2P';
    font-size:12px;
    }


    #navbar{
    width:1024px;
    height:28px;
    background-color:#000;
    position:relative;
    top:123px;
    background:url({site_url}images/uploads/nav-gradient.jpg) repeat-x;
    }


    Here’s an image of what it looks like:
    divprobs

    Here’s the html:


    # July 18, 2012 at 8:56 pm

    If you want the three divs to line up horizontally (search, login and breaking-marquee), you’ll need to give all of them float:left;.

    # July 18, 2012 at 9:13 pm

    Here’s what happens after I float them left: http://www.stfuandplay.com/index.php

    # July 18, 2012 at 9:31 pm

    I added a code pen here: http://codepen.io/anon/pen/tDArz

    Doing some testing with just the header parts and when I make then enclosing div at least 1500px, everything fits in accordingly, but doesn’t squeeze to the left. Also, I checked the sizes of all the divs and they equal 1024 so it’s not like it’s too big for the enclosing div. This is crazy!

    # July 18, 2012 at 9:40 pm

    Figured it out. It was the placement of the header logo that was killing me. It was all in the html. DOH!

    # July 18, 2012 at 10:19 pm

    Any reason why you are using #header as opposed to HTML5′s header?

    # July 18, 2012 at 10:23 pm

    I did not know about HTML5′s header. What are the advantages?

    # July 18, 2012 at 11:33 pm

    The HTML5 doctype just adds tags that are a bit more semantic that having to do an id=header (or id=nav, section, etc)

    This is a quick explanation but basically it’s just a lot easier and semantic than how it’s been done in the past.

    # July 19, 2012 at 12:50 am

    @theacefes @tordavis You would need a shiv for older versions of IE to recognize the new elements.

    # July 19, 2012 at 1:19 am

    Yes, of course. Thanks for posting that – my bad.

    # September 29, 2012 at 1:48 pm

    these do not compile properly at chrome need help any help will be so kind of you

    # September 29, 2012 at 2:30 pm

    @shanewatson71 I don’t understand your problem.

    What doesn’t compile? Chrome doesn’t need the shiv/shim…only IE.

    # October 1, 2012 at 6:59 pm

    Clearfix them with a Empty clearfix div

    # October 1, 2012 at 7:07 pm

    @Musama Actually, that’s a very old technique and there are much better options available.

    See here: http://css-tricks.com/snippets/css/clear-fix/

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

You must be logged in to reply to this topic.

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