Grow your CSS skills. Land your dream job.

Responsive sides not aligning

  • # February 17, 2013 at 4:37 pm

    Hi:

    I am having a problem creating a responsive layout. I have a 1280 screen and when I open the layout, my side bar is pushed down to the next line. I want it right next to the left section, clean and snug with a little gap. When I re-size the window, this continues to stay until my next css media query kicks in. Can anyone help me get this aligned and clean please. I have posted a link with the css style in the html to make it easier to post.

    http://www.pepelepew1962.x10.mx/

    # February 17, 2013 at 4:48 pm

    well its set to float right, when i should be float left.

    # February 18, 2013 at 1:09 am

    try this in @media screen and (max-width: 1280px)
    #page_left
    {
    width: 70%;
    }

    75% is not working,may be the margins takes some space.

    # February 18, 2013 at 6:25 am

    It’s definitely the borders / margins that are causing the problem.

    Equally, if you want it **right next to the left section, clean and snug with a little gap.** then, as was said, you should float it left.

    # February 20, 2013 at 9:13 pm

    ok, I changed the float to left and changed the percentage to 69 instead of 69.55 but when I view at 1280 there is a gap between the side ( purple) and the far right. This gap becomes visually better when I resize the screen, but is there a way to just specify the left ( green ) div size and whatever space is available, make that for the side ( purple )???

    # February 21, 2013 at 5:48 am

    Here’s an option for you. http://codepen.io/Paulie-D/pen/LkKvi

    I’ve stated all all width & margins (that’s important) in % and applied box-sizing as appropriate so the borders don’t mess up the width calculations.

    If you want this…

    >s there a way to just specify the left ( green ) div size and whatever space is available, make that for the side ( purple )???

    …we’d have to restructure.

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

You must be logged in to reply to this topic.

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