Fixed Sidebar CSS Issues | Need Advice

Hi,
I am implementing fixed sidebar on my site. Everything works great till I work in normal resolutions. But when I minimize my browser, elements that were positioned absolute, leave their parent elements. Any way to avoid that ?

To reproduce this error : Go to http://www.wannalol.com/lol/57374 and minimize the browser. Scroll down and also horizontally and then check the elements with ID post-control-bar (a brownish bar with all sharing options).

(Refer attached screenshot)

Thanks in advance.

 

Uhm, if you're positioning column elements absolutely, you probably built your ENTIRE layout with flawed methodologies. APO should be used with an eyedropper and ALWAYS in relationship to a flow parent.

Peeking at the layout in Dragonfly, that does indeed seem to be the issue -- you've a-pod a bunch of stuff that shouldn't be.... NOT that your design or code is viable for smaller OR larger screens in the first place since it's just another fixed width accessibility train wreck. Looking at the code further drives this home with nothing resembling semantics and code that's more 1997 than 2013 -- though that's precisely what that tranny on it means -- transitional means your code is in transition from 1997 to 1998 practices... and it shows.

That it's slapped together in ASP.NET surely isn't helping matters with the massive bloated form for nothing around the entire content, malformed/inaccessible forms, attributes like TARGET and tags like CENTER that have zero business on any website written after 1997, nonsensical use of heading tags, and the 30 validation errors meaning you don't even have HTML, you have gibberish... which of course is how it ends up blowing 17.9k of garbage markup on less than 400 bytes of plaintext and a dozen or so content images -- likely around two to three times as much as should be necessary.

It's a laundry list of how not to design, code or deploy a website -- and as I tell a LOT of people about their sites, your best bet is to pitch this in the trash and start over fresh using semantic markup, separation of presentation from content, a modern recommendation document type, and don't let ASP.NET make one blasted bit of HTML for you.

 

Uhm, Thanks I guess. As u can pretty much see, I am not that good with CSS. So rewriting the entire CSS is not gonna be viable option for me.
I have corrected what I could make out from your reply - HTML validations, use of target/center tags/etc.
Still long way to go no doubt before its '2013'.

 

I dont see that issue that you showed in the screenshot even after resizing the window , probably you fixed that . but one thing looks very strange to me that you have given two arrow buttons on the image, so I was expecting it to be a sliding , but when I clicked on it , the whole page loaded, which I dont think is a good idea. You should use a image slider in place of it. or remove those buttons.

 

Hi
The arrow buttons take you to next/previous post. We thought about doing all via AJAX client side and not reload the entire page but then, the URL doesn't change. and if someone share those links on facebook/twitter/ or directly share URL with someone, it would open up a random post and not the post the user intended to share.
HTML5 now gives this option to push URLs as well from client side but it wasnt working in every browser so scrapped that idea and have to reload the page so that each post has its unique URL.
Suggestions to improve this issue/user experience are always welcome

 

And I was not able to fix that problem. It is still there. You would have to resize the browser and then scroll down so that that div becomes fixed and once it starts moving along with you, scroll horizontally.