Høyre og venstre kolonne følger ikke etter footer

Wæsp · 15. februar 2010

Hei,

jeg har laget et design til en side. Designet er tre kolonner.

problemet er at jeg har satt en min-height, slik at content-boksen blir lengre dersom det blir for mye tekst i den.

Men når boksen blir lengre, følger ikke de to kolonnene på siden etter!

CSS:

@charset "utf-8";
/*
  CSS Dokument av Fredrik Christensen
  Mafia Legacy
  2010
  Kopiering uten samtykke er forbudt!
*/

body {
background-image: url('images/scanline.jpg');
font-family: tahoma;
font-size: 12px;
color: white;
textt-align: center;
}

a {
color: white;
font-size: 12px;
text-decoration:none
}

a:hover {
color:#FFF;
}

#container {
height: 873px;
width: 1121px;
margin: 0px auto;
}

#toppmeny {
margin: -10px auto;
background-image: url('images/toppmeny.gif');
height: 57px;
witdh: 29px;
border-right: 1px solid #545454;
border-left: 1px solid #545454;
border-bottom: 1px solid #545454;
}

#header {
margin: 15px auto;
backround-image: url('images/header.jpg');
height: 201px;
width: 1121px;
border: 1px solid #545454;
background-image: url(images/header.jpg);
}

#venstremeny {
margin: -15px auto;
padding: 10px;
background-color: #24262a;
min-height: 636px;
width: 183px;
float: left;
color: white;
border-left: 1px solid #545454;
border-right: 1px solid #545454;
border-bottom: 1px solid #545454;
}

#høyremeny {
margin-top: -15px;
margin-right: -2px;
padding: 10px;
background-color: #24262a;
min-height: 636px;
width: 185px;
float: right;
color: white;
border-left: 1px solid #545454;
border-right: 1px solid #545454;
border-bottom: 1px solid #545454;
}

#content {
margin-top: -15px;
margin-left: 205px;
padding-left: 12px;
background-color: #151619;
min-height: 656px;
width: 703px;
border-bottom: 1px solid #545454;
}

#footer {
height: 46px;
width: 1121px;
background-color: #2e3034;
border-left: 1px solid #545454;
border-right: 1px solid #545454;
border-bottom: 1px solid #545454;
}

table {
margin:auto;
}

td {
font-family: Tahoma;
font-size: 12px;
color: #FFFFFF;
font-weight: normal;
}

.C2  {
font-size: 12px;
font-family: Tahoma;
color: white;
background-color: #606060;
border-collapse: collapse;
border: 1px black;
}

.C2 .t {
background:#333 url(grafikk/tablehead.jpg) repeat-x;
color:#eee;
text-align:center;
font-weight: normal;
font-size: 12px;
padding:3px;
height:22px;
}


.C2 td {
padding:5px;
border:1px solid #111;
}

.C2 th {
background:#333 url(grafikk/tablehead.jpg) repeat-x;
color:#eee;
text-align:center;
font-weight: normal;
font-size: 12px;
padding:3px;
height:22px;

}

.admin  {
color: #FF0000;
text-align: left;
}
.senmod {
color: lightblue;
text-align: left;
}
.mod {
color: #lightblue;
text-align: left;
}

.mod1 {
color: #008000;
text-align: left;
}

.betatester {
color: blue;
text-align: left;
}

.knappprofil {
height: 24px;
width: 48px;
background-color: #333;
border: #999;
}



/*** KLASSER ***/

.venstretopp {
background-image: url('images/høyre.gif');
margin-left: -20px;
height: 24px;
width: 200px;
padding-top: 13px;
padding-left: 13px;
margin-top: -7px;
margin-bottom: 5px;
color: black;
}

.høyretopp {
background-image: url('images/venstre.gif');
margin-left: -10px;
height: 24px;
width: 200px;
padding-top: 13px;
padding-left: 13px;
margin-top: -7px;
color: black;
}

/*** LINKER ***/

a {
color: #CCC;
text-decoration: none;
}

a:hover[name=blue] {
border-bottom: 1px solid #3399ff;
}

a:hover[name=green] {
	border-bottom: 1px solid #00cc00;
}

a:hover[name=purple] {
border-bottom: 1px solid #cc0066;
}

a:hover[name=lightred] {
border-bottom: 1px solid #ffcccc;
}

a:hover[name=red] {
border-bottom: 1px solid #ff0000;
}

a:hover[name=yellow] {
border-bottom: 1px solid #ffff00;
}

