• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

gefloatete Elemente

J

jonathan09

Neues Mitglied
Hallo zusammen! Ich habe eine Frage an alle Profis hier: Es wird ein zweispaltiges Layout benutzt. Rechter Container ist mit float: right; angeordnet. Nun werden im linken Container weitere Elemente mit float nebeneinander gesetzt. Jeweils zwei DIV-Elemente mit float: left, float: right. Nun muss ich aber nach den nebeneinaderliegenden Elementen das float aufheben - allerdings kann ja lediglich float: left aufgehoben werden, da alle elemente sonst unter dem ganz rechten Container liegen. Wie kann ich dieses Problem beheben? Ih hoffe, Ihr versteht, was ich meine? VG
 
Werbung:
Hier mal ein MB. Wird nun der Text in einem Container .flrechts größer, überragt er natürlich die Linie. Ich hoffe, dadurch wird es anschaulicher:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
	<title>...</title>

  <style type="text/css">
  <!--	

body, html {
	margin: 0;
	padding: 0; }

body {
	padding-bottom: 20px; }

.fllinks {
	float: left;
	width: 45%;
  border: 1px dashed #999; }

.flrechts {
	float: right;
	width: 45%;
  border: 1px dashed #000; }
	
hr.zwischen {
	clear: left;
	line-height: 1px;
	margin: 10px 0;
	border-color: transparent;
	border-top: 1px solid #6f3525; 
	height: 1px; }
  
#main {
	margin: 20px auto 0 auto;
	padding: 10px 0 0 0;
	width: 80%; }
  
#navi {
	float: right;
	width: 225px;
	margin: 0 0 30px 0;
	padding: 0 15px 0 0;
  border: 1px dashed red;
	background: transparent; }
  
#content { 
	margin: 0 300px 20px 15px;
	padding:  0; }
  -->
  </style>

</head>

<body>

<div id="main">

  <div id="navi">
    NAVI
  </div>

  <div id="content">
    <div class="fllinks">
      <p>1.1</p>
    </div>
      
    <div class="flrechts">
      <p>1.2</p>
    </div>
      
    <hr class="zwischen" />
      
    <div class="fllinks">
      <p>2.1</p>
    </div>
      
    <div class="flrechts">
      <p>2.2</p>
    </div>
  </div>

</div>

</body>
</html>
 
Werbung:
Hey,

danke für den sehr interessanten Link - allerdings ist mir das Prozedere noch nicht ganz klar. Ich habe nachfolgend ein sehr einfaches MB gebastelt, um die Grundstruktur meiner Website darzustellen. Die def Klasse clearfix habe ich wie folgt - ohne Erfolg - verwendet. Ich hoffe, Ihr könnt mir weiter helfen. Andernfalls muss ich den Mittelteil doch mit Tabellen lösen...

Möchte keine Grundsatzdiskussion anzetteln, jedoch darauf hinweisen, dass ich für derartige Ansprüche an das Layout - insbesondere, wenn die Darstellung einem Tabelleninhalt ähnlich ist - Tabllen verwenden würde. Wenn ich mir manche CSS-Hacks anschaue, frage ich mich auch, ob dieser Aufwand und alle damit verbundenen Nachteile den Nutzen rechtfertigen. Wie viele Browser interpretieren CSS 2 noch gar nicht?!

Hier nun mein Code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
	<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  <style type="text/css">
  <!--	
  #main {
    border: 1px solid red; }
    
  #nav {
    float: right;
    width: 200px;
    border: 1px solid green; }
    
  #content { 
    margin-right: 220px;
    border: 1px dashed red; }
    
    .fllinks {
      float: left;
      width: 45%;
      border: 1px solid blue; }
      
    .flrechts {
      float: right;
      width: 45%;
      border: 1px solid blue; }
      
    .clearfix:after {
      content: "."; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden; }
  -->
  </style>

</head>

<body>

<div id="main">

  <div id="nav">
    <ul> 
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
      <li>Punkt</li>
    </ul>
  </div>  
  
  <div id="content">
  
    <div class="clearfix">
      <div class="fllinks">
        <p>Text 1</p>
      </div>
      <div class="flrechts">
        <p>Text 1.2</p>
        <p>Text 1.2</p>
        <p>Text 1.2</p>
        <p>Text 1.2</p>
      </div>
    </div>
    
    <div class="clearfix">
      <div class="fllinks">
        <p>Text 2</p>
      </div>
      <div class="flrechts">
        <p>Text 2.2</p>
      </div>
    </div>
    
    <div class="clearfix">
      <div class="fllinks">
        <p>Text 3</p>
      </div>
      <div class="flrechts">
        <p>Text 3.2</p>
      </div>
    </div>
    
  </div>
  
</div>

</body>
</html>

Danke an alle!
 
Werbung:
Ah, ok!

Wenn ich #content noch ein float:left; hinzufüge, wird die Breite der weiteren gefloateten Elemente allerdings nicht mehr berücksichtigt...
 
Setz #content eine Breite. Wenn du das meinst, was ich meine: Ein gefloatetes Element hat standardmäßig keine Breite und 45 % von undefiniert bleibt undefiniert.
 
Werbung:
Das klappt dann deutlich besser - jedoch müsste ich #content eine feste Breite zuweisen (z.B. in Pixeln). Mit Prozent-Angaben klappt es nicht. Ich habe jedoch kein statisches Layout beabsichtigt... Gibt es noch eine weitere Lösung?
 
Wenn Du dem linken Menü und dem Content-Bereich jeweils Prozentwerte gibst die in der Summe 100% ergeben, sollte es klappen. Du könntest dann auch noch max-width und min-width mit festen Pixel-Werten beim linken Menü definieren um genaue Werte doch noch festzulegen.
 
Werbung:
IE vor Version 7 reicht die Angabe von width aus. Für die ist das gleichbedeutend mit "max-width" und "min-width".
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben