[CSS] DIV's naast en onder elkaar probleem

woensdag 4 augustus 2010 18:14

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Beste GoT-ers, wss is dit een eenvoudig iets voor de doorgewinterde CSS-er.. maar ik ben er na dagen puzzelen nog niet uitgekomen

Wat ik wil bereiken is dit resultaat:
Afbeeldingslocatie: http://www.musicrooms.nl/tweakers/divsvb.jpg

Afbeeldingslocatie: http://www.musicrooms.nl/tweakers/divsvb.jpg

Wat ik heb bereikt is dat alles werkt, behalve het positioneren van de 3 content DIV's. Vele opstakels heb ik zelf weten op te lossen met googlen en proberen, maar deze dus niet.. en heb het idee dat iets heel simpels de oplossing kan geven, vandaar dat ik het toch maar eventjes vraag..

Mijn resultaat: http://www.musicrooms.nl/tweakers.net/index.html

De HTML

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>none</title><link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="bground">
<div id="container">  
   <div id="menu">dit is het menu</div>
   <div id="header">dit grote vlak is de header</div>
   <div id="content">
        <div id="content_1">Content 1</div>
        <div id="content_2">Content 2</div>
        <div id="content_3">Content 3</div>
   </div>
</div>
</div>

<div id="footer"><br />footer van de website</div>

</body>
</html>

De CSS

Cascading Stylesheet:

body           { background-color:#fff; color:#fff; margin:0; padding-top:0px; font-family:arial; font-size:12px; color:#fff; }
div#bground     { background-color:#888; }
div#container   { width:1000px; margin-top:0px; margin-bottom:0px; margin-left:auto; margin-right:auto; padding-top:15px; }
div#menu     { background-color:#000; height:51px; }
div#header      { background-color:#333; height:80px; }
div#content     { background-color:#222; color:#fff; width:1000px; padding-bottom:16px; }
div#content_1   { float:left;  margin-left:11px;  background-color:#fff; color:#000; height:200px; width:577px; padding:0px 0px 11px; }
div#content_2   { float:right; margin-right:11px; background-color:#fff; color:#000; height:200px; width:390px; }
div#content_3   { background-color:#fff; color:#000; width:977px; height:100px; padding:0px 0px 11px; margin:0px 11px 0px 11px; }
div#footer      { background-color:#000; width: 1000px; margin-left: auto; margin-right: auto; }

Wie weet?

mijn dank is eeuwig en groots

woensdag 4 augustus 2010 19:08

Acties:

0 Henk 'm!

Tentacle1

60% Puur Sap!

Je moet de float's nog clearen. Dus voeg clear: both; nog even toe aan de content_3 class.

System specs

woensdag 4 augustus 2010 19:16

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

bizar.. echt dagen mee aan het klooien geweest.. ook met die clear, had hem alleen in de footer gezet om die steeds omhoog schoot.... anyway het werkt, opgelost! Thanks!

Onderwerpen