As I delve into responsive design, I encountered a particular issue.
Displayed below are images that demonstrate the layout scenario:
- Image A showcases the layout on a large screen
- Image B illustrates how I envision it to look on narrower screens, achieved by removing the float:right;
- Image C depicts the outcome after eliminating float:right from the sidebar.
Here is an example of the code snippet being utilized:
<doctype html>
<html>
<head>
<title>Test</title>
<style>
#container{width:100%; height:700px; background:blue; -moz-box-sizing:border-box; padding:10px;}
#box{width:60%; height:70px; background:black;}
#content{width:70%; height:600px; float:left; background:green; margin-top:10px;}
#aside{width:30%; height:800px; float:none; clear:right; background:yellow;}
</style>
</head>
<body>
<div id="container">
<div id="box">
</div>
<div id="content">
</div>
<div id="aside">
</div>
</div>
</body>
</html>
Check it out here: http://jsfiddle.net/cBh6z/