Probleme mit FLOAT innerhalb eines divs

thunderstick · 08. Jan. 2006

Also.. zuerst mal der Link zur Seite um die es geht:
http://www.maexx-web.de/test/csslayouttest.html
http://www.maexx-web.de/test/csslayout.css

Wenn ihr die Seite im Firefox öffnet, werdet ihr sehen, dass das #boxcontent div nicht darum schert, das das #content div größer ist als es selbst, dh sich nicht mit nach unten verlängert. Dies gilt auch für die beiden anderen divs die drumherum liegen.

da diese mein bg image festlegen ist das sehr ärgerlich...
ich glaube, das es an dem float-tag liegt, habe aber nicht rausgefunden, das problem lösen kann.. bitte schaut mal ob ihr eine lösung für das problem wisst.

nwibs · 08. Jan. 2006

Hm, probiers mal mit "height:100%" *ungetestet allerdings!*

mfg nwibs

dkdenz · 08. Jan. 2006

Du könntest #content erstmal eine height geben (z.B.280px) und dann noch ein overflow:auto...

thunderstick · 08. Jan. 2006

das mit height:100% funzt ned...
die idee mit overflow hatte ich auch schon, würde es aber hübscher finden, wenn keine scrollbalken angezeigt würden.

damit das ganze einfacher wird, poste ich hier mal den quelltext von css und html

HTML

HTML:

<!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>
<title>CSS LAYOUT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="csslayout.css" rel="stylesheet" type="text/css" />
</head>
<body> 
<div id="box1">box1
<div id="boxtop">boxtop</div>
<div id="boxback">

<div id="leiste1">leiste1</div>

<div id="boxheader">
 <div id="headerleft">headerleft</div>
 <div id="headermitte">headermitte
   
   <div id="bildheader1"><a href="#"><img src="space.gif" width="138" height="36" border="0" /></a></div>
   <div id="bildheader2"><a href="#"><img src="space.gif" width="138" height="36" border="0" /></a></div>
   <div id="bildheader3"><a href="#"><img src="space.gif" width="138" height="31" border="0" /></a></div>
   <div id="bildheader4"><a href="#"><img src="space.gif" width="138" height="50" border="0" /></a></div> 
  
  </div>
 <div id="headerrechts">headerrechts</div>
</div>
<div id="leiste2">leiste2</div>
<div id="boxcontent">
  
   <span id="navi">navi</span>
   <div id="content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content cntent content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
    </div>
   </div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

CSS

HTML:

body { 
background-color:#6d623d;
color: #fef8bb;
font-family: verdana, arial;
font-size: 10pt;
text-decoration:none;
}

#box1 {
min-width: 695px;
min-height:300px;
margin: 0px auto;
width: 695px;
}

#boxback {
background: url(images/layout/mw_30.jpg);
width: 695px;
height:auto;
min-height:300px;
}
 
#boxtop {
width:695px;
height:31px;
background:url(images/layout/mw_03.png) no-repeat ;
background-repeat:;
}

#leiste1 {
width:626px;
height:18px;
background: url(images/layout/mw_06.jpg) no-repeat;
position:relative;
left:34px;
}

#boxheader {
width: 626px;
position:relative;
left:34px;
top:6px;
height:171px;
background-color:#fef8bb;
color:#000;
}

#headerleft {
width:276px;
height:171px;
background:url(images/layout/mw_09.jpg) no-repeat;
float:left;
}

#headermitte {
width:138px;
height:171;
position:absolute;
left:282px;
}

#headerrechts {
background:url(layout/mw_13.jpg) no-repeat;
width:198px;
height:171px;
float:right;
}

#leiste2 {
background:url(images/layout/mw_23.jpg) no-repeat top;
width:626px;
height:18px;
margin-top:11px;
position:relative;
left:34px;
}

#bildheader1 {
position:absolute;
top:0px;
left:0px;
background: url(images/layout/mwo_11.jpg) no-repeat #fef8bb;
width:138px;
height:36px;
}

#bildheader1 a:hover {
background:url(images/layout/mw_11.jpg)  no-repeat #fef8bb;
width:138px;
height:36px;
position:absolute;
top:0px;
left:0px;

}

#bildheader2 {
position:absolute;
left:0px;
top: 41px;
background: url(images/layout/mwo_15.jpg) no-repeat #fef8bb;
width:138px;
height:36px;
}

#bildheader2  a:hover {
position:absolute;
left:0px;
top: 0px;
background: url(images/layout/mw_15.jpg) no-repeat #fef8bb;
width:138px;
height:36px;
}


#bildheader3 {
position:absolute;
left:0px;
top:83px;
background: url(images/layout/mwo_17.jpg) no-repeat #fef8bb;
width:138px;
height:31px;
}

