I'm currently working on designing a new web application's skeleton layout. I have come across some issues, particularly with CSS layouts and DIV.
1) Boxes 1 and 2 in the first column do not align with boxes 3 and 4 in the second and third columns. How can I fix this alignment?
2) I admire how the interface on this website automatically adjusts its size when minimized or maximized. I've been trying to replicate this feature in my design but haven't been successful. The footer is also causing some trouble by sticking out. I want everything to be contained on one page like the mentioned website. How can I achieve this?
Thank you for your help in advance.
HTML:
<!--
============================================
LOGO
============================================
-->
<div id="wrapper">
<div class="logo">logo</div>
<!--
============================================
NAVBAR
============================================
-->
<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>
<!--
============================================
NAVIGATION & CONTACTS
============================================
-->
<div class="column" id="first-column">
<div class="window" id="window-1">1</div>
<div class="window" id="window-2">2</div>
</div>
<!--
============================================
MAIN CONTENT
============================================
-->
<div class="column" id="second-column">
<div class="window" id="window-3">3</div>
</div>
<!--
============================================
CHAT
============================================
-->
<div class="column" id="third-column">
<div class="window" id="window-4">4</div>
</div>
<!--
============================================
FOOTER
============================================
-->
<div style="clear: both;"></div>
<div class="footer">footer</div>
</div>
CSS:
/*
============================================
GENERAL
============================================
*/
body, html{
font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
height: 100%;
}
/*
============================================
LAYOUT SKELETON
============================================
*/
#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:50%;
}
#window-2{
margin-top:10px;
height:50%;
}
#window-3{
height: 100%;
}
#window-4{
height:100%;
}
.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;
}