Using divs in web development is standard practice these days, but sometimes divs can’t do what tables used to do. Tables could easily create a 2-column layout where both columns had equal heights but a table couldn’t create a single-column layout when the window size changed. Divs work great for flowing layouts and responsive designs but their height property can be troublesome when a div is floated.
Here’s an example for creating a 2-column layout which realigns itself into a one-column layout when the window width is smaller than 660px.
2-column layout using divs:
Responsive layout coverts to 1 column:
Here is the code that will create the layout pictured above.
<!DOCTYPE html>
<html><head>
<title>Test</title>
<meta name="viewport" content="initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
margin:0px;
}
/*
* Define default sizes for all browsers.
* IE8 will read these properties.
* IE8 will not read media queries,
* but that's OK because it only works on desktops
* Media queries are intended for non-desktop devices
* and more advanced browsers.
*/
.header {
height:110px;
background-color: #F7F7F7;
border:1px solid #EEE;
}
#logo {
top: 28px;
background-size:100%;
background-image: url('somefile.jpg');
background-repeat: no-repeat;
width: 151px;
height: 64px;
}
.column_layout {
width:100%;
margin:0px;
min-width:480px;
display:table;
border-spacing:15px;
}
#inner-wrapper {
padding:0px;
display:table-row;
}
/** First immediate form elements
* These could be divs as well.
*/
#inner-wrapper>form {
width:50%;
height:100%;
display:table-cell;
border:1px solid #EEE;
border-radius: 5px;
background-color: #F7F7F7;
padding: 15px 5px 15px 5px;
margin:0 0 15px;
}
/*
* Apply responsive layout for non-IE8 browsers
* This section works when the screen size is smaller than 660px
*/
@media all and (max-width: 659px) {
#logo { /* smaller logo for smaller screens */
top: 10px;
background-size:75%;
}
.header {
height:60px;
}
.column_layout {
display:block;
border-spacing:inherit;
}
#inner-wrapper {
padding:7px;
display:block;
}
/* first immediate form elements */
#inner-wrapper>form {
margin: 15px 5px 15px 5px;
padding:0px;
width:auto;
display:block;
}
}
/* for displays > 660px */
@media all and (min-width: 660px) {
.column_layout {
display:table;
border-spacing:15px;
width:100%;
}
#inner-wrapper {
padding:0px;
display:table-row;
}
/* first immediate form elements */
#inner-wrapper>form {
width:50%;
height:100%;
display:table-cell;
}
}
</style>
</head>
<body>
<div id="content">
<header>
<div id=logo>
</div>
</header>
<div id="column_wrapper">
<div id="inner-wrapper">
<!-- Column 1 -->
<form id="form_col1" method="post">
<br />
<br />
<br />
<br />
<br />
<br />
</form>
<!-- Column 2-->
<form id="form_col2" method="post" action="">
<br />
<br />
<br />
<br />
</form>
</div>
</div>
</div>
</body>
</html>