[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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

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

    # July 13, 2012 at 12:18 pm

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed