CSS 2 kolommen naast elkaar in container - Softwareontwikkeling

maandag 11 juni 2007 19:06

Acties:

Verwijderd

Topicstarter

Ik dacht even snel een HTML template in elkaar te draaien voor een test. De container is 760 px breed, de content div 580 en de adsense div 180px. De content div staat goed, de adsense div staat rechts van de content div wat de bedoeling is, maar het lijkt dat hij onder de content div pas begint. Ik wil graag dat beide op gelijke hoogte beginnnen. Alle mogelijke CSS mogelijkheden en combinaties op display uitgeprobeerd maar zonder het gewenste resultaat. Iemand hier een idee?

Gebruikte HTML

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Conversieratio - verhoog uw conversie</title>
<link href="_include/stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div id="container">
    
        <div id="content">
            <p>content</p>
        </div>
        
        <div id="adsense">
            <p>adsense</p>
        </div>
    
    </div>

</body>
</html>

Gebruikte CSS

code:

/* CSS Document */

body {
    overflow:visible;
    background-color:#EEEEEE;
    margin:0px;
    padding:0px;
    }
    
#container {
    position:relative;
    width:760px;
    margin:0px auto;
    margin-top:5px;
    border:none;
    background-color:#FFFFFF;
    height:600px;
    }
    
#content {
    position:relative;
    display:inline;
    float:left;
    width:580px;
    margin:0px;
    padding:0px;
    }

#adsense {
    display:inline;
    float:right;
    width:180px;
    border-left:1px solid #EEEEEE;
    margin-top:0px;
    padding:0px;
    }
    
p {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:normal;
    color:#000000;
    text-align:left;
    margin:0px;
}

maandag 11 juni 2007 19:10

Acties:

Snake

Los Angeles, CA, USA

Google eens op faux columns

dat is exact wat jij wilt

Going for adventure, lots of sun and a convertible! | GMT-8

maandag 11 juni 2007 19:47

Acties:

Verwijderd

nee, hij zoekt helemaal geen faux columns, de div gaat naar onderen omdat ze samen niet passen

760px < 580px + 180px + 1px

die +1 is van de border van de rechter kolom, die moet je wel meetellen (google css box model)

de 180 veranderen in 179 maakt het al weer goed, of maak de totale div breder

[ Voor 4% gewijzigd door Verwijderd op 11-06-2007 19:54 ]

maandag 11 juni 2007 21:29

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op maandag 11 juni 2007 @ 19:47:
nee, hij zoekt helemaal geen faux columns, de div gaat naar onderen omdat ze samen niet passen

760px < 580px + 180px + 1px

die +1 is van de border van de rechter kolom, die moet je wel meetellen (google css box model)

de 180 veranderen in 179 maakt het al weer goed, of maak de totale div breder

Hartelijk dank! Dit was de oplossing!