Hi all, I hope you can help any idea why the content div keeps going under the menu div when the page is re sized? page - www.david-ward.co.uk/test css - www.david-ward.co.uk/test/style.css thanks all
Cause there's not enough room for it to stay next to the green menu part. It's a bit more difficult to see, but the wrapper is 80% (of its parent, the body) width, and then container is 80% (of its parent, the wrapper) width, and at some point the browser can't figure out how to keep everything together when the viewport (and thus the body we'd assume) gets smaller. By the way, you don't need to ever say display: block on stuff like divs, they're blocks anyway... and you don't need it on floats either, because they automagically become blocks when you float them... What I would do, if you can get away with it, is don't float #container and set no width on it (which means it will do what blocks do, and try to be 100% wide of its parent... except in IE), and then give it margins to push its edges away. Set a left margin a bit wider than the left-floated menu so that all browsers plus IE looks the same. This way the container can really shrink with the rest of the page and will try to stay in place better (but this will get ridiculous at some point because container has some stuff in it that cannot get smaller, of course). As a side note, you have a doctype but are putting IE into Quirks Mode with that space above the doctype. If you haven't seen anything funny with that browser yet, it's just luck. As a second side not, we generally don't use longdesc on simple images. It was more meant for when short alt text can't really tell all the pertinent info an image has, such as with a chart or a graph.
thanks for that works fine not, well until it hits the image looking at ways to scale the image aswell any ideas? thanks david
You may want to try putting a wrapper div around the menu and content divs.. then float the menu-div left and float the content-div right, within that wrapper.
example: <div id="aroundmenucontent"> <div id="menu"></div> <div id="content"></div> </div> #aroundmenucontent{ min-height: 300px; float:left; } #menu{ background-color: #abcabc; padding: 5px; margin-top:10px; float: left; width: 15%; text-align:justify; display:block; min-height: 300px; } #content{ background-color: #cccccc; margin: 10px 1% 1% 10px; float: right; padding: 5px; width: 80%; text-align: justify; min-height: 300px; display:block; }
Er, I couldn't tell, did it work or not? (I know the idea works, but I didn't look at any new code). As for the image, there you're going to get results that aren't the nicest-looking. I've seen Paul O'Brien do it, but I haven't been able to find the page. He had a big version of an image, and in the HTML set the height and width to 50% (which I've heard isn't cross-browser safe, but it looked pretty good in FF), so when the page is "default" size, the image is 50% smaller (but often looks... okay, not great). When things are made bigger, the image can "scale" up and still look good (though it will stop upscaling when it reaches its true 100% size). Otherwise stuff generally looks like crap when scaled by a browser cause they can't do it as well as an image editing programme like PS or GIMP.
*edit, looked at the page, looks pretty good (the scaling image), but I'd keep a fixed with on the left menu part, as when I shrink the page the menu items are popping out. You'll find in IE6 (I think 7 fixes this), the container will grow to accomodate 1-word widths, while in modern browsers the words will overflow:visible (the default) and "pop out" of the green area. And I'll say it again cause someone didn't hear, if you float something, you're just exercising your fingers and increasing filesize by typing display: block. Floats are magically blocks, and they stay that way (even if you add display: inline for IE6's double-margin float bug). Also, be aware (I just learned this a week ago) that IE really has trouble clearing floats going in two directions. It can also make content disappear if there's left-floated content inside a right-floated box (sometimes). So if a footer comes along later and needs to clear the floats, it may not work. Which is why I try to avoid floating a two-column page with one left and one right float. Usually we can get away with only floating one thing and letting the other do it's default behaviour. The server here at DP is having issues and I could not edit my old post.