I am working on a CMS template and try to find out if this is possible at all. I was not able to find anything on the net, maybe I just used the wrong keywords.
Have this model given:
http://img833.imageshack.us/img833/4979/alignmentmockup.jpg
<div> #1 is a fixed ‘banner’ container aligned left.
<div> #2 is a another container with a fixed width. It is supposed to be centered using the whole site as measurement (scale #2) but shall not overlap with <div> #1 (scale #1).
Problem: when the browser window is too small (e.g. resized, mobile browser), the container overlaps with the <div> #1. Depending on their z-index, one of them is on top of the other.
Approach 1: Both container on the same z-index. <div> #2 has margin:0 auto;
but that does not stop them from overlapping.
Approach 2: Both styled position: relative; float: left; z-index: 10
but <div> #2does not align to the websites center anymore.
Since this is a resticted template back end I am working on, I cannot add additional containers as I want. I only have access to the portion of the HTML-file right between the <body> and the beginning of the websites functions. So I can only add separate <div>s (like <div> #1) but cannot cascade them with the rest of the website (like <div> #2).
Any hint for another approach appreciated!
Your problem is that CSS doesn’t have min-margin that you could set on div2 with the width of div1. I remember reading an article about this not long ago and found a good solution by Ron Adair:
http://www.iamron.com/downloads/min-padding.html
The full article in which a more complex solution is presented. Ron then comments his easier way to get the same result:
http://buildinternet.com/2009/10/purely-css-faking-minimum-margins