mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 03:24 Benutzername: Passwort: Auto-Login

Thema: Problem mit DIV-Höhe vom 21.02.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Problem mit DIV-Höhe
Autor Nachricht
bigfraggle
Threadersteller

Dabei seit: 21.02.2012
Ort: Berlin
Alter: -
Geschlecht: -
Verfasst Di 21.02.2012 10:41
Titel

Problem mit DIV-Höhe

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,

nachdem ich das Forum bislang "nur" als Nachschlagewerk genutzt habe, brauche ich jetzt doch einmal selber Hilfe...

Also:

Ich habe einen Haupt-DIV-Container, in dem sich zwei weitere DIVs nebeneinander befinden.

Code:
<div id="main">
   <div id="content">Inhalt</div>
   <div id="sidebar">Inhalt</div>
</div>
<div id="footer">Footer</div>


Code:
#main {
   position: relative;
   margin: 0 auto;
   margin-top: 12px;
   padding: 12px;
   width: 926px;
   background: url(background.png) repeat; }

#content {
   position: relative;
   padding: 12px;
   width: 664px;
   float: left; }

#sidebar {
   position: relative;
   margin-left: 12px;
   float: left;
   width: 226px; }

#footer {
   position: relative;
   margin: 0 auto;
   padding: 12px 0;
   clear: both;
   width: 950px; }


Die Inhalte von "content" und "sidebar" sind variabel. Nun soll sich die Höhe des Haupt-DIVs "main" entsprechend anpassen. Allerdings bleibt das Ganze unabhängig vom Browser immer nur eine Zeile oder so hoch.

Wo ist mein Denkfehler? Was habe ich übersehen?

Danke
bigfraggle
  View user's profile Private Nachricht senden
snuwie

Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 21.02.2012 10:57
Titel

Antworten mit Zitat Zum Seitenanfang

Du musst richtig "clearen". Lächel

Gäbe da jetzt mehrere Möglichkeiten:
- einen eigenes Element mit clear Klasse in den #main DIV
Code:

.clear { clear: both; }

<div id="main">
   <div id="content">Inhalt</div>
   <div id="sidebar">Inhalt</div>
   <div class="clear"></div>
</div>


- eine der "Clearfix Methoden"
  View user's profile Private Nachricht senden
Anzeige
Anzeige
bigfraggle
Threadersteller

Dabei seit: 21.02.2012
Ort: Berlin
Alter: -
Geschlecht: -
Verfasst Di 21.02.2012 11:34
Titel

Antworten mit Zitat Zum Seitenanfang

Argh... Au weia!

Ich danke dir!


Zuletzt bearbeitet von bigfraggle am Di 21.02.2012 11:35, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Di 21.02.2012 11:59
Titel

Antworten mit Zitat Zum Seitenanfang

Wie snuwie schrieb gibt es mehrere Möglichkeiten. Ich würde es vorziehen das div#main ebenfalls floaten zu lassen und das Zentrieren der Seite in einen komplett umschließenden Rahmen zu packen.

Das sähe dann so aus:
(die beiden "background-color:" sind nur zur besseren Ansicht dabei.)
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#rahmen {
   margin: 12px auto 0 ;
   width: 950px;
   background-color: #eee;
}
#main {
   margin: 0;
   padding: 12px;
   background: url(background.png) repeat;
   background-color: #afa;
   float: left;
}
#content {
   padding: 12px;
   width: 664px;
   float: left;
}
#sidebar {
   margin-left: 12px;
   float: left;
   width: 226px;
}
#footer {
   margin: 0;
   padding: 12px 0;
   clear: both;
}
</style>
</head>
<body>
<div id="rahmen">
  <div id="main">
    <div id="content">Inhalt</div>
    <div id="sidebar">Inhalt</div>
  </div>
  <div id="footer">Footer</div>
</div>
</body>
</html>
  View user's profile Private Nachricht senden
snuwie

Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 21.02.2012 12:50
Titel

Antworten mit Zitat Zum Seitenanfang

top hat geschrieben:
Wie snuwie schrieb gibt es mehrere Möglichkeiten. Ich würde es vorziehen das div#main ebenfalls floaten zu lassen und das Zentrieren der Seite in einen komplett umschließenden Rahmen zu packen.


Da gabe ich dir recht ... hatte gar nicht auf die Positionierung geschaut. Lächel
  View user's profile Private Nachricht senden
bigfraggle
Threadersteller

Dabei seit: 21.02.2012
Ort: Berlin
Alter: -
Geschlecht: -
Verfasst Di 21.02.2012 13:38
Titel

Antworten mit Zitat Zum Seitenanfang

Danke, schaue ich mir auch mal an. Lächel
  View user's profile Private Nachricht senden
 
Ähnliche Themen [css] Problem mit div Höhe
DIV Problem - 100% Höhe
Problem mit der Höhe
[CSS] Div 100% Höhe und BG-Bild - Problem
[css problem] content höhe
CSS-Problem mit der Höhe [gelöst]
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.