Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

2 divs nebeneinander zweites min. so hoch wie erstes

Antwort erstellen

2 divs nebeneinander zweites min. so hoch wie erstes

Beitragvon aco » 12.11.2006, 22:05

Erstmal eine allgemeine Begrüßung an das Forum!

Bisher hat es mir immer gereicht hier zu lesen, jetzt muss ich aber auch mal etwas fragen.

Ich habe ein zweispaltiges Layout bestehend aus Navigation und Content. Jeweils ein Div. Dazwischen ist eine 1px Linie mit border-left am Content-Div. Wenn jetzt mal die Navi höher ist als der Content-Div hört die Linie mittendrin auf.

Ich habe schon probiert ein Div um Navi und Content zu legen und dann den Content auf height:100% zu stellen. Das bringt aber nur etwas wenn das Div außen eine Höhenangabe hat.

Am liebsten wäre mir eigentlich, dass der Content immer mindestens so hoch ist wie das Fenster minus Header und im Notfall sich nach unten vergößert und den Footer verdrängt...

Kann mir da jemand einen Tipp oder Link geben?

Grüße Aco
aco
neu hier
 
Beiträge: 3
Registriert: 12.11.2006, 21:42
Nach oben

Beitragvon Laus » 13.11.2006, 07:11

Hallo Aco

Wie sind denn die Divs angeordnet, mit float? Wenn ja, hast du eventuell das clear vergessen? Quelltext oder Onlinebeispiel wäre nicht schlecht :wink:

Für 100% hohe Seiten mit footer immer ganz unten ist -->footer stick alt<-- das richtige.

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

Beitragvon aco » 13.11.2006, 22:38

ok hier der quellcode

Code: Alles auswählen
...

<body>
<div>
<table>
      <tr>
         <td>

            <div>
               &nbsp;
            </div>


              <div>
               <div>
                    Sprachauswahl
               </div>
               <div>
                    Headline
               </div>
              </div>


<div>


              <div>
               <div>
                 navi
               </div>
              </div>

              <div>
               <div>
                  content
               </div>
              </div>




              <div>
               box_right
            </div>

</div>



            <div>
               <div>
                  &nbsp;
               </div>
               <div>
                  footertext
               </div>
            </div>

           </td>
        </tr>
     </table>
</div>
<br>

</body>
...




und die CSS




Code: Alles auswählen

html {
   height: 100%;
}

body {
   height: 100%;
   margin-bottom: 1px;
}


#main{
   background-color:#e4e6ef;
   heigth:100%;
   border:1px solid #00FFFF;
}

#header_outer {
   margin: 0px;
   float: left;
   padding: 0px;
   width: 800px;
   height: 150px;
   background: url(/cms/templates/images/blautitelhead.jpg) repeat-x;
   border:0px;
   border-bottom:1px solid #FFFFFF;
   border-left:1px solid #FFFFFF;
}


#joomfish {
   margin: 0px;
   float: left;
   padding: 0px;
   border:0px;
   color: #ffffff;
   margin-top:10px;
   margin-left:20px;
   width:760px;
   height:20px;
}

#content_titel {
   margin: 0px;
   float: left;
   padding: 0px;
   border:0px;
   font-weight: bold;
   font-family: verdana,arial,san-serif;
   text-decoration:none;
   color: #ffffff;
   font-size: 26px;
   font-weight: bold;
   margin-top:85px;
   margin-left:20px;
}


#top_outer{
  border: 1px solid #FF0000;
   float: left;
   width: 5px;
}

#logo{

   height: 150px;
   background: url(/cms/templates/images/logo.gif) repeat-x;
   border:0px;   
   border-bottom:1px solid #FFFFFF;
   width:198px;
   border-right:1px solid #FFFFFF;
   float: left;
}

#left{

     float:left;
   margin:0px;
   width:199px;
   border:0px;
     border: 1px solid #FF0000;

}


