CSS alignment: horizontal blocking? -
i working on cms template , try find out if possible @ all. not able find on net, maybe used wrong keywords.
have model given:
http://img833.imageshack.us/img833/4979/alignmentmockup.jpg
<div> #1
fixed 'banner' container aligned left.
<div> #2
container fixed width. supposed centered using whole site measurement (scale #2) shall not overlap <div> #1
(scale #1).
problem: when browser window small (e.g. resized, mobile browser), container overlaps <div> #1
. depending on z-index, 1 of them on top of other.
approach 1: both container on same z-index. <div> #2
has margin:0 auto;
but not stop them overlapping.
approach 2: both styled position: relative; float: left; z-index: 10
but <div> #2
does not align websites center anymore.
since resticted template end working on, cannot add additional containers want. have access portion of html-file right between <body>
, beginning of websites functions. can add separate <div>
s (like <div> #1
) cannot cascade them rest of website (like <div> #2
).
any hint approach appreciated!
your problem css doesn't have min-margin set on div2 width of div1. remember reading article not long ago , found solution ron adair:
http://www.iamron.com/downloads/min-padding.html
the full article in more complex solution presented. ron comments easier way same result:
http://buildinternet.com/2009/10/purely-css-faking-minimum-margins
Comments
Post a Comment