Grow your CSS skills. Land your dream job.

[resolved] Help with Fluid Layout Positioning

  • # July 12, 2012 at 3:31 pm

    Hi there,

    I seem to be having a hard time getting this coded correctly. Here’s the layout I’m working with:
    http://www.gotmedia.org/layout-css-help.jpg

    I have everything coded and working, except for the portion in red. I have the div floating right and the transparent background hugging the edge of the browser beautifully, but the text won’t move with the browser. It stays in place.

    I used percentages thinking that would solve it, but I’m missing something. Can anyone give me a clue? I would post my code up here, but it’s quite long right now and I’m on the clock, so I just wanted to see if anybody knew something right away.

    I appreciate your help,
    Steph

    # July 12, 2012 at 3:59 pm

    I’m happy to read code. Because right now its hard to tell. To little information is just as bad as to much.

    # July 12, 2012 at 5:24 pm

    When you say the text won’t move with the browser, do you mean if you resize the browser window the text stays in place and you get a horizontal scroll bar?

    If so then you probably have a fixed width – i.e. set in pixels somewhere or perhaps a form with a too many columns to scale down?

    Anyway without seeing the code as @i3iorn says above it is pretty much impossible to help you out.

    # July 13, 2012 at 9:50 am

    When you say the text won’t move with the browser, do you mean if you resize the browser window the text stays in place and you get a horizontal scroll bar?
    Yes.

    The only fixed width I have is on that background pattern repeating because if I do it at 100% it’s cut off, it doesn’t actually go 100% :(

    Do you know of any examples that have been done before?

    # July 13, 2012 at 9:55 am

    So the div within the red border on your picture has a width set in pixels? If so that will stop your site being properly fluid / responsive.

    Really need to see the code to be more help Steph, paste it on to a codepen and throw us a link!

    # July 13, 2012 at 11:00 am

    I appreciate your help. I’ll definitely do that next chance I get, thank you!

    # July 13, 2012 at 12:18 pm

    Hi there,

    I tried posting the code on codepen, but the text wasn’t showing up (probably had something to do with the JS), so I posted it on my website:

    http://www.gotmedia.org/layout-css-help/

    Quite a stumper this one!

    # July 13, 2012 at 1:27 pm

    Steph, a link to a live a page is always best! I’d take that over codepen, jsfiddle, or any other test bed any day – thanks.

    Now to solve your problem:
    remove the width from section#supporting-panels;
    remove the width from #controls-wrapper;
    remove the width from #slidecaptionright;
    adjust padding in #controls-wrapper to get 20px instead of the current 40px

    # July 14, 2012 at 5:55 pm

    Sure, I’ll work on getting my code into places like that (for the future).

    Thank you, wolfcry, for your help — that worked!

    # July 14, 2012 at 7:02 pm

    Perhaps you misunderstood – I was thanking you for posting a link to a live page instead of using one of the popular test beds. I know I’m in the minority, but I find it so much easier to debug.

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

You must be logged in to reply to this topic.

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