For someone with a bit of CSS magic:
- I want the mininews box on the front page to stay to the right of the worldmap when possible (as now), but wrap below rather than above the worldmap when you shrink the browser window. How to?
- If you can help with that, then I also need help adding a simple sidebar to the /near pages. :-) Please email me.
Here's one solution - dunno how well it fits your needs.
Change your div.mininews by deleting the float: right; and adding some stuff like below
/* float: right; */
margin-left: 600px;
position: absolute;
top: 120px;
right: 0px;
background-color: #ffffff;
Hi Mal,
That seems to just make the text box overlap the image when the browser window shrinks, rather than get pushed under the image. :) (at least in Firefox and Safari)
- ask
Seems like you were trying to float the worldmap as well, but it's acting strangely because mininews is nested INSIDE worldmap. Try making them siblings to see if that works any better for you. If that won't work, then float will obey element position within the document, so just move the map code above the mininews div in the html source.
If you swap the order of the map <form> and the news <div> in the HTML, this should no longer be a problem.
Forgot to answer the second part of your question...
To avoid re-inventing the wheel, I figured I'd just point you to:
http://bluerobot.com/web/layouts/layout2.html
if you still need css help, give me a shout ... i'd be happy to help you skin this baby :)
Easy:
<div style="float: left;">(map)</div>
<div style="float: right;">(newsbox)</div>
<div style="clear: left;">(rest of page)</div>
Also, order of the elements in the page source (i.e., news below map) matters.