Check my website, and see the Divisions left menu. When you have maximized your broswer there is no problem, but when you restore it to half of screen, the left menu overlaps to the right.
Here is the CSS code. Can someone help me?
A:
It's because your "divisions" div is absolutely positioned.
You can remove "position: absolute" and increase the width of the "divisions" div to 300px.
Kevin Brown
2009-05-14 23:33:42
didn't work..=S
2009-05-15 00:21:03
A:
Your left menu is absolutely positioned that's why it overlaps other content when window size is too narrow. But the solution for this problem is quite tricky and actually depends on what you want to achieve.
Percentage
One possible solutions would be to set width on "divisions" and "content" div in percentage. This way they'll never overlap. But it depends if you can afford to have dynamic width for your "content" div.
Repositioning
If your content must be fixed width... You'll first have to decide how would you like your content/menu to appear when window is too narrow (maybe even narrower than content width)... And work from there.
Body element width
Set minimum window content (as in <body>) width. Either by using:
- transparent image at the beginning of your document
<img src="t.gif" width="1250"> - set body's minimum width css as
min-width: 1250px;has to be 1250px wide, because content is centrally positioned, so it must have equal space on the left and on the right (right one being useless empty space just allowing non overlapping space on the left of content)
The last one is actually the simplest and works. It only makes it a bit wide for smaller screen sizes, but your content width (including menu on the left) already exceeds 1030px anyway...
Robert Koritnik
2009-05-14 23:37:12
He doesn't have to, but it would certainly guarantee overlap free display. :)
Robert Koritnik
2009-05-15 07:57:55
check my longer answer with Window content width, that solves your problem using CSS. Solution is very simple, but to my opinion not the best one. But it works.
Robert Koritnik
2009-05-15 08:14:26
A:
A very straight-forward and simple and quick-fix solution would be with CSS :
#content {style.css (line 17)
left:-270px;
margin:0 auto;
padding:30px 10px 0 550px;
position:relative;
width:780px;
}
I tried this in my Firebug and it worked fine. hope it'll suit you're needs :)
next time just use css floats:
put the side menu and the content div in a wrapper,
float:left for the menu, and give the wrapper a fixed width, and center align it.
you can also make the navigation menu go "out" from the left with negative left positioning it.
vsync
2009-05-16 18:06:16