Quote:
Originally Posted by andynov123
If I comment out #wrap's margin and padding, the header completely disappears
|
You don't have a header. That black strip at the top is the body of the document showing because of the the 53px top margin on #wrap.
Try changing the background color on the body to illustrate, like this -
Code:
html, body {
background: #f00;
color: #000;
font: 100% "Trebuchet MS",Arial,Helvetica,sans-serif;
margin: 0;
}
Quote:
|
and the bottom portion moves up with the columns.
|
The columns are pushed down by this top padding highlighted in red -
Code:
#wrap {
background: none repeat scroll 0 0 #FFFFFF;
margin: 53px 0 0;
padding: 400px 0 45px;
width: 100%;
}
Make that number smaller to move your columns up. Make the bottom padding larger to move your "bottom portion" down (bottom padding highlighted in green)
It's kind of looking like you want a full height layout, where the footer stays on the bottom even when there is not enough content to push it down there. Have a look at these
full height layout demos.
Quote:
|
also I can't get the margins on col2 right. If I increase the margins from 203px to higher, col2 gets smaller and the cols don't match up anymore
|
The left and right margins on column 2 should match the widths of the column they are making room for. In other words, the left margin should match the width of the left column and the right margin should match the right. The code you post has a right margin of 203px and no left margin -
Code:
#col2 {
height: 400px;
margin: 0 223px 0 0;
}
Margin, padding, border ... those measurements go clockwise starting from top. So it would read top,right,bottom,left. Your margin should look more like this -
Code:
#col2 {
height: 400px;
margin: 0 252px
}
In that example, the top margin of 0 repeats on the bottom because nothing else is specified and the right margin of 252px repeats on the left for the same reason.
The advantage of not specfying a width on column 2 is the margin make room for the left/right columns while column 2 takes all available room left.
Hope that all makes sense...