Sidemenu overlaps when restoring browser window
Check my website and browse the left sections menu. When you have maximized your browser there is no problem, but when you restore it to half the screen, the left menu overlaps to the right.
Here is the CSS code . Can anyone help me?
Your left menu is absolutely positioned, so it overlaps other content when the window is too narrow. But the solution to this problem is quite complicated and really depends on what you want to achieve.
Percentage
One possible solution would be to set width
the percentage of the "divisions" and "content" divs. Thus, they never intersect. But that depends on whether you can allow dynamic widths for your "content" div.
Rearrangement
If your content needs to be a fixed width ... First you need to decide how you want your content / menu to appear when the window is too narrow (maybe even narrower than the content width) ... And work from there.
Body Element Width
Set the minimum content of the window (as in <body>
). Either using:
- transparent image at the beginning of your document
<img src="t.gif" width="1250">
- set the minimum width of the css body to be 1250px wide because the content is centered, so it should have equal left and right space (the right one is useless empty space, just allowing non-overlapping space to the left of the content)
min-width: 1250px;
The latter is actually the simplest and works. It only makes it a little wider for smaller screen sizes, but your content width (including the menu on the left) is already over 1030px anyway ...
a source to share
A very straightforward and simple and quick 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 you enjoy it :)
Next time just use css floats: put the side menu and div content in a wrapper,
float: leave for the menu and give the wrapper a fixed width and center align. you can also make the navigation menu "off" on the left with negative left positioning.
a source to share