Pytanie o float

Dla specjalistów Webmastering
#1

Staram się pojąc takową rzecz. Chce mieć dwa elementy które będą tworzyć dwa bloki np aktualności a drugi jakies generowane linki. Wszystko fajnie tylko w chwili gdy lewy ma float left a prawy right to tło zdefinionowane w “main” znika. Co robie źle ?

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="styl.css">
</head>
<body>
		<div class="main">
			<div id="lewy">
				<article>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</article>
			</div>	
			<div id="prawy">
				<aside>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</aside>
			</div>	
		</div>
</body>
</html>

*{
	margin: 0;
	padding: 0;
}

.main {
	background: blue;
	width: 1000px;
	margin: 50px auto;
}



#lewy {
	float: left;
}

#prawy {
	float: right;
}

article {
	background: green;
	height: 400px;
	width: 300px;
	margin: auto;
	text-align: justify;
	padding: 5px
	

}

aside {
	background: red;
	height: 400px;
	width: 300px;
	margin: auto;
	text-align: justify;
	padding: 5px
	
}
#2

Rozwiązaniem może być użycie overflow: auto

 

tutaj ten podobny problem na stackoverflow:

http://stackoverflow.com/questions/9045708/inner-left-floating-divs-do-not-expand-the-container-div-vertically

 

ustawiając overflow zmuszamy aby zewnętrzny kontener dostosował swoje wymiary do zwartości. W przeciwnym przypadku zwija się. Dlaczego tak działa niestety nie potrafię ci odpowiedzieć.

 

Możesz w zamian dodać 

<div  style=“clear:both” />

też powinno zadziałać

 

EDIT:

tutaj: http://ask.metafilter.com/134982/How-can-I-make-a-div-expand-vertically-to-fit-its-floated-content

masz w komentarzach wyjaśnienie “Css logic”

#3

Dzięki, też znalazłem rozwiązanie z overflow: auto. Sam problem dla mnie był niezrozumiały :]

#4

Generalnie robi się tak, że w przypadku takim:

 

<div class=“main”>

    <div class=“lewy”></div>

   <div class=“prawy”></div>

</div>

 

dla div - lwy i prawy daje się float, natomiast dla diva głównego jakim jest main daje się overflow: hidden i wszystko działa jak należy z opcją auto też jest ok. 

#5

float to tylko i tak sprawa przejściowa bo szystko na fluxach mam zamiar zrobić, a przy nich ten problem nie występuje

#6

Overflow jest rozwiązaniem, ale nie zawsze jest wygodne, jak dasz overflow: hidden, to np przy efektach box-shadow dla hover, cienie będą poucinane. Możesz również skorzystać z CSS clearfix. A tutajnajpopularniejsze inne sposoby clearfix.

#7

Ja staram się z box-shadow nie korzystać bo jakoś wolę coś a’la flat, ale zgadzam się że nie zawsze overflow jest wygodne.

#8

Brakuje po prostu elementu blokowego po obu divach, gdzie zastosowałeś float.

 

Masz teraz mniej więcej taki kod:

<div class="main">
    <div class="lewy">tekst w lewej kolumnie</div>
   <div class="prawy">tekst w prawej kolumnie</div>
</div>

Dodaj sobie obramowanie i zobaczysz w czym jest problem. Zrób tak:

<div class="main" style="border:solid 1px #f00;">
    <div class="lewy" style="border:solid 1px #080;">tekst w lewej kolumnie</div>
   <div class="prawy" style="border:solid 1px #08f;">tekst w prawej kolumnie</div>
</div>

div o klasie “main” stał się jakby liniowy. To przez to, że w środku niego są dwa elementy liniowe, czyli mają float.

 

a teraz rozwiązanie - wystarczy dodać dodatkowego diva na sam koniec:

<div class="main" style="border:solid 1px #f00;">
    <div class="lewy" style="border:solid 1px #080;">tekst w lewej kolumnie</div>
   <div class="prawy" style="border:solid 1px #08f;">tekst w prawej kolumnie</div>

  <div style="clear:both"></div>
</div>

I ostatecznie, wkleję to do twojego przykładu. Będzie tak:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="styl.css"> 
</head>
<body>
		<div class="main">
			<div id="lewy">
				<article>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</article>
			</div>	
			<div id="prawy">
				<aside>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</aside>
			</div>	
      
      <div style="clear:both"></div>
      
		</div>
</body>
</html>

O to chodziło?

 

 

 

Poza tym , gdy stosujesz “float”, powinieneś jeszcze dodać display:inline;

 

A więc zamiast:

#lewy {
	float: left;
}

powinno być:

#lewy {
	float: left;
        display:inline;
}

i analogicznie dla #prawy.

 

Robi się to dla starszych przeglądarek IE, zwłaszcza 6. W IE float nie zawsze wystarcza do wyświetlania elementu liniowo, trzeba dodać jeszcze “display:inline;”. Gdy będziesz testować np. w IETester to się o tym przekonasz.