Flexible Div Boxen

kinn · 24.07.2009

Hallo,
ich habe mit drei Div Boxen erstmal ein Grundgerüst erstellt (http://kinn.de.tp), leider habe ich ein kleines Problem.
Und zwar möchte ich das der Navigation-Bereich immer die selbe Höhe hat wie der Main-Content. Bzw. andersherum, je nach dem.
Außerdem kann ich keine festen Höhen definieren, da ich den Inhalt flexibel ändern möchte.

CSS Datei http://geifell.ge.ohost.de/styles.css

hoffentlich könnt ihr mir helfen

Gruß Sascha

Hubspe · 25.07.2009

Hi,

guckst du hier:http://alistapart.byteshift.de/fauxcolumns.

Mit der Faux Columns Technik sind gleichhohe Spalten normal kein Problem.

Gruß
Klaus

kinn · 25.07.2009

hi,
Danke für deinen Post.
Gibt es nur diese eine Möglichkeit um gleichhohe Spalten entstehen zulassen?
Aber dank deinem Post habe ich noch folgende Seite gefunden, welche es auch sehr gut beschreibt. http://www.alistapart.com/articles/holygrail
Ich werde mich einmal daran versuchen und euch bzw. dich auf dem laufenden halten.

Gruß Sascha

Hubspe · 26.07.2009

Moin Sascha,

gibt es, aber das ist bei weitem die einfachste und am häufigsten angewandte.

Gruß
Klaus

kinn · 26.07.2009

Hi,
nochmal danke ich habs jetzt soweit mml

So sieht jetzt der einfache Quellcode aus. In der CSS Datei der untere Teil sorgt für gleichlange Spalten

Code:

&lt;html>
 &lt;head>
  &lt;title>Kinn's Website&lt;/title>
  &lt;link rel=stylesheet type=text/css href=layout.css>
  &lt;link rel=stylesheet type=text/css href=styles.css>
 &lt;head>
 
 &lt;body>
  &lt;div id=header>header&lt;/div>
  &lt;div id=container>
    &lt;div id=center class=column>&lt;h2>Herzlich Willkommen&lt;/h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Lorem ipsum dolor sit amet, consectetuer adipiscing elit,Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et&lt;/div>
    &lt;div id=left class=column>&lt;h2>Navigation&lt;/h2>Link #1&lt;br>Link #2&lt;br>Link #3&lt;br>&lt;/div>
    &lt;div id=right class=column>Right&lt;/div>
  &lt;/div>
  &lt;div id=footer>Footer&lt;/div>
 &lt;/body>
&lt;/html>

Code:

body {
 min-width: 630px;   /* 2x (LC fullwidth +
              CC padding) + RC fullwidth */
}
#container {
 padding-left: 200px;  /* LC fullwidth */
 padding-right: 190px; /* RC fullwidth + CC padding */
}
#container .column {
 position: relative;
 float: left;
}
#center {
 padding: 0px 20px;  /* CC padding */
 width: 100%;
}
#left {
 width: 180px;     /* LC width */
 padding: 0 10px;    /* LC padding */
 right: 240px;     /* LC fullwidth + CC padding */
 margin-left: -100%;
}
#right {
 width: 130px;     /* RC width */
 padding: 0 10px;    /* RC padding */
 margin-right: -190px; /* RC fullwidth + CC padding */
}
#footer {
 clear: both;
 text-align: center;
 padding-top: 15px; 
}

/*** IE Fix ***/
* html #left {
 left: 150px;      /* RC fullwidth */
}

/*** Equal-height columns ***/
#container {
 overflow: hidden;
}
#container .column {
 padding-bottom: 20010px; /* X + padding-bottom */
 margin-bottom: -20000px; /* X */
}
#footer {
 position: relative;
}

Danke nochmal

Gruß
Sascha

Flexible Div Boxen

kinn

Hubspe

kinn

Hubspe

kinn

Flexible Div Boxen

ANGEBOTE & SPONSOREN

Neueste Themen

Statistik des Forums