treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Responsive sides not aligning

  • 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/

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

  • try this in @media screen and (max-width: 1280px) #page_left { width: 70%; } 75% is not working,may be the margins takes some space.

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

  • 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 )???

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