Distance between header and page list blogger - html

Question

I have a problem positioning the header and the page list on blogger. I want the distance between the header and the page list to be bigger so I tried to add the height in the header wrapper but in vain. I tried to play with margins but I failed. Please help. Here is the code :
http://alittlegirlfromparis.blogspot.com/
/* Header
-----------------------------------------------
*/
#header-wrapper {
height: 343px;
margin: auto;
padding: 0;
width: 1100px;
}
#header-inner {
float: left;
padding-left: 15px;
}
#header {
height:400px;
width: 1100px;
text-align: center;
color:#553b14;
text-shadow:1px 1px 1px #ccc;
}
#header h1 {
padding:25px 10px 10px 0px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:0em;
font: normal normal 30px 'Josefin Sans';
display:none;
}
#header a {
color:#553b14;
text-decoration:none;
}
#header a:hover {
color:#553b14;
}
#header .description {
padding:0px 10px 0px 0px;
text-transform:normal;
line-height: 1.4em;
font: normal 12px 'Josefin Sans';
color:#553b14;
}
#header img {
margin-left: auto;
margin-right: auto;
}
/* Nav
-----------------------------------------------
*/
#garis {
position: absolute;
top: 0px;
width: 1100px;
}
#PageList1 {
position: fixed;
list-style-type:none;
float:left;
width: 1100px;
font-size:14px;
background:#fff;
}
.PageList li a {
float: none;
color:#000;
text-decoration: none;
text-align:center;
font:16px 'Calibri';
}
.PageList li a:hover{
color:#b3afaf;
text-decoration:none;
}
.crosscol .PageList li, .footer .PageList li {
float:left;
list-style:none outside none;
}
.PageList li.selected a {
color:#000;
}
.PageList li.selected a:hover {
color:#b3afaf;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background:#ffffff url(http://i56.tinypic.com/dnygs1.jpg) no-repeat top;
margin: auto;
width: 1100px;
text-align:left;
font: normal normal 100% Georgia, Serif;
box-shadow:0 1px 6px #000;
border-top:30px solid #000;
}
#content-wrapper {
padding-top:10px;
padding-left:10px;
padding-right:5px;
}
#main-wrapper {
float:left;
width: 800px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
padding:5px;
border-right: 1px dashed #CCCCCC;
}
#sidebar-wrapper {
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font: 25px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
line-height: 1.4em;
text-transform:normal;
letter-spacing:0em;
color:#999999;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:0em 0 .75em;
font: italic 100% 'Georgia',Trebuchet,Arial,Verdana,Sans-serif;
line-height: 1.4em;
text-transform:noone;
letter-spacing:0em;
color:#999999;
}
.post {
border-bottom: 1px solid #CCCCCC;
}
.post a{
color: #666666;
text-decoration:none;
}
.post a:hover{
color: #666666;
text-decoration:none;
}
.post h1 {
padding:20px 0px 0px 5px;
font-size:20px;
font-weight:normal;
line-height:1.4em;
color:#000000;
}
.post h1 a, .post h1 a:visited, .post h1 strong {
display:block;
text-decoration:none;
color:#000000;
font-weight:normal;
}
.post h1 strong, .post h1 a:hover {
color:#8f8c97;
}
.post-body {
margin:1em 0 1em 0;
line-height:1.6em;
}
.post ul {
margin: 5px 0px 5px 20px;
padding: 0px 0px 0px 0px;
}
.post ol {
margin: 5px 0px 5px 20px;
padding: 0px 0px 0px 0px;
}
.post ol li {
margin: 5px 0px 5px 10px;
padding: 0px;
}
.post-body blockquote {
line-height:1.3em;
padding-left:32px;
padding-right:10px;
padding-top:5px;
font-size:18px;
font-family:Georgia, Serif;
font-style:italic;
color:#333;
}
.post-footer {
padding-top:10px;
margin:0;
color:#8f8c97;
text-transform:normal;
letter-spacing:0em;
font: italic 100% 'Georgia', Trebuchet, Arial, Verdana, Sans-serif;
line-height: 1.4em;
display: block;
}
.post-footer a{
color: #000;
text-decoration:none;
}
.post-footer a:hover{
color: #000;
text-decoration:underline;
}
.atas { border-top: 1px dashed #8f8c97;
color: #8f8c97;
display: block;
font: italic 100%/1.4em 'Georgia',Trebuchet,Arial,Verdana,Sans-serif;
letter-spacing: 0;
margin: 10px 0 0;
padding: 3px;
}
.atas a{
color: #382e2a;
text-decoration:none;
}
.atas a:hover{
color: #382e2a;
text-decoration:underline;
}
.comment-link {
float: right;
margin-left:.6em;
padding-left: 20px;
background: url(http://2.bp.blogspot.com/-u3jiNrwSNbw/Tg_NI-7myPI/AAAAAAAAA3A/ALpTb3CCdSw/s000/cm.gif) no-repeat;
margin-left:.6em;
}
.post img {
background:#fff;
padding:2px;
border:1px solid #cccccc;
}
.post blockquote {
margin:1em 5px;
}
.post blockquote p {
margin:.75em 0;
}

Answer 1

Can you be more specific about what you're attempting to change? The #sidebar-wrapper and #main-wrapper are separate sections, as is the #header-wrapper. To reposition any one of these all that is needed is to adjust the element in the appropriate direction (top, bottom, margin, padding, height). To add whitespace between the header and both elements, adding height to #header-wrapper does the trick. To move the side menu down, add margin-top to the #sidebar-wrapper (or padding-top).

Answer 2

You can increase padding-top of #content-wrapper in your CSS. This will make all content below the header image to go down in the layout.
You can add padding-top to #sidebar-wrapper in your CSS. This will make the right menu only to move down in the layout.