#bildheader3 a:hover {
position:absolute;
left:0px;
top:0px;
background: url(images/layout/mw_17.jpg) no-repeat #fef8bb;
width:138px;
height:31px;
}


#bildheader4 {
position: absolute;
left:0px;
top:121px;
background: url(images/layout/mwo_19.jpg) no-repeat #fef8bb;
width:138px;
height:50px;
}

#bildheader4  a:hover {
position: absolute;
left:0px;
top:0px;
background: url(images/layout/mw_19.jpg) no-repeat #fef8bb;
width:138px;
height:50px;
}


#boxcontent {
width: 626px;
position:relative;
left:34px;
top:6px;
min-height:300px;
background-color:#fef8bb;
color:#000;
}

#navi {
width: 142px;
padding:5px;
height:300px;
background:url(images/layout/mw_25.jpg) no-repeat top #afa575;
float:left;
}

#content {
	background:url(images/layout/mw_27.jpg) top no-repeat #6B603D;
	color:#fef8bb;
	padding:10px;
	width:447px;
	float:right;
	margin-bottom:7px;
	
}

#footer {
background-image: url(images/layout/mw_31.gif);
background-repeat: no-repeat;
width:695px;
height:54px;
z-index:1;
}



h1 {
border-left: 20px solid #fef8bb;
border-right: 180px solid #fef8bb;
background-color:#afa575;
display:block;
letter-spacing: 3px;
font-size:16px;
padding-left: 15px;
padding-top:2px;
padding-bottom:2px;
margin-top: 5px;
}

dkdenz · 08. Jan. 2006

Also ich habe das mit EditCSS aus der DeveloperToolbar des FireFox getestet und bei mit ging's dann.

thunderstick · 08. Jan. 2006

prinzipiell eine gute idee... aber sinn und zweck des layouts ist halt, das sich der rest mit nach unten erweitert, je nachdem, wie hoch der content ist.

bine · 08. Jan. 2006

ich löse das immer mit einer Hintergrundgrafik. Quasi ein Hintergrundcontainer, welcher eine sich vertikal wiederholende Hintergrundgrafik "einmal quer rüber" enthält.

thunderstick · 08. Jan. 2006

Also den habe ich, falls ich verstanden habe, was du meinst... also bei mir ist das der #boxback ... vllt habe ich den auch nur falsch formatiert... ich weiß ned weiter..

bine · 08. Jan. 2006

ok, aber clear:both find ich nirgends in deinem Code.

thunderstick · 08. Jan. 2006

Also... ich bin leider noch kein CSS gott... und das ist auch mein erstes CSS Layout, das clear:both würdest du in das #boxback legen?? das boxback war von mir so gedacht, das es mit dem hintergrundbild hinter dem ganzen inhalt liegt...
ich werds mal probieren..

*edit*
1000 DANK !!!!
Problem gelöst!
Hätte mir ja mal jemand sagen können, das man nach dem float wieder ein clear setzen muss!!

bine · 08. Jan. 2006

Also... ich bin leider noch kein CSS gott...

keine Panik, ich auch nicht

AbBer dein boxback div endet schon direkt hinter headerrechts. das dient quasi nur für den Hintergrund bis einschließlich Headerbereich.

moment ich schau mal was hinter navi und content für ein Hintergrund liegt.

[edit: wart mal, ich schau nun doch mal gründlich bevor ich Verwirrung stifte oder was falsches sage.

bine · 08. Jan. 2006

hinter das schließende /div vom boxheader würd ich das erste mal ein

Code:

<br class="clear" />

schreiben, welches in der CSS so angelegt wird:

Code:

.clear	{
font-size:1px;
line-height:0px;
clear:both;
}

Das zweite mal hinter dem schließenden div von boxcontent

Code:

<br class="clear" />

Also wenn du einen Layoutbereich wie z.B. im Header in drei durch float nebeneinander positionierte Bereiche einteilst, dann muß man anschließend entfloaten, wenn wieder eine über die ganze Breite gehende Leiste folgt.

In deinem Layout quasi nach diesem Schema:
1
1 2 3
clear
1
1 2
clear
1

thunderstick · 08. Jan. 2006

habs genauso gemacht und es funzt wunderbar...
danke nochmal!

Bomb-Jack · 18. Juni 2010

hier gibt es ne gute Workaround Erklärung zu oben genannten Float Problem.

jassesnee.de/easyclear

Gruß, Bomb-Jack

Probleme mit FLOAT innerhalb eines divs

thunderstick

New member

nwibs

New member

dkdenz

New member

thunderstick

New member

dkdenz

New member

thunderstick

New member

bine

Lounge-Member

thunderstick

New member

bine

Lounge-Member

thunderstick

New member

bine

Lounge-Member

bine

Lounge-Member

thunderstick

New member

Bomb-Jack

New member