Aligning Div's under each other while centering - css

Question

I succeeded in centering my divs on my webpage, but I can't figure out how to align seperate div's under each other?(when still centered).
It's a blog, so when I add something, the div beneath the "blog"-div should move automatically. (margin is thus not a solution)
Greetings
.blog {
background: transparent;
height: 1200;
border-radius: 5px;
border: solid -4px #a19a9a;
width: 700px;
left: 50%;
margin-left: -350px;
position: absolute;
margin-top: -30px;
padding-bottom: 50px;
}
same code for the other div.
The "container":
#content{
width: 750px;
margin-top: 65px;
text-align: left;
height: 9000px;
overflow-x: hidden;
}
For all the code: http://www.janwillemlibeer.be/verticaal

Answer 1

well there is tens of methods to do such thing.. but not all might work in your example.. Its much easier to find out which one if you provide some code.
I would use such solution, group up all of the blog divs in a container.
part of index.html
<div class="container">
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
</div>
styles.css
.container {
width: 200px;
margin:0 auto;
}
.blogdiv {
width: 200px;
min-height: 20px;
clear: both;
border: 1px solid #ddd;
margin: 3px;
background-color: #f6f6f6;
}
go here for the example ---> http://jsfiddle.net/2WJm7/
but as I have said... there is a lot of methods to achieve this result but not all might work for you until you show us the code
EDIT:
ok so first of all You should not put some crazy height values... if you put min height: 20px; it will auto resize your div if the content is too big...
if you want to center the content just use margin:0 auto;
remove position: absolute; so it lets the second blog div to go under.
Overflow-x is pointless in this example as well. here is code which i changed:
css
.blog {
background: transparent;
border-radius: 5px;
border: 4px solid #a19a9a;
width: 700px;
margin: 0 auto;
margin-top: 30px;
clear:both;
}
#content{
width: 750px;
margin-top: 65px;
text-align: left;
min-height: 20px;
}
html
<div class="content">
<div class="blog">asudhasbdjsabdaushdusab saudhsab dsuadh sauhd iusahd bsabd sadjsa ub d</div>
<div class="blog">sadsad sasdas frw</div>
<div class="blog">suadguiasgduiasb gasyudh shavduis auydb iuasbvd unqwhbv ub ihbiusbvduib bni busib ub iubyu buih bviun buyvb ou vuqiw</div>
<div class="blog">yauhdiuasbduasndbasubdas</div>
<div class="blog">test</div>
</div>
edit:
Your CSS fixed
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, code, em, font, img, small, strong, ol, ul, li, fieldset, form, label, legend {
border: 0 none;
margin: 0;
outline: 0 none;
padding: 0;
}
#font-face {
font-family: "Dincond";
font-style: normal;
font-weight: normal;
src: url("fonts/dincond-bold-webfont.eot?") format("eot"), url("fonts/dincond-bold-webfont.woff") format("woff"), url("fonts/dincond-bold-webfont.ttf") format("truetype"), url("fonts/dincond-bold-webfont.svg#webfontabKpQmB0") format("svg");
}
#font-face {
}
#content {
float: none;
padding-top: 65px;
text-align: left;
width: 750px;
margin: 0 auto;
}
body {
background: url("images/bkg.jpg") repeat fixed center center transparent;
font-family: Georgia,"Lucida Sans","Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
margin: 0;
padding: 0;
}
#blog p {
color: black;
font-family: Lucida Grande;
font-size: 13px;
line-height: 130%;
padding-left: 0;
}
#blog a {
color: #1277A6;
font-size: 13px;
font-weight: bold;
text-decoration: none;
}
#blog a:hover {
text-decoration: underline;
}
h2 {
color: #1277A6;
font-family: Dincond;
font-size: 35px;
font-weight: 400;
padding: 0 0 10px;
}
h3 {
color: #990000;
font-family: Dincond;
font-size: 23px;
font-weight: 400;
}
#menu p {
color: #4D4B4B;
font-family: Dincond;
font-size: 31px;
}
.blog, .contact {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 white;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
clear: both;
display: block;
padding-bottom: 50px;
width: 700px;
margin: 0 auto;
}
#begin {
border-bottom: 2px dashed #A19A9A;
margin-left: 50px;
margin-right: 50px;
padding-bottom: 20px;
padding-top: 10px;
width: auto;
}