28.11.2009, 12:56
|
|||
|
|||
Beide DIV-Container auf gleicher Höhe ohne Layout-Wechsel
Und zwar möchte ich beide Boxen immer gleich hoch haben, nicht abhängig von dem Inhalt der Boxen... So sieht es momentan aus:
 Ich möchte die linke BOX gleich weit nach unten haben, wie die rechte Box. Wie ist das möglich OHNE Layout Änderungen? Hier die beiden Codes: index.html Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Lerchenfeld Maturaball ist wieder da</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta name="keywords" content="Gymnasium, Lerchenfeld, Ball, Schule, Matura, Maturaball, Klagenfurt, Messearena, Eintrittskarte, Eintrittskarten" /> <meta name="description" content="Nach 4 jahren ist er wieder da! Der Maturaball des BG/BRG Lerchenfelds mit dem Motto: Black or White! Jetzt Tische und Eintrittskarten sichern!"/> <meta name="content-language" content="de"/> <meta name="distribution" content="global"/> <meta http-equiv="Content-Script-Type" content="type"/> <!-- Die Website basiert auf PHP, MYSQL, Javascript und Ajax. Der Programmcode stammt von Mag. Otto Dolinsek.--> <link rel="stylesheet" type="text/css" href="screen.css" media="screen"/> </head> <body> <div id="container"> <div id="row1"> </div> <div id="row2"> </div> <div id="col1"> <a href="formular.html">Formulare</a> </div> <div id="col2">Col2</div> <div id="footer">Footer</div> </div> </body> </html> Code:
body{
background: #000000 url() no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
}
#container{
width: 980px;
background: #DDD;
position: relative;
min-height: 100%;
height: auto;
height: 100%;
}
#row1{
position: relative;
float: left;
width: 980px;
border: 0px solid #457576;
height: 216px;
padding-top: 0px;
padding-bottom: 0px;
background: #000000 url(images/header.png) no-repeat;
}
#row2{
position: relative;
float: left;
width: 980px;
border: 0px solid #457576;
text-align: left;
height: 42px;
padding: 0px;
font-style: bold;
font-size: 1em;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
background: #000000 url(images/row1.png) no-repeat;
clear: both;
}
#col1 {
position: relative;
border: 0px solid #FF0000;
float: left;
width: 180px;
padding: 10px;
background: #ffffff url(images/col1.png) repeat-y;
clear: both;
}
#col2 {
position: relative;
border: 0px solid #00FF00;
float: left;
width: 760px;
padding: 10px;
background: #ffffff url(images/col2.png) repeat-y;
}
#footer {
position: relative;
float: left;
width: 960px;
border: 0px solid #457576;
text-align: left;
height: 22px;
padding: 10px;
font-style: bold;
font-size: 1em;
background: #ee0000 url(images/footer.png) no-repeat;
clear: both;
}
form br {
clear: both;
}
form.left {
border: 0px solid #cccccc;
margin: 0.5em 0em 0.5em 0em;
}
fieldset.left {
padding:0.5em 0.5em 0.5em 0.5em;
border:1px solid #cccccc;
color:#000000;
background-color:#ffffff;
}
legend.left {
border: 1px solid #cccccc;
background-color:#ffffff;
color: #ff0000;
padding:0.5em;
font-weight: 600;
font-size: 1em;
margin: 0em 0em 1em 0em;
}
label.left {
float: left;
padding-left: 0.5em;
padding-right: 0.5em;
text-align: left;
width: 18em;
}
input[type=submit].left {
background-color:#eeeeee;
color:#ff0000;
font-size: 0.9em;
}
input[type=reset].left {
background-color:#eeeeee;
color:#ff0000;
font-size: 0.9em;
}
|
| Sponsored Links |
|
28.11.2009, 15:35
|
|||
|
|||
|
Das sollte recht einfach mit der faux-columns Technik gehen.
Siehe Nr. 1 vermute ich mal. (geändert ;) )
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
| Sponsored Links |
 |
| Stichwörter |
| css, hilfe |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| div container Höhe anpassen funktioniert nicht! | hopaba | CSS | 4 | 21.02.2010 17:23 |
| Div Layout (überlagerte Divs mit auto. höhe) | Rijndael | CSS | 0 | 29.11.2008 14:52 |
| 100% div höhe | virtualia | CSS | 5 | 19.11.2007 02:41 |
| div Container nimmt automatisch die Höhe des Eltern-div an | fidelio | CSS | 3 | 12.04.2006 15:34 |
| 3 Spalten Layout - Div Höhe aneinander angleichen | Simsi | CSS | 3 | 01.01.2006 18:04 |
Linear-Darstellung
