Grow your CSS skills. Land your dream job.

[Solved] Divs Side by Side

  • # January 17, 2010 at 10:19 pm

    Please take a look at this.
    http://constitutionrestoration.com/

    See the sign up button, its all the way at the bottom of the page. I have attempted several things, clearing the divs the content and button are in, also attempted clearing the div after those also. Tried giving a percent width on both divs. Tried displaying block, inline. Nothing seems to solve it, I know its just a combination of these things I just have not found the right combo. Please if anyone at all could give me some advise. I am in need of assistance, I thought I understood the way floats worked but I guess I still don’t get it.

    Rob
    # January 18, 2010 at 5:14 am

    Did you fix it? coz it works in webkit browsers I think…

    # January 19, 2010 at 10:19 pm
    "Robskiwarrior" wrote:
    Did you fix it? coz it works in webkit browsers I think…

    No I didn’t. I am using Firefox, Chrome, and IE but doesn’t look right for me?

    # January 21, 2010 at 11:04 pm

    Is there any way someone could please take a look at the code in firebug? For some reason its not catching my div ids? I really don’t understand what I have done wrong. Thank you.

    Rob
    # January 22, 2010 at 2:25 am

    Well the button here is at the top of the page right under the "Please take the time to sign up for your very own CRCA chapter blog." text in Mozilla and Webkit (Firefox, Chrome/Safari) can’t test IE7 atm my dev console is broken – but its in the same place in IE8…

    So I don’t know what you mean.

    # January 22, 2010 at 12:46 pm

    As Rob says it works just fine. I tested it in Firefox, Chrome, Safari, IE7 and IE8 on XP Home, the only one that misbehaves is IE6

    Rob
    # January 22, 2010 at 7:17 pm

    Thanks for checking I was not going mad virtual :D hehe

    # January 25, 2010 at 9:26 pm

    Ok, thank you so much for looking, I’m just a little concerned because when I look at the code in Firebug, its not picking up the styles for the div. So just that we are clear here. When you guys look at the page you see the yellow box with a signup button and some text to the left of it, all on the same line? Here is a screen shot of what I am seeing.[attachment=0]screenshot_help_001.jpg[/attachment]

    Rob
    # January 26, 2010 at 6:53 am

    Oh – when you said the bottom of the page I thought you meant the bottom of the page and not under the line of text lol

    Just to let you know I’m my tiny browser resolution (1240×1024) there isn’t much room for the button on the right there anyway…

    Just had a quick look and you have not defined anything for your sub left and sub right divs… I would give them both float:left; and then the sub left a width of 675px or something… then the button will go in the right place :)

    I would recommend giving a width to both divs though…

    # January 27, 2010 at 12:23 am

    Yes, thanks again for looking. That is exactly what I was meaning, I do have it defined, but its not picking it up? That is what I believe to be the real issue. Here is what I have defined as of now. I added your float left to both now, but still didn’t work.

    Something I have done somewhere is making it not pick these styles up. The only thing I can think is a typo? Not really sure.

    Code:
    #feature {
    width: 650px;
    margin: auto;
    padding-bottom: 25px;
    padding-top: 25px;
    }

    #signup_block {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#FFFFE0 none repeat scroll 0 0;
    border:1px solid #E6DB55;
    color:#333333;
    font-weight:700;
    padding:10px;
    overflow: auto;
    }

    #subright{
    width:200px;
    min-height:500px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:500px; /* for IE5.x and IE6 */
    float:left;
    }

    #subleft {
    width:540px;
    min-height:500px; for modern browsers */
    height:auto !important; /* for modern browsers */
    height:500px; /* for IE5.x and IE6 */
    margin-top:10px;
    float:left;
    }

    .btn {
    float: left;
    clear: both;
    background: url(images/btn_left.png) no-repeat;
    padding: 0 0 0 10px;
    margin: 5px 0;
    }
    .btn a{
    float: left;
    height: 40px;
    background: url(images/btn_stretch.png) repeat-x left top;
    line-height: 40px;
    padding: 0 10px;
    color: #fff;
    font-size: 1em;
    text-decoration: none;
    }
    .btn span {
    background: url(images/btn_right.png) no-repeat;
    float: left;
    width: 10px;
    height: 40px;
    }

    .btn_signup{
    background-color: #0033ff;
    }

    # January 27, 2010 at 12:48 am

    Wow, I feel like a real idiot right now. I see what I did, do you? Now I just have to get the button to stop sliding underneath when I resize the browser.

    I am very sorry if I wasted your time, but I do thank you for helping me. Please, keep helping everyone, I really like coming to this forum, there are a lot of answers just by searching.

    # January 27, 2010 at 5:07 am

    I might be a bit dim here.. :? so if I understand correctly you want the signup button next to the text ? The following will accomplish that

    Code:
    #sub_right {
    float:right;
    height:auto !important;
    width:100px;
    }
    #sub_left {
    float:left;
    height:auto !important;
    width:720px;
    }

    But if you resize your browser, having attributed widths to both divs, one will obviously go underneath as there is not enough space for it to exist on the same line. You could make the <h2> text slightly smaller and reduce the width of sub-left.

    P.S. Firebug picks them up fine, and by the way I only popped this code out from Firefox, didn’t look in IE…

    Rob
    # January 28, 2010 at 4:53 am

    Just checked, and you got it sorted? :D Looks like it…

    # January 31, 2010 at 11:16 am

    Oh, yes I did. This forum is a great place. Thanks to people who helped me out on this issue.

    Rob
    # January 31, 2010 at 5:12 pm

    awesome :)

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

You must be logged in to reply to this topic.

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