Hoi,
Ik ben bezig met een site, ik heb hier al aardig mee zitten stoeien (div's die op de een of andere manier 5px meer naar links stonden etc) maar ik heb nu nog maar 1 fout over, en die krijg ik niet goed. Ik snap niet wat ik fout doe.
Ik heb dit:
Een content div met daarin 2 floatende divs. Ik heb zeg maar een box met daarin content in 2 kolommen en omdat je beter divs kunt gebruiken dan tabellen ben ik voor de divs gegaan. Die div werken goed, floaten goed etc. Ze doen 1 ding niet: namelijk de hoofd div (content) meelaten groeien. Als ik 1 div in die content div zet, doet hij dat wel, dus op een of andere manier doe ik iets fout als ik 2 floatende divs heb.
Ik hoop dat jullie het snappen..
Allereerst een foto, dat zegt vaak meer dan woorden ;)
http://i48.tinypic.com/244thf4.png
De bedoeling is dus dat het eerste gedeelte wit wat je achter de tekst ziet, met de schaduw, doorgroeit tot het volgende stukje wit met schaduw, de 'bottom'. Maar dat doet hij niet, en dat moet hij wel doen.
Dan mijn index.php
<?php
<!-- begin content div -->
<div id="content">
<!-- content links -->
<div id="contentlinks">
Stukje code om tekst uit de database te halen, niet relevant
</div>
<!-- content rechts -->
<div id="contentrechts">
php include("include/rechterkolom.php");
</div>
</div>
?>
En de bijbehorende css:
<?php
#content
{
width: 871px;
height: auto;
min-height: 600px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
font-family: Tahoma;
font-size: 12px;
color: #808080;
background-color: none;
background-image: url(images/middlecontent.png);
background-position: center;
background-repeat: repeat-y;
}
#contentlinks
{
width: 620px;
height: auto;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-left: 20px;
padding-right: 10px;
padding-bottom: 10px;
font-family: Tahoma;
font-size: 12px;
color: #808080;
background-color: none;
float: left;
border-right: 1px solid #999;
}
#contentrechts
{
width: 190px;
height: auto;
max-height: 500px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
font-family: Tahoma;
font-size: 12px;
color: #808080;
background-color: none;
float: left;
}
?>
Ik hoop dat jullie zien wat ik fout doe :)
EDIT: OPGELOST OP DEZE MANIER
Maar ik had de oplossing opeens gevonden: je moeder div, waar je de 2 floatende divs in zet moet ook floaten. Nu had ik daar weer 1 probleem mee: dan float alles opeens links of rechts, afhankelijk wat je invult. Maar als je dan om je moeder div met de 2 divs erin een container bouwt dan is alles zoals het moet zijn
dus je hebt eigenlijk nu:
container div
- moeder div (content div) deze float: left
-- child divs (content links en rechts div) deze floaten ook beide links.
En nu werkt alles wel opeens.
928 views