Tekst i spalter der er lige

Jeg har forsøgt at lave en "ramme" for hvert afsnit og sat højde på, men det hjælper ikke.

HTML:
<div class="ramme">
<div class="spalte1"></div>
<div class="spalte2"></div>
<div class="spalte3"></div></div>

CSS:
.ramme {
    width: 950px;
    height:auto;
    float:left; }

.spalte1 {
    width: 180px;
    float:left;
    margin-left: 30px;
    margin-top: 20px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}

.spalte2 {
    width: 390px;
    float:left;
    margin-left: 70px;
    margin-top: 20px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}

.spalte3 {
    width: 180px;
    float:left;
    margin-left: 50px;
    margin-top: 20px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}

Umiddelbart, kan jeg ikke se nogle fejl i den kode du har vist os her. Efter en test, kan jeg heller ikke genskabe problemet.

Vi er nødt til at se hele din side, og dit stylesheet, før vi kan hjælpe dig, da problemet må ligge her. :)

Efter de 3 spalter, bør du også have en clear:both så din "ramme" får den rigtige højde:

<div class="ramme">
<div class="spalte1"></div>
<div class="spalte2"></div>
<div class="spalte3"></div>
<div class="clear"></div>
</div>


.clear {
  clear:both;
}

Er det noget der skal indsættes i css'en så?

@tolamaps: Normalt ja, men der er vist en detalje du glemmer.


Rammerne flyver også, og derfor behøves et clearfix ikke. Derudover, er clearfix grimme og unødvendige, og når vi har andre alternativer, hvorfor så ikke bruge dem?

Benyt overflow: auto istedet. :)

@Simone_monse: Vi skal stadigvæk bruge det jeg efterspurgte i #2. :)

Ja det må du gerne se, det nok bare lidt rodet, da jeg gør det lidt på min egen måde :)

www.simonelarsen.dk (jeg roder med den lige i øjeblikket, så alle funktioner virker formentligt ikke optimalt)

body{
    margin: 0;
    padding: 0;
    background-image:url('baggrund/baggrund.png');
    background-repeat:no-repeat;
    }
   

#master {
    width: 1000px;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-color: transparent;
    border-width: thin;
    background-image:url('baggrund/banner.png');
    background-repeat:no-repeat;
    }
   
   
#master_forside {
    width: 1000px;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-color: transparent;
    border-width: thin;
    background-image:url('baggrund/banner_forside.png');
    background-repeat:no-repeat;
    }
   
   
    #o {
    margin: 470px 0 0 730px;
    padding: 0;
    float:left;
    display: block;
    width: 116px;
    height: 50px;
    background: url('forside/ommig.png') bottom;
    text-indent: -99999px;
    }
   
#o:hover {
    background-position: 0 0;
    border: hidden;
    }   
   
   
        #pr {
    margin: 0px 0 0 435px;
    padding: 0;
    float:left;
    display: block;
    width: 168px;
    height: 75px;
    background: url('forside/projekter.png') bottom;
    text-indent: -99999px;
    }
   
#pr:hover {
    background-position: 0 0;
    border: hidden;
    }   

   
    #logo {
    display: block;
    width: 226px;
    height: 50px;
    background: url('baggrund/logo.png') bottom;
    text-indent: -99999px;
    float:left;
    margin-top: 5px;
    margin-left: 730px;
    padding: 0;
    }
   
#logo:hover {
    background-position: 0 0;
    }
   
#kontakt:hover {
    background-position: 0 0;
    }
   
   
#kontakt {
    display: block;
    width: 25px;
    height: 28px;
    background: url('links/kontakt.png') bottom;
    text-indent: -99999px;
    float:left;
    margin-top: 30px;
    margin-left: 280px;
    padding: 0;
    }
   






.sogfelt { background-color:#fff;
width: 160px;
height: 20px;
font-size:9pt;
color:#000;
border-bottom:solid 1px #bebebe;
border-left:solid 1px #bebebe;
border-right:solid 1px #bebebe;
border-top:solid 1px #bebebe;
float:left;
margin-top: -31px;
margin-left: 825px;}





   
#links {
    width: 1000px;
    float:left;
    margin-left: 1000px;
    }

#content {
    width: 950px;
    height:auto;
    float:left;
    margin-left: 15px;
    margin-top: -220px;
font-family: Gill Sans, Trebuchet MS,  verdana, Geneva, sans-serif;
font-weight: lighter;
background: #EDF4F4;
border:solid 1px #C0DFE4;}

#content1 {
    width: 950px;
    height:auto;
    float:left;
    margin-left: 15px;
    margin-top: -118px;
font-family: Gill Sans, Trebuchet MS, verdana, Geneva, sans-serif;
font-weight: lighter;
background: #EDF4F4;
border:solid 1px #C0DFE4;}

