The "sidebar" content is 280px wide floated right.
The il 2 1946 patch 4.11 CSS Working Group has reached an impasse on the issue of percentage margins (and padding) in flex and grid layout, and needs your input to help decide.
Now CSS3 makes it even more efficient by adding media queries.
@media screen and (min-width: 600px) and (max-width: 900px).class background: #333; Device Width.Continue on this post to read the tutorial and see some websites that make good use of media queries.The main "pagewrap" container is 980px wide.Below are some solutions: Sample Sites.Dont forget to check the demo with the iPhone, iPad, Blackberry (newer versions and Android phones to see the mobile version.#pagewrap width: 980px; margin: 0 auto; #header height: 160px; #content width: 600px; float: left; #sidebar width: 280px; float: right; #footer clear: both; Step 1 Demo Here is the design demo.Resize your browser to see how the layout automatically flows based on the width of the viewport (browser viewing area).For unknown reason, max-width:100 (for embed element) doesnt work in Safari.More Examples, if you want to see more examples, check out the [email protected] screen and (max-width: 600px).class background: #ccc; If you want to link to a separate stylesheet, put the following line of code in between the head [email protected] screen and (max-device-width: 480px).class background: #000; For iPhone 4, the following stylesheet is specifically for iPhone 4 (credits: Thomas Maier ).
It has usable behavior in auto-height boxes, and enables the aspect ratio hack.
View Demo Responsive Design, download Demo ZIP, see It in Action First.