Problem mit column

[Martin..84]

Hallo zusammen
Folgendes Problem ich habe column s erstellt im column1 ist das Menü mit grauem Hintergrund im column2 ist der Text der Homepage.

Nun ist es so das der Text in manchen Bereichen etwas länger ist der graue Hintergrund von column1 wird allerdings nicht vergrößert. Ich bin schon am verzweifeln und hab schon alles mögliche veruscht angefangen von height: auto und padding usw. ich kann den menübereich zwar über padding vergrößern aber ich möchte eine feste größe nur wenn der Text länger wird im column2 soll column1 nachrücken. Ich hoffe das funktoiniert.

/* main content */
#content
{
    background-color: FFD8BF;
    
    padding: 0px;
    overflow: hidden;
}

/* column 1 - contains menu, news, add links and other info */
#column1
{
         
    width: 22%;
    float: left;
    padding: 15px 0px 15px 14px;

}

#menu
{
    
    position: relative;
    width: 100%;
    float: left;
    
}



/* column2  */
#column2
{
    
    padding: 10px 52px 6px 0px;
    width: 62%;
    float: right;
}

#column2 a, #column2 a:hover
{
    padding: 0px;
    text-decoration: none;
}

/* footer */
#footer
{
    float: left;
    padding: 9px 0px 3px 0px;
    width: 100%;
    text-align: center;
    font-size: .74em;
    background-color: #95825A;
}

#footer a, #footer a:hover
{
    text-decoration: none;
}

 

[dkdenz]

Könntest Du das mal richtig verpacken, damit man sich das zum Testen nicht selbst zusammen frickeln muss?
http://forum.jswelt.de/css-x-html/26808-bitte-lesen-vereinfachung-hilfestellungen.html

 

[Martin..84]

das wäre der Html code für die Seite (vorerst)

<link rel="stylesheet" href="format.css" type="text/css">



<div id='main'>
    <div id='logo'></div>
    <div id='content'>
      <div id='column1'>
        <div id='menu'>
	 <div id='menu1'>
        
      <div id='linkdiv' name='linkdiv'>
      <div class='passiv'><a href='index.php'>Home</a>

      </div><div class='passiv'><a href='news.php'>News und Termine</a>
     
	</div>      
      
            <p> </p>
             
      
            <br><br><br><br>         
  
    
     
      <div id='column2'>
      <br><div align = 'center'><strong>1 </strong> </div></div>
    </div>
    <div id='footer'>
    WARTUNG
    <p> </p>
    <br><br>

    </div>
  </div>     
</body>
</html>

und das das komplette css file... ich weis is nicht gerade Profesionell aber es funktioniert

body
{
    background: #D2C7B0;
    font-family: verdana, arial, sans-serif;
    padding: 0px;
    margin: 0px;
    font-size: .74em;
}

a {
color:#73674d;
text-decoration:none;
}

#logo
{ background: #FF0000;
  color: #3E4244;
}

#logo h1
{
  color: #FFFFFF;
}

#content, #column1, #column2
{ background-color: #FFFFFF;
  color: #3E4244;
}

#menu
{ background: #EEEAE1;
  color: #3E4244;
}

#footer
{
    background-color: #fff;
    color: #FFFFFF;
}

#footer a:link
{
    color: #FFFFFF;
}

#footer a:visited
{
    color: #FFFFFF;
}

#footer a:hover
{
    color: #FFFFFF;
}

h1
{
    margin: 0px;
    font-family: verdana, tahoma, arial, sans-serif;
    font-size: 140%;
    font-weight: normal;
}

/* main container */
#main
{
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    background: #FFFFFF;
}

/* logo */
#logo
{
    padding: 0px;
    height: 100px;
    border-left: 0px solid;
    border-right: 0px solid;
}

#logo h1
{
    padding: 38px 0px 0px 19px;
    font-family: verdana, arial, sans-serif;
    font-size: 150%;
    font-weight: normal;
    letter-spacing: .2em;
}

/* main content */
#content
{
    background-color: FFD8BF;
    height: auto;
    padding: 0px;
    text-align: justify;
    overflow: hidden;
}

/* column 1 - contains menu, news, add links and other info */
#column1
{
    width: 22%;
    float: left;
    padding: 15px 0px 15px 14px;
}

#menu
{
    
    position: relative;
    width: 100%;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 8px 0px 0px 0px;
}



/* column2  */
#column2
{
    text-align: justify;
    padding: 10px 52px 6px 0px;
    width: 62%;
    float: right;
}

#column2 a, #column2 a:hover
{
    padding: 0px;
    text-decoration: none;
}

/* footer */
#footer
{
    float: left;
    padding: 9px 0px 3px 0px;
    width: 100%;
    text-align: center;
    font-size: .74em;
    background-color: #95825A;
}

#footer a, #footer a:hover
{
    text-decoration: none;
}

#linkdiv
{
    padding-top:10px;
    padding-left:10px;
    margin-bottom:20px;
}

.passiv a
{
    text-decoration: none;
    color: #121212;
}

.passiv a:hover
{
    text-decoration: none;
    color: #121212;
    background: #E0D8C8;
}

.aktiv a
{
    text-decoration: none;
    color: #121212;
    background: #E0D8C8;
}

warscheinlich ist es für euch ein leichtes mit zu sagen welchen befehl ich dazufügen muss damit es funtz aber ich bin wohl zu blond :icon8:

 

[ein schlauer]

Dein Problem nennt sich auf englisch faux columns(google liefert auch massig Treffer). Das Problem ist, das das was du willst nicht ohne ein Tabelle wirklich funktioniert. Es widerspricht dem Konzept von CSS, wo es nur voneinander unabhängige Boxen gibt, du willst aber voneinander abhängige Zellen, daher wäre das einfachste eine Tabelle zu benutzen, da die genau diese Eigenschaft hat. Oder du benutzt einen Workaround, den du mit der obigen suche finden solltest.