CSS alignment: horizontal blocking?

StackOverflow https://stackoverflow.com/questions/4184350

Question

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!

Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top