#zebra_ligger {
    float:left;
    margin-left: 70px;
    margin-top: -3679px; }
   
#zebra_gulerod {
    float:left;
    margin-left: 70px;
    margin-top: -1780px; }


.ramme {
    width: 950px;
    height:auto;
    float:left; }

.spalte1 {
    width: 180px;
    float:left;
    margin-left: 30px;
    margin-top: 20px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}

.spalte2 {
    width: 390px;
    float:left;
    margin-left: 70px;
    margin-top: 20px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}



.spalte3 {
    width: 180px;
    float:left;
    margin-left: 50px;
    margin-top: 20px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}

.spalte3a {
    width: 180px;
    float:left;
    margin-left: 50px;
    margin-top: 140px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}



.spalte3b {
    width: 180px;
    float:left;
    margin-left: 50px;
    margin-top: 277px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}

.spalte3c {
    width: 180px;
    float:left;
    margin-left: 50px;
    margin-top: 360px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}





#photoshop {
    width: 610px;
    float:left;
    margin-left: 70px;
    margin-top: -20px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}

#photoshop1 {
    width: 610px;
    float:left;
    margin-left: 280px;
    margin-top: -190px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}

#illustrator {
    width: 610px;
    float:left;
    margin-left: 280px;
    margin-top: -20px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}

#illustrator1 {
    width: 610px;
    float:left;
    margin-left: 280px;
    margin-top: -190px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}

#illustrator2 {
    width: 610px;
    float:left;
    margin-left: 280px;
    margin-top: -190px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}


#design {
    width: 610px;
    float:left;
    margin-left: 280px;
    margin-top: -20px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}

#design1 {
    width: 610px;
    float:left;
    margin-left: 280px;
    margin-top: -190px;
color: #3b3b40;
text-align: justify;
font-size: 1em;
}


#menu {
    margin-top: 190px;
    margin-left: 15px;
padding-left:547px;
background:#99C2C6;
float:left;
width:396px;
border:2px solid #83B2BA;
border-width:5px;
border-bottom:3px solid #D0E7EA;
border-left:2px solid #D0E7EA;
list-style: none;
}


#menu li {
  display: block;
  position: relative;
  float: left;
}

#menu a {
color:#446063;
background:#99c2c6;
padding:10px 15px 5px 20px;
width: 96px;
text-align: right;
height: 15px;
border-left:1px solid #83B2BA;
text-decoration:none;
font: lighter 1em/1em Gill sans, Trebuchet MS, calibri, Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 5px 5px 5px #659496;
display: block;
  text-decoration: none;
  white-space: nowrap;
}

#menu a:hover { color:#E8E6E6;
-moz-box-shadow: inset 0 0 8px #659496;
-webkit-box-shadow: inset 0 0 8px#659496;
box-shadow: inner 0 0 8px #659496;
background:#83B2BA;
margin-top: -4px;
padding:14px 15px 5px 20px;
text-align: right;}

#menu a.selected {
color:#E8E6E6;
-moz-box-shadow: inset 0 0 8px #659496;
-webkit-box-shadow: inset 0 0 8px#659496;
box-shadow: inner 0 0 8px #659496;
background:#83B2BA;
margin-top: -4px;
padding:14px 15px 5px 20px;
text-align: right;}







#menu1 {
    margin-top: 55px;
    margin-left: 65px;
padding-left: 0px;
float:left;
width:200px;
list-style: none;

}


#menu1 li {
  display: block;
  position: relative;
  float: left;
}

#menu1 a {
color:#E8E6E6;
padding:15px 15px 0px 35px;
width: 92px;
text-align: right;
height: 30px;
border-right:3px solid #446063;
text-decoration:none;
font: lighter 1em/1em Gill sans, Trebuchet MS, calibri, Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 5px 5px 5px #000;
display: block;
  text-decoration: none;
  white-space: nowrap;
  margin-top: 3px;
  margin-bottom: 3px;
}

#menu1 li ul a {
color:#446063;
background:#83B2BA;
padding:10px 15px 5px 10px;
width: 20px;
text-align: right;
height: 30px;
border-right:1px solid #99c2c6;
text-decoration:none;
font: lighter 1em/1em Gill sans, Trebuchet MS, calibri, Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 5px 5px 5px #659496;
display: block;
  text-decoration: none;
  white-space: nowrap;
  margin-top: -48px;
  margin-left: 105px;
  margin-bottom: 3px;
  border: hidden;
}

#menu1 li ul a:hover { color:#E8E6E6;
-moz-box-shadow: inset 0 0 8px #659496;
-webkit-box-shadow: inset 0 0 8px#659496;
box-shadow: inner 0 0 8px #659496;
background:#99C2C6;
padding:10px 15px 5px 20px;
text-align: right;
border: hidden;}

