CSS height function werkt niet

**Robbert Bruin** · 26-01-2015, 18:42

Iemand die snapt wat ik verkeerd doe??

Dit moet het worden

- Tweet vakje moet de tekst en het rode balkje beneden staan
- Vakken moeten gelijk lopen met de lijn van het blauwe vakje met registreren.

http://nl.tinypic.com/view.php?pic=2lsvda9&s=8

Code:

<html>
<link rel="stylesheet" href="style.css" type="text/css"  media="screen"/>
<body>

<div id="content">
       <div id="blocks">
        <a href="#"><div class="block">
                    <div class="pica"><img src="verdienen.png"/></div>
                    <div class="text"><p>Verdienen</p></div>
                </div></a>
        <a href="#"><div class="block" style="margin-left: 7px";>
                    <div class="pica"><img src="adverteren.png"/></div>
                    <div class="text"><p>Adverteren</p></div>
                </div></a>
        <a href="#"><div class="block">
                    <div class="pica"><img src="ontvang.png"/></div>
                    <div class="text"><p>Ontvang</p></div>
                </div></a>
        <a href="#"><div class="block" style="margin-left: 7px">
                    <div class="pica"><img src="registreren.png"/></div>
                    <div class="text"><p>Registreren</p></div>
                </div></a>
    </div>
    
    <div id="other">
        <div id="name"><p>Klantenreacties</p></div>
        <div id="comments">
        <div  class="comment">Bij RBDESIGN kende ik via een verre vriend die mij  deze designer aanraden. Een designer die in korte tijd grote stappen  heeft gemaakt echt een aanrader! Zoek je nog een designer RBDESIGN is de  designer die je zoekt.</div>

        <div class="author">Door: Pietsnot lid sinds 10 maart 2010</div>
        </div>
        
        <div  class="comment">Prima designer die nog steeds grote stappen maakt in  positief opzichten. Zijn layout is minimaal 2 one2xs punten waard. Ik  heb al een mooie layout van hem ontvangen. Dus bied maar  raak.</div>

        <div class="author">Door: Vriendje lid sinds 11 maart 2011</div>
    </div>
    
    <div id="twitter">
        <div class="tweets"></div>
            <div class="twpic"><img src="twitter.png"/></div>
                <div class="tweet">
                    <div class="contactname">Verdien</div><div class="from">@verdienen</div>
                    <div class="message">Wil je ook eenvoudig en snel rijkworden met dan nu aan op verdienen!</div>
                </div>
        
        <div class="tweets"></div>
            <div class="twpic"><img src="twitter.png"/></div>
                <div class="tweet">
                    <div class="contactname">Verdien</div><div class="from">@verdienen</div>
                    <div class="message">Wil je ook eenvoudig en snel rijkworden met dan nu aan op verdienen!</div>
                </div>
                
        <div class="tweets"></div>
            <div class="twpic"><img src="twitter.png"/></div>
                <div class="tweet">
                    <div class="contactname">Verdien</div><div class="from">@verdienen</div>
                    <div class="message">Wil je ook eenvoudig en snel rijkworden met dan nu aan op verdienen!</div>
                </div>
                
        <div class="tweets"></div>
            <div class="twpic"><img src="twitter.png"/></div>
                <div class="tweet">
                    <div class="contactname">Verdien</div><div class="from">@verdienen</div>
                    <div class="message">Wil je ook eenvoudig en snel rijkworden met dan nu aan op verdienen!</div>
                </div>
        
        <div id="twittername"><p>Twitter</p></div>
        
        </div>
    </div>

<div id="footer"></div>


</body>

</html>

Code:

#body,html {
            background-color: cfdae2;
            margin: 0;
            padding: 0;
}

#content {
            margin: 0px auto;
            margin-top: 15px;
            width: 960px;
            height: 675px;
            position: relative;
}


#blocks {
            margin: 0px auto;
            margin-top: 5px;
            height: 348px;
            width: 395px;
            float: left;
}

