Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [resolved] Help with Fluid Layout Positioning

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #38864
    StephBertha
    Participant

    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

    #105975
    i3iorn
    Member

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

    #105990
    simoncmason
    Member

    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.

    #106041
    simoncmason
    Member

    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!

    #106049
    wolfcry911
    Participant

    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

    #106100
    wolfcry911
    Participant

    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 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.