| Autor | Zpráva | ||
|---|---|---|---|
| Ondra_xxx Profil * |
#1 · Zasláno: 23. 7. 2011, 00:11:15
Zdarvim.
Narazil jsem na jeden problem, s kterym si uz nejaky cas nevim rady. Potrebuju udelat 2 sloupcovy layout, kde levy sloupec ma fixni sirku 200px a pravy sloupec je fluidni. Tohle jsem vyresil pomoci float techniky. <!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>Fluid</title>
<style type="text/css" media="screen">
html, body { background: #ccc; }
.wrap { margin: 20px; padding: 20px; background: #fff; }
.main { margin-left: 220px; width: auto }
.sidebar { width: 200px; float: left; }
.main,
.sidebar { background: #eee; min-height: 100px; }
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar">This is the static sidebar</div>
<div class="main">This is the main, and fluid div</div>
</div>
</body>
</html>
Mam problem s tim, ze potrebuji pouzivat clear:both v pravem fluidnim sloupci. A zde je kamen urazu, protoze v momente kdy tohle udelam, tak cely obsah skoci az pod konec leveho sloupce (obsah praveho sloupce se vypise az pod obsahem sloupce leveho). To je samozrejme v poradku a dava to smysl a jediny me znamy zbusob jak tomu zabranit by bylo, abych pravy sloupec nechal taky plavat float:left nebo float:right. Pote by celar:both platilo jen v kontextu praveho sloupce. Jenomze to udelat nemuzu, protoze v ten moment by mi prestala fungovat 100% sirka praveho sloupce. Nevite nekdo o nejakem elegantnim reseni (se zachovanim floatovani)? Existuje takove vubec? Dekuji vsem za rady a pripominky. |
||
| Plaváček Profil |
#2 · Zasláno: 23. 7. 2011, 06:13:40
Ondra_xxx:
Spíchnul jsem to narychlo, ale mělo by to šlapat všude: http://klient.plavacek.net/fluid.html P.S. Tím elegantním řešením je do pravého fluidního sloupce vložit další blok, který necháš také plavat. |
||
| Ondra_xxx Profil * |
#3 · Zasláno: 23. 7. 2011, 10:02:54
Fantasticke. Nevim proc me tohle nenapadlo, asi uz starnu.
Dekuji! ;) |
||
|
Časová prodleva: 14 let
|
|||
0