Hello, to start off I'm kinda new to this so this might be really simple question:
How do I position my blocks correctly? I can get it to look like I want, but my website works very bad with scaling (resizing the window) elements go out of frame and borders and it doesn't look good at all. Even though I have used relative position and only used % it's not looking good. Here is my code:
HTML
<!DOCTYPE html><html> <head> <title>Menus</title> <link rel="stylesheet" type="text/css" href="css1.css"> <link rel="stylesheet" type="text/css" href="css1meny.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="page"> <div id="header"> <h1>Äspåröds äventyrsland</h1> </div> <div id="menu"> <ul class="mainmenu"> <li><a href="x">Webb 1</a></li> <li><a href="x">Webb 2</a></li> <li><a href="x">Mobil 1</a></li> <li><a href="x">Mobil 2</a></li> </ul> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales nisi at <br> sem pretium, vitae posuere ante pharetra. Cras quis elit facilisis, ultricies eros a, <br> condimentum neque. Quisque commodo ullamcorper vestibulum. Ut orci tortor, dignissim non <br> fringilla a, eleifend quis risus. Curabitur<br> dictum tempor nisi a accumsan. Aenean rhoncus, metus non convallis varius, urna velit<br> imperdiet tortor, sed ornare nisl eros vel dolor. Mauris sed tortor scelerisque, porta purus<br> pretium, tempus velit. Maecenas et felis sed magna dignissim laoreet nec nec eros. Cras <br> sollicitudin molestie leo vel cursus. Donec quis orci ut metus congue gravida. Quisque <br> id tellus fringilla, malesuada dui eu, pretium tortor.<br> Sed ac volutpat massa, faucibus euismod purus. Maecenas suscipit lobortis congue. Pellentesque <br> enim massa, vestibulum et nisi sit amet, tincidunt suscipit metus. Vestibulum ante ipsum primis<br> <br><br><br> in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ultrices ipsum suscipit lacus <br> aliquet, porta tristique enim blandit. In pulvinar sem at libero tempor euismod adipiscing nec nulla.<br> Fusce dapibus at libero ac auctor. Nam mattis volutpat fringilla. Curabitur ante lectus,<br> faucibus sit amet pellentesque eu, porttitor at sapien.<br> Nam eu suscipit massa. Ut in nisi nec ipsum eleifend scelerisque.<br> Ut id consequat augue, egestas blandit neque. Nulla rutrum magna <br> ac convallis lacinia. Nulla facilisi. Nunc molestie auctor auctor.<br> ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br> In hac habitasse platea dictumst. Praesent elementum blandit purus vitae <br> cursus. Suspendisse vitae porttitor ante. Donec in lorem sapien. Fusce commodo <br> sagittis adipiscing. Duis metus orci, tincidunt nec lobortis non, egestas vitae sem.<br> Donec ipsum ante, consectetur eu leo eget, pharetra faucibus est. Aliquam ornare at sem <br> ac tincidunt. Nullam vel odio purus. Proin non ipsum enim. Donec adipiscing dolor at molestie<br> pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> <div id="footer"> </div> </div> </body></html>
CSS
body{background-color:grey;}#page{ /*Vet inte varför mina rundade hörn cpar*//*margin:5% 0% 2% 10%;*/width:80%;height:55em; /*Can't use this with % dunno why, page goes all crazy*/text-align:left;border-radius:20px;border-style:solid;border-width:2px;position:relative;top:30%;left:10%;}/*position: absolute; top: 10px; right: 10px;*/#header{ width:100%;height:10%;background-color:black;position:relative;}#menu{width:15%;height:80%;background-color:#CACAFF;float:left;position:relative;}#footer{width:100%;height:10%;background-color:#B4B4FF;float:left;position:relative;bottom:-0%;}#content{font-family:Helvetica;float:left;background-color:white;width:85%;height:80%;position:relative;}h1{position:absolute;left:40%;font-family:Verdana;color:#E6E600;}
(not including my other css file for the menu)
Anyone got any hints on how to solve my problem? Have I understood it all wrong? I have tryed implementing float:left but I don't really understand how to use them. I have also tried overflow:auto; which puts scollbars inside wich do help me, but isn't how I would like it to be. I want the rest of the page scale accordingly so when you make the window smaller the whole page just becomes smaller.