Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problems with Div’s inside of Divs

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #38972
    tordavis
    Member

    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:


    #106352
    Senff
    Participant

    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;.

    #106358
    tordavis
    Member

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

    #106363
    tordavis
    Member

    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!

    #106365
    tordavis
    Member

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

    #106374
    theacefes
    Member

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

    #106378
    tordavis
    Member

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

    #106384
    theacefes
    Member

    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.

    #106395
    chrisburton
    Participant

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

    #106398
    theacefes
    Member

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

    #111022

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

    #111023
    Paulie_D
    Member

    @shanewatson71 I don’t understand your problem.

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

    #111124
    Musama
    Member

    Clearfix them with a Empty clearfix div

    #111126
    Paulie_D
    Member

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

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

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.