Fri, 2014-04-04 04:15
I'm hoping someone can help me out. I'm super new to HTML and CSS and the inability to debug drives me insane! I've been trying, to no avail, to vertically center a div within a div and to maintain a fluid design.
Here's what I have so far:
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="normalize.css" /> <style> html, body{ height: 100%; background: gray; } div.wrapper { width: 75%; height: 100%; background: white; margin: 0 auto; } header{ width: 100%; height: 10%; background: salmon; } div.outer{ text-align: center; height: 80%; width: 100%; background: yellow; } section.main{ display: inline-block; width: 200px; height: 200px; background: orange; } footer{ width: 100%; height: 10%; background: teal; } </style> <body> <div class="wrapper"> <header> </header> <div class="outer"> <section class="main"> test </section> </div> <footer> </footer> </div> </body> </html>
The idea is, obviously, to vertically center the orange box within the yellow box and enforce it to scale with the screen.
Any help would be hugely appreciated!