✔ div-Höhe soll sich Inhalt anpassen

Status
Nicht offen für weitere Antworten.
G

Geflügel

Erfahrenes Mitglied
Code: 
<div id="haupt">
<div>A<br /><br /></div>
<div>B<br /><br /></div>
</div>
mit
Code: 
#haupt
{
  baclground-color: #000;
}
#haupt div
{
 height: 80px;
 display: inline;
}

die haupt-div passt sich in der höhe den inneren divs an. was kann ich tun?
 
Probier mal Folgendes:

Code: 
div#haupt {
  background-color: #000000;
}

div#haupt div.box {
  float: left;
  height: 80px;
}

div.clear {
  clear: left;
}
HTML: 
<div id="haupt">
     <div class="box">A<br /><br /></div>
     <div class="box">B<br /><br /></div>

     <div class="clear">&nbsp;</div>
</div>
 
Code: 
<style type="text/css">
	div#haupt {
	  background-color: yellow;
	}

	div#haupt div.box {
	  float: left;
	  background-color: black;
	  color: white;
	}

	div.clear {
	  clear: left;
	}
</style>

<div id="haupt">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="clear">&nbsp;</div>
</div>

Sieht so aus: (erster Anhang)
Aber soll so aussehen: (zweiter Anhang)

Edit, woran liegt das?
 

Anhänge

  • 24502attachment.png
    24502attachment.png
    5,5 KB · Aufrufe: 700
  • 24503attachment.png
    24503attachment.png
    5,5 KB · Aufrufe: 673
Verwende mal diese erweiterte CSS-Regel für das DIV .clear:

Code: 
div.clear {
    clear: left;
    margin: 0;
    padding: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
}
 
Okay, dann entfernen wir mal das erzwungene Leerzeichen &nbsp; im DIV .clear ;)
 
Seltsam, bei mir funktioniert's einwandfrei (Firefox 1.5.0.4, Win2k):
 

Anhänge

  • 24504attachment.png
    24504attachment.png
    16,9 KB · Aufrufe: 667
merkwürdig..
hast du den selben code?

Code: 
<style type="text/css">
	div#haupt {
	  background-color: yellow;
	}

	div#haupt div.box {
	  float: left;
	  background-color: black;
	  color: white;
	}

	div.clear {
    	clear: left;
    	margin: 0;
    	padding: 0;
    	height: 0;
    	line-height: 0;
    	font-size: 0;
	}
</style>

<div id="haupt">
	<div class="box">A</div>
	<div class="box">B</div>
	<div class="clear"></div>
</div>
 
Zur Gegenprobe der vollständige Quelltext meiner Testseite:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
        div#haupt {
          background-color: yellow;
        }

        div#haupt div.box {
          float: left;
          background-color: black;
          color: white;
        }

        div.clear {
          clear: left;
          margin: 0;
          padding: 0;
          height: 0;
          line-height: 0;
          font-size: 0;
        }
</style>

</head>
<body>

<div id="haupt">
     <div class="box">A</div>
     <div class="box">B</div>

     <div class="clear"></div>
</div>

</body>
</html>
Vielleicht hilft die height:1%-Angabe für das DIV #haupt oder .box weiter?

Code: 
div#haupt {
    background-color: yellow;
    height: 1%;
}

/* oder */

div#haupt div.box {
    float: left;
    background-color: black;
    color: white;
    height: 1%;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück