[resolved] Help with Fluid Layout Positioning

[StephBertha]

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

[i3iorn]

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

[simoncmason]

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.

[simoncmason]

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!

[wolfcry911]

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

[wolfcry911]

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.

[Author]

Posts