[mephisto73]

Jag försöker lösa följande problem. I min "container div" har jag två "column div" som med float. I FF och Opera så bryter det bakgrundsbilden i min "container div", medan det "fungerar" i IE7, se bild.



Så här ser CSS-en ut:

.box_body_480 {
	background:url('pics/box_body_480.png') repeat-y;
 border: none;
	clear: both;
	margin 0;
	width: 480px;
}

.box_column {
    display:inline;
    float:left;
    width: 46%;
	margin: 0px;
	padding: 0 0 0 10px;
}

Nån som kan upplysa mig om vad jag gör fel?

[jgabor]

Kan man få se ett "live" exempel? Hur ser HTML-koden ut?

Men det ser ut som om

(eller vad det nu än som är runt texten) har en vit bakgrund... Pröva att sätta background till transparent.

Och av ren nyfikenhet; Varför har du repeat-y på boxen? Den ska väl inte repeteras?

[mephisto73]

Markupen ser ut så här:

         <div class="box_top_blue_480"><h2 class='box_header'>Title</h2></div>
           <div class="box_body_480"> 
           
             <div class="box_column">
  	At vero...
  </div>
 
  <div class="box_column">
  	At vero...
  </div> 

           </div>
           <div class="box_footer_480"></div>

Begriper inte vad det är som strular.

[mephisto73]

Originally posted by jgabor@Sep 19 2008, 14:04

Och av ren nyfikenhet; Varför har du repeat-y på boxen? Den ska väl inte repeteras?

Jo den är en 12px hög png som repeteras så att boxen blir flexibel på höjden. Är iden i alla fall.

[tartareandesire]

Testat att sätta en tom clear-div efter de floatade?

[mephisto73]

Jag hittade svaret!


Man måste/kan göra en enclose på container diven med overflow:hidden.

Så denna fungerar

.box_body_480 {
	background:url('bilder/box_body_480.png') repeat-y;
 border:none;
 [COLOR=red]overflow: hidden;[/COLOR]
	clear: none;
	margin: 0;
	width: 480px;
}

Kanske kan vara till hjälp för någon annan nybörjare som mig.

[ledstrom]

Jag tror om du sätter height:auto också hjälper...

[mforsberg]

Problemet, som du säkert förstått är att du float:ar elementen inom div:en. Du behöver således clear:a floaten. Jag brukar använda mig av "Overflow: auto;" lösningen, du kan således tabort "clear: none;" och ändra Overflow till auto istället för hidden.

Mer information om "Overflow: auto;" finns att läsa här:
http://annevankesteren.nl/2005/03/clearing-floats