a.mainlevel:link, a.mainlevel:visited {
   display: block;
   vertical-align: middle;
   font-weight: normal;
   text-align: left;
   padding-top: 5px;
   padding-left: 15px;
   height: 20px !important;
   height: 25px;
   width: 184px;
   text-decoration: none;
   font-family: verdana,arial,san-serif;
   color:#000000;
   font-size: 12px;
   background-color:#e4e6ef;
   border:0px;
   border-bottom:1px solid #FFFFFF;

}

a.mainlevel:hover {

   text-decoration: none;
   font-weight: bold;
   background-color:#7E3845;
}

a.mainlevel#active_menu {
   background-color:#c3cbdc;
}

a.mainlevel#active_menu:hover {
   background-color:#7E3845;
}


#navi_content_box {
     float:left;
   margin:0px;
   width:998px;
   border:0px;
   border:1px solid #00FFFF;
}


#content_outer {
   padding:0px;
   padding-left:20px;
   margin:0px;
   float: left;
   width: 578px;
   background-color:#e4e6ef;
   height:100%;
   border-left: 1px solid #FFFFFF;
     border: 1px solid #FF0000;
}


#content_inner{
   padding-top:20px;
   margin:0px;
   float: left;
   width: 560px;
     border:0px;
}

#right {
   padding:20px;
   margin:0px;
   float: left;
   width: 150px;
   border:0px;
     border: 1px solid #FF0000;
}


body {
   margin: 15px;
   height: 100%;
   padding: 0px;
   font-family: Arial, Helvetica, Sans Serif;
   line-height: 140%;
   font-size: 11px;
   color: #333333;
   background: #ffffff;
}


div.moduletable {
   padding:0px;
   margin-bottom: 2px;
   border:0px;
}


#titel {
   font-family: arial, helvetica, sans-serif;
   color:#003f90;
     text-transform: uppercase;
     font-size: 12px;
     font-weight: bold;
   letter-spacing: 0.05em;
   padding-top:4px;
}


#footer_outer{
   float:left;
   width:1000px;
   height:25px;
   margin:0px;
     border:0px;
   text-align:left;
   border-top:1px solid #FFFFFF;

}

#footer_left{
   float:left;
   width:199px;
   height:24px;
     border:0px;
   text-align:left;
   margin:0px;
   border-right:1px solid #FFFFFF;

}

#footer_right{
   float:left;
   width:500px;
   height:24px;
     border:0px;
   text-align:left;
   margin:0px;
   margin-left:20px;
   margin-top:4px;
}





Was meine Linie betrifft hab ich schon eine idee, ich kann ja einfach ein hintergrundbild mit der linie in das allumfassende div legen.

ok nach diesem stick alt und clear muss ich mich mal umschauen, habe ich noch nie gesehen.

Vielen Dank schonmal!
Gruß Aco
aco
neu hier
 
Beiträge: 3
Registriert: 12.11.2006, 21:42
Nach oben

Beitragvon skittles » 14.11.2006, 02:57

1. das ist kein schönes Mark Up!
2. bei CSS werden Tabellen wirklich nur für Tabellen verwendet (z.b. Sportergebnisse)
skittles
ist häufig da
 
Beiträge: 176
Registriert: 27.03.2006, 13:49
Wohnort: Wien
Nach oben

Beitragvon Laus » 14.11.2006, 04:38

Was meine Linie betrifft hab ich schon eine idee, ich kann ja einfach ein hintergrundbild mit der linie in das allumfassende div legen.


Da du nicht clearst hilft dir das wahrscheinlich auch nicht weiter.
Wer floatet muss auch clearen -->lies das<-- und verstehe. Vor allem der letzte Absatz ist für dich interessant.
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

Beitragvon aco » 14.11.2006, 22:48

:-) die seite habe ich vor einer weile schonmal gelesen. allerdings gebe ich zu, dass ich die funktione von clear wieder vergessen hatte.

aber wenn ich es richtig verstanden habe benötige ich kein clear, da alle meine boxen, die folgen auch ein float haben.

das mit der weißen linie als hintergrundbild hat einwandfrei funktioniert! wo hätte es hängen sollen?

grüße aco
aco
neu hier
 
Beiträge: 3
Registriert: 12.11.2006, 21:42
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "2 divs nebeneinander zweites min. so hoch wie erstes"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de