55Charlesd
New Member
I'm trying to make a simple, fluid, responsive two column layout (just for the sake of learning CSS), consisting of a sidebar and a main section.I was able to create the sidebar with 100% height, position the main content at its side, but when I put a H1 inside my main section... tada! Its margin created a margin for the sidebar as well.Here's a minimum code that presents the problem:\[code\]<!DOCTYPE html><html> <head> <style> html,body { margin:0; padding:0; width:100%; height:100%; } #sidebar { display:block; position:absolute; width:25%; min-height:100%; border-right:1px solid #222; background-color: #E0E0E0; } #main { margin-left:25%; display:block; } h1 { padding:2%; /* margin:0; */ /* defining the margin as zero aligns * everything at the top */ } </style> </head> <body> <header id="sidebar"> Let's reach for the stars! </header> <section id="main"> <h1>Nope!</h1> </section> </body></html>\[/code\]I've tested it in Chrome and Firefox, happened in both.I've created this JSFiddle, and thanks to a comment from cimmanon, the behavior is the same.Well, I'm lost. Am I missing something really simple?Is this approach a good way to make a two column layout? I inspired myself reading the CSS from the Svbtle blogs.If it isn't, please indoctrinate me in some right way to do it. I am in need of good CSS indoctrination 
Thanks!
Thanks!