[CSS] Problem z float.
[CSS] Problem z float.
Mam pewien problem, mam na stronie 3 elementy blokowe - kontener, lewa i prawa (umieszczone wewnątrz kontenera). Jeśli w elemencie lewa umieszczę jakieś inne elementy blokowe - a z ustawionym display: block to lewa i prawa "wychodzą" poza kontener. Czy ktoś by mi mógł powiedzieć co jest źle?
[xml]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<meta name="generator" content="WebSite PRO 4.3" />
<title></title>
<style type="text/css" media="all">
div#kontener {
background-color: #eeeeee;
margin: auto;
width: 700px;
height: 30px;
}
div#lewa {
float: left;
width: 300px;
}
div#prawa {
float: left;
width: 400px;
}
a {
margin: 2px 0 2px 0;
}
a#link1 {
display: block;
background-color: #ff0000;
width: 300px;
height: 20px;
}
a#link2 {
display: block;
background-color: #ff0000;
width: 300px;
height: 20px;
}
a#link3 {
display: block;
background-color: #ff0000;
width: 300px;
height: 20px;
}
</style>
</head>
<body>
<div id="kontener">
<div id="lewa">
<a id="link1" href="#"></a>
<a id="link2" href="#"></a>
<a id="link3" href="#"></a>
</div>
<div id="prawa">
Jakiś tekst.
</div>
</div>
</body>
</html>
[/xml]
[xml]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<meta name="generator" content="WebSite PRO 4.3" />
<title></title>
<style type="text/css" media="all">
div#kontener {
background-color: #eeeeee;
margin: auto;
width: 700px;
height: 30px;
}
div#lewa {
float: left;
width: 300px;
}
div#prawa {
float: left;
width: 400px;
}
a {
margin: 2px 0 2px 0;
}
a#link1 {
display: block;
background-color: #ff0000;
width: 300px;
height: 20px;
}
a#link2 {
display: block;
background-color: #ff0000;
width: 300px;
height: 20px;
}
a#link3 {
display: block;
background-color: #ff0000;
width: 300px;
height: 20px;
}
</style>
</head>
<body>
<div id="kontener">
<div id="lewa">
<a id="link1" href="#"></a>
<a id="link2" href="#"></a>
<a id="link3" href="#"></a>
</div>
<div id="prawa">
Jakiś tekst.
</div>
</div>
</body>
</html>
[/xml]
-
Marcin Kalisz
- Nowy

- Posty: 62
- Rejestracja: sob lis 26, 2005 12:29 pm
Re: [CSS] Problem z float.
Nadaj kontenerowi float: left i zmień wysokość na auto.
Inne pomysły nie przychodzą mi do głowy, co oznacza, że czas się położyć
Inne pomysły nie przychodzą mi do głowy, co oznacza, że czas się położyć
-
Marcin Kalisz
- Nowy

- Posty: 62
- Rejestracja: sob lis 26, 2005 12:29 pm
Re: [CSS] Problem z float.
Już jako osoba wypoczęta dodam, że bardziej praktyczne jest wykorzystanie footera z właściwością clear: left. Footer oczywiście znajdował się będzie w kontenerze pod przyciskami... można wtedy uniknąć pływania dla kontenera i tym samym zniwelować problem pozycjonowania po środku strony
Wcześniejszy sposób nie jest niestety najszczęśliwszy
Wcześniejszy sposób nie jest niestety najszczęśliwszy
Re: [CSS] Problem z float.
To rozwiązanie działa częściowo - tzn. wysokość jest dobra, ale kontener ląduje po lewej stronie ekranu, a chciałbym żeby był na środku.
Próbowałem ustawiać wysokość kontenera na sztywno, działa dobrze póki nie dam za dużo tekstu bo wtedy problem się powtarza.
Próbowałem ustawiać wysokość kontenera na sztywno, działa dobrze póki nie dam za dużo tekstu bo wtedy problem się powtarza.
...
1. Wysokosc kontenera na "auto"
2. Za div'em "prawa" dodac:
Malo eleganckie rozwiazanie ale dziala.
2. Za div'em "prawa" dodac:
Kod: Zaznacz cały
<br style="clear:left;"/>Re: [CSS] Problem z float.
Działa wszystko
- dzięki wielkie.
-
Marcin Kalisz
- Nowy

- Posty: 62
- Rejestracja: sob lis 26, 2005 12:29 pm
Re: [CSS] Problem z float.
Na wszelki wypadek proponuję wrócić w górę strony... Footer i tak pewnie pojawi się w stronie więc nonsensem jest wykorzystywać taką "łatę" jak pusty znacznik. Lepiej użyć do tego stopki o czym napisałem post wcześniej1. Wysokosc kontenera na "auto"
2. Za div'em "prawa" dodac:
Kod:
<br style="clear:left;"/>
Malo eleganckie rozwiazanie ale dziala.
Re: [CSS] Problem z float.
Footer się pojawi ale pod kontenerem, inaczej niestety zrobić nie mogę, więc chyba rozwiązanie proponowane przez 123456 będzie najlepsze.
-
Marcin Kalisz
- Nowy

- Posty: 62
- Rejestracja: sob lis 26, 2005 12:29 pm
Re: [CSS] Problem z float.
Zrób więc ten footer pod kontenerem, choć podejrzewam, że nie ma takiego powodu, dla którego musiałbyś tak komplikować sobie projekt.

