Problemer med border høyde

[Aas]

Dette problemet er litt vanskelig å forklare og jeg er helt blank på problemet selv om det kanskje ligger rett foran nesa på meg. Jeg skal har ihvertfall et problem med å få en border til å ha en høyde på hundre prosent i en div som har min-height isteden for vanlig height fordi den skal bli større etter hvor mye som er inni den, men når jeg setter en border til høyre for en del av siden så er den borderen så lang som teksten og ikke så lang som selve siden selv. Det var kanskje litt vanskelig å forstå så jeg skal gi dere litt kode og litt bilder så får vi se!

HTML koden:

<div id="main">

  <table width="100%" border="0">
    <tr>
      <td style="border-right:1px solid #999;"width="13%">left<br /><br /></td>
      <td width="69%">mid</td>
      <td style="border-left:1px solid #999;" width="18%">right<br />Heisann<br />halla</td>
    </tr>
  </table>
</div>

CSS kode:

#main {
	
	width:960px;
	min-height:400px;
	background-color:#dcdedf;
	margin-left:auto;
	margin-right:auto;
	border:1px solid #CCC;
	
	}	
#main td {
	min-height:400px;
	vertical-align:top;
	}

Her har jeg main og deler den opp i tre deler med en table, venstre siden skal være en navigasjonsbar, midten skal være der alt av content er og til høyre en del med litt forskjellig som annonser og lignende. Problemet er at borderen går ikke hele høyden ned, den følger teksten som jeg setter inn i de forskjellige delene, når jeg vil at den skal gå hele main diven ned.

Bilde:

 

[Aas]

Bump, jeg sliter fortsatt med samme problem å vet ikke helt hva jeg skal søke på google etter for å finne en løsning, sitter det en ivrig designer på forumet som vet hva jeg kan gjøre?

 

[kek91]

Anbefaler å bruke kun CSS i stedet.

Eksempel:

<div id="main">
    
    <div id="main_navigation">
        blabla
    </div>

    <div id="main_content">
        blabla
    </div>

    <div id="main_ads">
        blabla
    </div>

</div>

<div class="clearboth"></div>

#main {
	width:960px;
	min-height:400px;
	background-color:#dcdedf;
	margin-left:auto;
	margin-right:auto;
	border:1px solid #CCC;
	
}	

#main_navigation {
    float:left;
    width:13%;
    height:100%;
    border-right:1px solid #999;
}
#main_content {
    float:left;
    width:69%;
    height:100%;
}
#main_ads {
    float:left;
    height:100%;
    border-left:1px solid #999;
}

.clearboth { 
    clear:both; 
}

Grunnen til at jeg bruker clearboth klassen er fordi når man bruker float:xxxx; så vil elementer som kommer etter (f.eks. footeren) gjemme seg bak det andre med mindre man "breaker" floatsa først.

Nå har jeg ikke testet denne koden, men tror muligens det vil funke. Tar forbehold om at feil kan forekomme, klokka er bare 10 på morgenen

 

[Aas]

Alt jeg trengte å gjøre var å sette en min-height på 400px på alle tre der så funket det slik jeg ville, herlig, takk!

 

[Pong]

Det kan være, men du fikk en tips til å ikke utforme siden mha tables. Bruk tables til hva de er tenkt til, ikke til layouten.
Folk flest bryr seg sikkert ikke, bortsett fra en subset av folk flest, som er folk flest her inne - ihvertfall når du skal lære deg å sette opp en layout.

 

[kek91]

Det var bra du fant en løsning, men jeg anbefaler fortsatt å konvertere til CSS.
Det ser bedre ut i HTML filen, lettere å feilsøke hvis noe ikke oppfører seg som det skal og selvfølgelig at det er den nye standarden.

Det betyr ikke at du trenger å kutte ut tables helt. Jeg bruker selv tables hvis jeg f.eks. skal liste et-eller-annet fra database. F.eks. en vareliste

Som Pong sier, folk på webforum liker ikke å bruke tables til layout, da får du gjennomgå

 

[Aas]

Det jeg mente var at jeg måtte sette min-height på divene i CSS så funket det, jeg har tatt vekk tablen, jeg brukte de kodene du la ut kek! Jeg har fått med meg at tables er gammeldags, så jeg skal holde meg unna det fra nå av.

 

[kek91]

Åja okay, beklager misforståelsen Flott å høre at du fikk fikset det, med stil! (css)