Hallo!
Ik ben een noob en heb een probleem waarvan ik het antwoord niet heb kunnen vinden met google.
Hetgeen wat ik probeer te bereiken is dat de "main div" kan worden gebruikt op meerdere pagina's, dat betekend dat de main div een width van 100% heeft maar ook terug kan schalen als de sidebar er naast word gezet in HTML. (althans dat is de bedoeling).
Het probleem is dat ik voor de layout van de website een margin nodig heb tussen de sidebar en de main div. Als ik een margin right in de sidebar zet, verzet dit alleen de content in the main div maar niet de div zelf. En als ik de margin left gebruik in de main div verschuift de div naar beneden omdat de breedte niet breder dan 100% kan zijn.
Heeft iemand een oplossing voor deze noob? Of is dit niet mogelijk met css/html.
CSS
[code lang=css]
body {
font-size: 10px;
}
* {
margin: 0;
padding: 0;
}
p {
padding: .5em;
font-size: 1.2em;
}
#pageWrapper {
background: #999;
width: 79em;
margin: 1em auto;
}
#sidebar {
float: left;
width: 17em;
height: 40em;
margin: 0 0 .5em .5em;
padding: .5em;
}
#main {
min-height:30em;
margin: 0 0 .5em 0;
padding:2em;
}
#subNav,#adminMenu,#userForm {
background: #fff;
width: 17em;
height: 10em;
margin: 0 0 .5em 0;
}
[/code]
HTML
[code lang=html]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pageWrapper">
<div id="sidebar">
<div id="subNav">
<p>#subNav</p>
</div>
<div id="adminMenu">
<p>#adminMenu</p>
</div>
<div id="userForm">
<p>#userForm</p>
</div>
<p>#sidebar</p>
</div>
<div id="main">
<p>#main </p>
</div>
</div>
</body>
</html>
[/code]
581 views