Hi all
I have a demo here: http://www.ttmt.org.uk/cols/col1.html
It’s just 2 columns, col2 has a set width and floated to the right.
Col1 is on the left and takes up the rest of the page, it has a right margin where col2 sits.
In this example col2 comes before col1 in the html
<div id="content">
<div id="right-col" class="col">
<h2>Col 2</h2>
</div>
<div id="left-col" class="col">
<h2>Col 1</h2>
</div>
</div>
Is it possible to have the same layout but have col1 first in the html.
http://www.ttmt.org.uk/cols/col2.html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
#wrap{
min-height:100%;
}
#content{
padding-bottom:50px;
min-height:100%;
}
header{
height:100px;
background:green;
}
.col{
height:500px;
}
#left-col{
background:#ccc;
margin-right:320px;
}
#right-col{
background:#888;
width:300px;
float:right;
}
footer{
position:relative;
margin-top:-50px;
height:50px;
background:red;
}
@media only screen and (max-width:800px){
#right-col{
float:none;
}
}
</style>
<title>Title of the document</title>
</head>
<body>
<div id="wrap">
<header>
<h2>Header</h2>
</header>
<div id="content">
<div id="left-col" class="col">
<h2>Col 1</h2>
</div>
<div id="right-col" class="col">
<h2>Col 2</h2>
</div>
</div>
</div>
<footer>
<h2>Footer</h2>
</footer>
</body>
</html>