#menu1 li ul a.selected { color:#E8E6E6;
-moz-box-shadow: inset 0 0 8px #659496;
-webkit-box-shadow: inset 0 0 8px#659496;
box-shadow: inner 0 0 8px #659496;
background:#99C2C6;
padding:10px 15px 5px 20px;
text-align: right;
border: hidden;}

#menu1 a.selected {
color:#91AAA7;
}



#del {
    display: block;
    width: 35px;
    height: 35px;
    background: url('links/del.png') bottom;
    text-indent: -99999px;
    float:left;
    margin-top: 15px;
    margin-left: 20px;
    padding: 0;
    }
   
#del:hover {
    background-position: 0 0;
    }
   
   
#face {
    display: block;
    width: 35px;
    height: 35px;
    background: url('links/face.png') bottom;
    text-indent: -99999px;
    float:left;
    margin-top: 15px;
    margin-left: 20px;
    padding: 0;
    }
   
#face:hover {
    background-position: 0 0;
    }
   
   
#in {
    display: block;
    width: 35px;
    height: 35px;
    background: url('links/delicious.png') bottom;
    text-indent: -99999px;
    float:left;
    margin-top: 15px;
    margin-left: 20px;
    padding: 0;
    }
   
#in:hover {
    background-position: 0 0;
    }
   
   
   

.overskrift    {
font: lighter 1em/1em  Gill Sans, Trebuchet MS, Gill sans, Arial, Helvetica, sans-serif;
color: #404849;
list-style: none;
text-decoration:none;
}
.overskrift:visited {
color: #8BBCC1;
}
.overskrift:hover {
color: #8BBCC1;
}



.top    {
font-family: Gill Sans, Trebuchet MS, verdana, Geneva, sans-serif;
font-weight: lighter;
color: #8BBCC1;
list-style: none;
text-decoration:none;
}
.top:visited {
color: #cecbbf;
}
.top:hover {
color: #cecbbf;
}


h3 {
    font: lighter 1.4em/1.4em  Gill Sans, Trebuchet MS, Arial, Helvetica, sans-serif;
color: #404849;}

h2 {
    font: lighter 1.1em/1.1em  Gill Sans, Trebuchet MS, Arial, Helvetica, sans-serif;
color: #404849;

}

h1 {
    font: lighter 1.3em/1.3em  Gill Sans, Trebuchet MS, Arial, Helvetica, sans-serif;
color: #404849;
text-transform:uppercase;
}


#opg_1 {
    display: block;
    width: 390px;
    height: 200px;
    background: url('projekter/wordpress.png') bottom;
    text-indent: -99999px;
    float:left;
    margin-bottom: 45px;
    padding: 0;
    moz-box-shadow: -5px -5px 5px #cecbbf;
    -webkit-box-shadow: -5px -5px 5px #cecbbf;
    box-shadow: -5px -5px 5px #cecbbf;}
   
   
#opg_2 {
    display: block;
    width: 390px;
    height: 200px;
    background: url('projekter/pilus.png') bottom;
    text-indent: -99999px;
    float:left;
    margin-bottom: 45px;
    padding: 0;
    moz-box-shadow: -5px -5px 5px #cecbbf;
    -webkit-box-shadow: -5px -5px 5px #cecbbf;
    box-shadow: -5px -5px 5px #cecbbf;}
   
#opg_4 {
    display: block;
    width: 390px;
    height: 200px;
    background: url('projekter/portfolio.png') bottom;
    text-indent: -99999px;
    float:left;
    margin-bottom: 45px;
    padding: 0;
    moz-box-shadow: -5px -5px 5px #cecbbf;
    -webkit-box-shadow: -5px -5px 5px #cecbbf;
    box-shadow: -5px -5px 5px #cecbbf;}
   
   
#opg_5 {
    display: block;
    width: 390px;
    height: 200px;
    background: url('projekter/tablet.png') bottom;
    text-indent: -99999px;
    float:left;
    margin-bottom: 45px;
    padding: 0;
    moz-box-shadow: -5px -5px 5px #cecbbf;
    -webkit-box-shadow: -5px -5px 5px #cecbbf;
    box-shadow: -5px -5px 5px #cecbbf;}

Okay, jeg skulle kun have sendt det omtalte, beklager.

Okay, jamen det hjælper jo lidt at se hvad vi arbejder med. Men nu vil jeg så gerne spørge dig - hvor mener du at tingene er forskudt? For mig ser det hele da ud til at være som det skal? :)

Fx i "kompetence"
Der skulle overskriften i midterspalten og højre spalte, gerne stå på linje..
Men så skal jeg måske lave en ny class til den side, for at give dem andre mål? Det ville bare være lettere, hvis man kunne sætte et eller andet ind i rammen, som angav, at den skulle stoppe et bestemt sted, så de bliver ens. Forstår du hvad jeg mener? :)