DIV not affect horizonal scroll

@TiGGiJun 10.2010

Hi,

I have a page that’s center aligned on the screen and what I would like to do is add div right next to the right edge of the page outline but do not want that div to affect width of the page. So div doesn’t create horizontal scroll and page is still centered as it was before the div. is something like this possible?

Thanks

to post a comment

CSS

@tinimicJun 11.2010 — #Can you post a link to the current page? It's almost impossible to post a solution without a reference layout.

@TiGGiauthorJun 11.2010 — #Here is a link: http://www.bodysolidstore.com/MensHealth/

@tinimicJun 12.2010 — #I'm still not sure what you want, exactly. But take a look at this and tell me if it's something like you had in mind.

http://tinimi.com/for_others/TiGGi/MensHealth_rev.htm

You can get by with a 200 px (or so) addon sidebar for monitors with more than 1000 px width resolution.

There would be a scroll bar on 800 x 600. Also, since your pages are generated HTML, I don't see how you are going to do it, unless you have access to the server modules.

@TiGGiauthorJun 14.2010 — #tinimic,

Thank you for your help. That's similar to what I want, I just want that sidebar to be outside the content outline and also I want the page to be centered based on the main content and ignore the sidebar.

@tinimicJun 15.2010 — #In that case, it's easy to place an absolutely positioned div outside your container.

Just change:

[CODE]<div id="container">[/CODE]

to

[CODE]<div id="container" style="position:relative;">[/CODE]

then add the following line of markup:

[CODE]<div style="position:absolute; left:758px; top:120px; width:120px;">Content for your sidebar goes here.</div>[/CODE]

You can play around with width, height, padding, etc. to get the size of the div to your design. You'll get a scroll bar if the browser window is less than the combined width of your container and sidebar, but your container will remain centered on wider windows.

Hope this helps.

DIV not affect horizonal scroll

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

DIV not affect horizonal scroll

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