How can I line up my CSS vertically within an outer DIV? - html

Question

I have the following:
<div class="outer" style="margin-bottom: 10px">
<div class="dialog-float">
<select name="AccountID" id="AccountID">
...
</select>
</div>
<div class="dialog-float">
Create
</div>
<div class="dialog-float">
<label for="htmlEdit">Html Editor</label>
</div>
</div>
What I would like to do is:
a) Have a 10px margin below the class "outer". Right now it seems like that DIV does not have any height and the margin doesn't appear properly.
b) Have all the "dialog-float" classes line up vertically.
Can someone give me some suggestions on what I am doing wrong.

Answer 1

add the following to your css file
.clear_cont, .cc {
min-height: 1px;
}
.clear_cont:after, .cc:after {
clear: both !important;
content: ".";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
//ok now IE6 doen't have min-height property here is a hack
* html .clear_cont, * html .cc{
height: 1px;
}
Whenever you need to fix this kind of problems add "cc" or "clear_cont" class to the container DIV
<div class="outer cc" style="margin-bottom: 10px">

Answer 2

Add a wrapping element for this solution to work:
<div class="outer" style="margin-bottom: 10px">
<div class="inner_wrapper">
<!-- ... -->
</div>
</div>
Sample
http://jsfiddle.net/dbjPV/2/
CSS
.outer {
border: 1px solid #ff0000; /* Show element size */
margin-bottom: 10px;
height: 200px;
display: table;
overflow: hidden
/* Include in separate IE CSS-file */
/*position: relative;*/
}
.inner_wrapper {
display: table-cell;
vertical-align: middle;
/* Include in separate IE CSS-file */
/*position: absolute;
top: 50%*/
}
.dialog-float {
border: 1px solid #00aa00; /* Show element size */
/* Include in separate IE CSS-file */
/*position: relative;
top: -50%*/
}

Answer 3

If it was me i would use the following css:
.outer{
margin-bottom: 10px;
min-height: 100px;
width: [some width];
}
this should do it.
The outer box would be a minimal width of 100px and grow with the content.
and always have 10px margin at the bottom.
Also the width is in my opinion always best to set.
Then you always know how big it is.
And dont forget that a div is a block element, so when placed like you did it will always be shown verticle.
A tip:
I never (at least try to never) use a clear div.
I think it is better to declare a width for a floating div so that it will fit the container div perfectly and other divs wont get both sides.
if you have them as floats than you could use the display: block css for it, but i'm not sure if it overules the float.