.block {
            background-color: #fcfcfc;
            margin-top: 2px;
            float: left;
            width: 194px;
            height: 143px;
            position: relative;
            display: inline-block;
            white-space: normal;
            vertical-align: middle;
            
}

.pica {
            width: 194px;
            height: 118px;
            margin: 0px auto;
}

.pica img {   
            margin: 0 auto;
            display: block;
}
.text {
            float: left;
            background-color: #428df5;
            height: 25px;
            width: 194px;
}

.text  p{
            margin: 5px;
            color: fcfcfc;
            font-family:Verdana, Geneva, sans-serif;
            font-size: 12px;
            text-align: center;
            font-weight: bold;
            text-decoration:none;
}

#right {
            background-color: #fcfcfc;
            margin: 0px auto;
            height: 348px;
            width: 560px;
            float: right;
}

#other{    
            background-color: #fcfcfc;
            margin: 0px auto;
            margin-top: 7px;
            margin-left: 5px;
            height: 346x;
            width: 262px;
            float: left;
}

#name {
            background-color: #a80d0d;
            margin: 0px auto;
            height: 29px;
            width: 136px;
            float: left;
}

#name p{
            margin: 5px;
            margin-left: 7.5px;
            color: fcfcfc;
            font-family:Verdana, Geneva, sans-serif;
            font-size: 14px;
            font-weight: bold;
            text-decoration:none;
}

#comments {
            float: left;
            width: 248px;
}
.comment {
            float: left;
            width: 228px;
            color: 2b2f33;
            font-family:Verdana, Geneva, sans-serif;
            font-size: 10px;
            text-decoration:none;
            margin-top: 5px;
            margin-left: 5px;
            margin-right: 5px;        
        
}

.author {
            float: left;
            height: auto;
            width: 228px;
            color: 2b2f33;
            font-family:Verdana, Geneva, sans-serif;
            font-size: 10px;
            text-decoration:none;
            margin: 10px;    
            font-style: italic;            
}

#twitter {    
            background-color: #fcfcfc;
            margin: 0px auto;
            margin-top: 7px;
            margin-left: 5px;
            height: 291px;
            width: 293px;
            float: left;
            display: inline-block;
}

.tweets {
            float: left;
            margin: 0px auto;
            margin-top: 5px;
            width: 283px;
}

.twpic {
            width: 25px;
            height: 37px;
            float:left;
            margin-left: 5px;
}

.twpic img {   
            margin: 0 auto;
            margin-top: 5px;
            display: block;
}

.tweet {
            float: right;
            margin: 5px;
            width: 250px;        
}

.contactname { 
            float: left;
            font-family:Verdana, Geneva, sans-serif;
            font-size: 11px;
            text-decoration:none;
            font-weight: bold;
            color: #2b2f33;
            width: 50px;
}

.from {
            float: left;
            margin-left: 5px;
            font-family:Verdana, Geneva, sans-serif;
            font-size: 10px;
            color: #bdbbcd;
            text-decoration:none;
            width: 100px;
}

.message {

            float: left;
            font-family:Verdana, Geneva, sans-serif;
            font-size: 9px;
            text-decoration:none;
            color: #2b2f33;
            width: 240px;
}

#twittername {
            float: left;
            background-color: #a80d0d;
            height: 25px;
            width: 293px;
}

#twittername   p{
            margin: 5px;
            color: fcfcfc;
            font-family:Verdana, Geneva, sans-serif;
            font-size: 12px;
            text-align: center;
            font-weight: bold;
            text-decoration:none;
}

#footer {
            height: 25px; 
            width: 960px;
            background-color: 2b2f33;
            margin: 0px auto;
            margin-top: 10px;            
}

Als iemand weet wat ik fout doe, hoor ik het graag

Alvast bedankt

Robbert!

**J de jong** · 27-01-2015, 00:20

Probeer #Twitter eens met een position: relative; en #twittername met position: absolute; en bottom: 0; right: 0; left: 0;

**Robbert Bruin** · 27-01-2015, 21:10

Thanks dat was de oplossing!

**J de jong** · 27-01-2015, 21:11

Fijn om te horen! Succes ;)

CSS height function werkt niet