a:hover[name=orange] {
border-bottom: 1px solid #ff6600;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//NO" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Mafia Legacy - Beta versjonen på nett!</title> 
<link rel="stylesheet" href="style.css" type="text/css" /> 
</head> 
<body> 

   <div id="toppmeny"> 
   </div> 

<div id="container"> 
<div id="header"></div> 

<div id="venstremeny"> 
<div class="venstretopp"> 
   <center><b>HOVEDMENY</b></center> 
   </div> 	
				<a href="index.php?valg=hoved" name="blue">Hovedside</a><br /> 
			<a href="index.php?valg=endringslogg" name="blue">Endringslogg</a><br /> 
			<a href="index.php?valg=politistasjon" name="blue">Politistasjon</a><br /> 
               <a href="index.php?valg=online" name="blue">Spillere Pålogget</a><br /> 
               <a href="index.php?valg=finnspiller" name="blue">Finn Spiller</a><br /><br /> 

               <a href="index.php?valg=krim" name="green">Kriminalitet</a><br /> 
               <a href="index.php?valg=utpressing" name="green">Utpressing</a><br /> 
               <a href="index.php?valg=biltyveri" name="green">Biltyveri</a><br><br /> 

               <a href="index.php?valg=ran" name="green">Ran</a><br /> 
               <a href="index.php?valg=getaway" name="green">Getaway</a><br /> 
			<a href="index.php?valg=oppdrag" name="green">Oppdrag</a><br /><br /> 

               <a href="index.php?valg=banken" name="purple">Banken</a> <br /> 
               <a href="index.php?valg=auksjoner" name="purple">Auksjoner</a> <br /> 
               <a href="index.php?valg=handel" name="purple">Handel</a><br><br /> 

               <a href="index.php?valg=flyplass" name="lightred">Flyplass</a><br /> 
               <a href="index.php?valg=fengsel" name="lightred">Fengsel</a><br /> 
               <a href="index.php?valg=garasje" name="lightred">Garasje</a><br /><br /> 

               <a href="index.php?valg=redigerp" name="red">Endre bruker</a><br /> 
			<a href="index.php?valg=minside" name="red">Min Side</a><br /> 
               <a href="index.php?valg=kontakter" name="red">Kontakter</a><br /><br /> 

               <a href="index.php?valg=stats" name="yellow">Statistikk</a><br /> 
               <a href="index.php?valg=reglementet" name="yellow">Reglementet</a><br /> 
               <a href="index.php?valg=smsfirma" name="yellow">Sms-Firma</a><br /> 
</div> 

<div id="høyremeny"> 
<div class="høyretopp"> 
   <center><b>VIS PROFIL</b></center> 
</div> 
   <center><img src="grafikk/avatar.png" width="129" height="137" align="center" style="margin-top:10px;" /><br style="height:5px;"></center><br /> 
        	Nick: <a href="index.php?valg=visprofil&bruker=Wasp" title="Vis profilen din"><span class="senmod">Wasp</span></a><br> 
       	Liv:     100%<br> 
        	Rank: 	 Capo<br> 
           Land:    Napoli<br> 
        	Kuler:   0 stk<br> 
		Penger:  4,868,229,007 kr<br>     		         	
        	Familie: Mafia Legacy<br><br /><br /><br /> 


				<a href="index.php?valg=innboks" title="Innboks" name="orange">Innboks</a><br>				<a href="index.php?valg=skrivpm" name="orange">Skriv PM</a><br /> 
			<a href="index.php?valg=utboks" name="orange">Utboks</a><br /> 
               <a href="index.php?valg=mainforum" name="orange">Generelt Forum</a> <br /> 
               <a href="index.php?valg=ssforum" name="orange">Salg/Søk forum</a><br /> 
</div> 
<div id="content"> 

		<div style="margin:auto; width:100%;"> 
		<p><font style="color:#CCCCCC; font-weight:bold;" font size="3px"><u>Informasjon til registrerte spillere</u></font> <a href="index.php?valg=hoved&slett=27">[slett]</a><br /><br /> 
		<font style="font-size:12px; font-family:Tahoma; color:#888;">Vi driver nå med bytte av design, og det kan derfor oppstå problemer med spillet de neste dagene. Vi jobber hardt med å få dette på plass så fort som mulig.
<br> 
<br>-Ledelsen</font> 
           <br /><br /></div><br /><br /><br /> 
<form action="" method="post"> 
<table width="30%" class="C2" align="center"> 
	<tr class="bhead"> 
		<th colspan="2" align="center">Skriv Nyhet!</t> 
	</tr> 
	<tr class="uhead"> 
       	<td>Tittel:</td> 
           <td><input type="text" name="tittel" class="input"></td> 
       </tr> 
       <tr> 
		<td>Tekst:</td> 
		<td><textarea cols="75" rows="10" name="tekst" class="textarea"></textarea></td> 
	</tr> 
	<tr class="ehead"> 
		<td colspan="2"><input type="submit" name="skriv" value="Legg til" class="submit"></td> 
	</tr> 
</table> 
</form> 
</div> 

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

vet ikke hvordan jeg skal få disse to kolonnene itl å følge etter content boksen, altså bli lengre når content boksen blir lengre.

Takker for all hjelp!

-Fredrik

Stian Jacobsen · 17. februar 2010

Jeg er ikke helt i humør for å lese hele koden din, men jeg tror at du er ute etter "faux columns".

Se: http://www.ejeliot.com/blog/61

Bjonski · 1. mars 2010

Sett container til height: auto; med samme bakgrunn som menyene.

fjern border fra menyene.

Legg til border på container

Legg til border left/right på content.

Legg til en heldekkende border på footer.

Wæsp · 21. mars 2010

Takk, det funka nesten nå!

Problemet er bare at nå følger borderen etter, men ikke fargene!

Vet du hva problemet er?

Bjonski · 23. mars 2010

Takk, det funka nesten nå!

Problemet er bare at nå følger borderen etter, men ikke fargene!

Vet du hva problemet er?

Hadde vært enklere om du la ut en demo av nettsiden, slik at vi fikk sett problemet.

Logg inn

Høyre og venstre kolonne følger ikke etter footer

Anbefalte innlegg

Wæsp

Videoannonse

Stian Jacobsen

Bjonski

Wæsp

Bjonski

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer