Menu
Display:table-cell responsive layout
Hi all
I’m trying to create a responsive layout with a fixed width side column on the left and a fluid content column on the right.
When the window resizes I need the side column to drop below the content.
I’m trying to use display:table-cell to create the columns
[url]http://www.ttmt.org.uk/forum/table-cel.html
This creates the columns but to get the side bar on the left the code for the side bar has to come before the content column
This means when the window resizes the sidebar goes above the content column.
Is there anyway to use display:table-cell so the sidebar is on the left but still falls below the content when the window is resized.
[CODE]
<!DOCTYPE html>
<html>
<meta charset=”UTF-8″>
<meta name=”description” content=””>
<meta name=”keywords” content=””>
<meta name=”robots” content=””>
<title>Title of the document</title>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
html, body{
background:#eee;
height:100%;
}
#wrapper{
min-height:100%;
max-width:800px;
margin:0 auto;
background:#fff;
border-left:20px solid #eee;
border-right:20px solid #eee;
overflow:auto;
position:relative;
}
#sidebar{
background:yellow;
width:200px;
display:table-cell;
}
#content{
background:red;
display:table-cell;
}
@media only screen and (max-width:500px){
#sidebar{
display:block;
}
#content{
display:block;
}
}
</style>
</head>
<body>
<div id=”wrapper”>
<div id=”sidebar”>
<h1>Sidebar</h1>
</div>
<div id=”content”>
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div><!– #wrappper –>
</body>
</html>