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.
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.
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?
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
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.
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
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.
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?
Really need to see the code to be more help Steph, paste it on to a codepen and throw us a link!
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!
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
Thank you, wolfcry, for your help -- that worked!