Aligning DIV without margin or float

Question

I a template, I have five DIV elements underneath each other on a HTML page. (Logo, top menu, sub menu, content, footer).

I want the user to be able to set the alignment for each DIV in a CMS: left, center, right. Those settings I used to translate to

margin-left: auto; margin-right: 0px; // right
margin-right: auto; margin-left: 0px; //left 
margin-left: auto; margin-right: auto; // center

for each DIV. Now however, I want the user to be able to specify a real margin for each side as well. That, of course, makes the margin attribute unusable for positioning.

I do not want to use float for the positioning as this will bring additional layout troubles. I would have to surround the DIVs with overflow: auto wrappers and so on.

My current idea is to have two nested DIVs. The outer one takes care of the positioning (margin:auto), while the inner one sets the user-specified margins.

I fear however that this will bring me additional woes when variable widths come into play, or inner padding.

Is there a simpler way than that to align a block element left, right, or center?

IE7 used to listen to <div align=center> and center block elements surrounded by it. Something like that (but valid and cross-browser) would be exactly what I'm looking for.

Answer 1

If you want to add a margin on the page, encapsulate all your other divs in the user-modifiable one.

Answer 2

If you won't care about any border, paddding may be an option?

Answer 3

You might look into a CSS Grids component to handle the flexibility and cross browser compatibility you're looking for. I implemented a similar feature into a CMS once using YUI Grids CSS. There are several other CSS Grids solutions out there, like the 960 Grid System and blueprint, but I don't have any personal experience with those.

It's not exactly simpler, but it is easier when dealing with cross browser compatibility.

Answer 4

I position DIVs in <table> elements and then I hide from the angry crowd of CSS purists with torches and pitchforks. :)

Answer 5

#topmenu, #submenu, #content, #footer {
  clear: both;
}

should allow to float any of your five div to left or right. edit: and other divs should remain in place.

Answer 6

"Now however, I want the user to be able to specify a real margin for each side as well. That, of course, makes the margin attribute unusable for positioning."

You could use a dynamic style sheet w/ php. You can pass the user specified variables to the style sheet... something like this:

<?php

header("Content-type: text/css");

$left = $_POST['left'];
$right = $_POST['right'];

?>

div#right {
     margin-left: auto; 
     margin-right: <? echo $right ?>px; // right
}

div#left {
     margin-right: auto; 
     margin-left: <? echo $left ?>px; //left 
}