tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
560
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 30.01.06 22:16 #1
    antichecker antichecker ist offline Mitglied
    Registriert seit
    Mar 2005
    Beiträge
    24
    Gutan Tach,

    in einem Container befinden sich drei Spaltern, sobald ich einen großen Text in eine Spalte (z.B. den Content) reinschreibe wird nur diese größer, nicht aber die anderen zwei.
    Zum besseren Verständnis könnt ihr euch den Screen anschauen.

    Dazu folgender Code:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

    body {
  margin:0px;
  padding:0px;
  text-align:center;
  background-color:#ff0000;
}
#container {
  width:760px;
  height:100%;
  margin:0px auto;
  padding:0px;
  text-align:left;
  background-color:#ffffff;
}
#left {
  float:left;
  width:170px;
  height:100%;
  
  padding:0px;
  text-align:left;
  background-image: url(bg_left.gif);
}
#content {
  float:left;
  width:470px;
  padding:0px;
  text-align:justify;
  background-color:#ffffff;
  background-image: url(bg_header.gif);
  background-repeat: no-repeat;
  background-position: top;
}
 
#right {
  float:right;
  width:120px;
  height:100%;
  padding:0px;
  background-image: url(bg_right.gif);
  
}
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Firefox: Content größer als Container-unbenannt.jpg  
     
  2. 30.01.06 22:28 #2
    Maik Tutorials.de Gastzugang
    Füge am Ende des DIV#container folgendes DIV ein:

    Code CSS:
    1
2
3
4
5
6
7
8

    div.clear
{
clear: left;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}
    HTML-Code:
    <div id="container">
     <div id="left">left</div>
     <div id="content">
          <p>content</p>
          <p>content</p>
          <p>content</p>
     </div>
     <div id="right">right</div>

     <div class="clear">&nbsp;</div>
</div>
     
  3. 31.01.06 15:56 #3
    antichecker antichecker ist offline Mitglied
    Registriert seit
    Mar 2005
    Beiträge
    24
    Stimmt "clear" hatte ich vergessen.
    Funktioniert aber trotzdem nicht. Hab ich was übersehen?


    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<style type="text/css">
 
body {
  margin:0px;
  padding:0px;
  text-align:center;
  background-color:#ff0000;
}
 
#container 
{
  width:760px;
  height:100%;
  margin:0px auto;
  padding:0px;
  text-align:left;
  background-color:#ffffff;
}
 
div.clear
{
  clear: left;
  height: 0;
  font-size: 0;
  margin: 0;
  padding: 0;
} 
 
#left 
{
  float:left;
  width:170px;
  height:100%;  
  padding:0px;
  text-align:left;
  background-image: url(bg_left.gif);
}
 
#content 
{
  float:left;
  width:470px;
  padding:0px;
  text-align:justify;
  background-color:#ffffff;
  background-image: url(bg_header.gif);
  background-repeat: no-repeat;
  background-position: top;
}
 
#right 
{
  float:right;
  width:120px;
  height:100%;
  padding:0px;
  background-image: url(bg_right.gif);  
}
 
</style>
 
</head>
 
<body>
 
<div id="container">
     <div id="left">left</div>
     <div id="content">
          <p>content</p>
          <p>content</p>
          <p>content</p>
          
          ...
     </div>
     <div id="right">right</div>
 
     <div class="clear">&nbsp;</div>
</div>
 
</body>
</html>
     
  4. 31.01.06 16:28 #4
    Maik Tutorials.de Gastzugang
    Ich empfehle dir mal den Artikel A List Apart: Articles: Faux Columns.

    In dieser vorgestellten Technik wird eine Hintergrundgrafik verwendet, die die Spalten farblich simuliert und senkrecht wiederholt wird. Somit sind die (drei) Spalten immer gleich hoch.
     
« CSS-Layout: Schwierigkeiten bei Umsetzung | Kein Umbruch bei ausgaben von Listen »

Ähnliche Themen

  1. DIV-Container größer, als angegeben. Margin-bottom wo keiner sein sollte
    Von mille im Forum CSS
    Antworten: 1
    Letzter Beitrag: 03.06.10, 23:12
  2. DIV Container kleiner und wieder größer machen
    Von chris4712 im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 06.06.07, 17:26
  3. Container wird einfach größer!
    Von thefaxx im Forum CSS
    Antworten: 5
    Letzter Beitrag: 16.05.07, 17:45
  4. IE Pixel größer als im Firefox
    Von Nepheus im Forum HTML & XHTML
    Antworten: 8
    Letzter Beitrag: 07.12.06, 06:06
  5. Content-Container mit opacity
    Von Soophie im Forum CSS
    Antworten: 4
    Letzter Beitrag: 02.10.06, 18:30