I'm facing some issues with the layout of my DIVs.
There seems to be a large gap between my divs and the footer in this example. How can I make the divs line up right underneath the footer?
Another problem is that box 2,3,4 don't seem to have aligned bottoms. How can I ensure they all have the same height? Currently, I'm winging it with height percentages.
Appreciate any help on these matters.
Here's the HTML code snippet:
<div id="wrapper">
<div class="logo">logo</div>
<div id="header">
<a href="#">link 1</a>
|
<a href="#">link 2</a>
|
<a href="#">link 3</a>
|
<a href="#">link 4</a>
</div>
<div style="clear: both;"></div>
<div class="column" id="first-column">
<div class="window" id="window-1">1</div>
<div class="window" id="window-2">2</div>
</div>
<div class="column" id="second-column">
<div class="window" id="window-3">3</div>
</div>
<div class="column" id="third-column">
<div class="window" id="window-4">4</div>
</div>
<div style="clear: both;"></div>
<div class="footer">footer</div>
</div>
CSS styles being used:
body, html{
font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
height: 100%;
}
#wrapper {
margin: 0 auto;
max-width: 1212px;
min-height: 540px;
min-width: 784px;
position: relative;
height: 100%;
}
#header{
text-align:right;
padding:5px;
font-size:10px;
padding-right: 30px;
}
#first-column{
width: 20%;
padding-left: 5px;
height: 100%;
}
#second-column{
width: 50%;
height: 100%;
}
#third-column{
width: 25%;
}
.window{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #CECECE;
width:100%;
}
#window-1{
height:43.5%;
}
#window-2{
margin-top:10px;
height:43.5%;
}
#window-3{
height:87%;
padding-bottom: 10px;
}
#window-4{
height:87%;
padding-bottom: 10px;
}
.column{
float:left;
margin: 5px;
height: 100%;
}
.logo {
font-family: arial;
font-size: 12px;
float: left;
padding-left: 10px;
}
.footer {
margin-top: 10px;
padding-left: 10px;
}