Autor Zpráva
lukigod
Profil
#1 · Zasláno: 29. 10. 2009, 14:00:36
Odpovědět Citovat
Zdravím, prosím jestli by mě někdo nenakopnul. Řeším zdánlivě banální problém, ale nenašel jsem nikde řešení. Asi blbě hledám. Mám jednoduchý 3sloupcový layout, přičemž ho chci mít dynamický (prostřední oddíl). Postranní lišty jsou s pevnou šířkou. Do této chvíle není problém.
Ale jakmile chci uvnitř prostředního sloupce cokoliv floatovat, tak se mi zbytek obsahu pod floatovaným prvkem posadí nakonec výšky pravého nebo levého sloupce. Prosím o jakoukoli radu, různé třísloupcové layouty na webu vidím a zkoušel jsem je upravovat, ale když do nich nacpu floaty, tak se to rozhodí. Díky kdyžtak to hodím na web, ale v podstatě není proč. viz kód: 
1<html>
2  <head>
3    <style>
4    div {border: 1px red solid}
5    #hlavni{margin: 0 auto}
6    #levy {float:left; width: 100px}
7    #pravy {float:right; width:100px;}
8    #prostredni {margin: 0 110px;}
9    .cleaner {clear:both}
10    </style>
11  </head>
12  <body>
13    
14    <div id="hlavni">
15      <div id="levy">
16        <p> Vlevo </p>
17        <p> Text cokoliv </p>
18      </div>
19      
20      <div id="pravy">
21        <p> Vpravo </p>
22        <p> Text cokoliv </p>
23          <p>Lorem ipsum dolor sit amet consectetuer Ut tellus pede quis ligula. Nibh tellus odio mollis consequat porta pellentesqu</p>
24      </div>
25 
26      <div id="prostredni">
27        <p> Obsah </p>
28          <div style="float:left; width:200px">floatuje vlevo</div>
29          <div style="float:right; width:200px">floatuje vpravo</div>
30          <div class="cleaner"><hr></div>
31        <p> Text v obsahu </p>
32        <p> cokoliv </p>
33      </div>
34      <div class="cleaner"></div>
35    </div>
36  </body>
37</html>
<html>
  <head>
    <style>
    div {border: 1px red solid}
    #hlavni{margin: 0 auto}
    #levy {float:left; width: 100px}
    #pravy {float:right; width:100px;}
    #prostredni {margin: 0 110px;}
    .cleaner {clear:both}
    </style>
  </head>
  <body>
    
    <div id="hlavni">
      <div id="levy">
        <p> Vlevo </p>
        <p> Text cokoliv </p>
      </div>
      
      <div id="pravy">
        <p> Vpravo </p>
        <p> Text cokoliv </p>
          <p>Lorem ipsum dolor sit amet consectetuer Ut tellus pede quis ligula. Nibh tellus odio mollis consequat porta pellentesqu</p>
      </div>
 
      <div id="prostredni">
        <p> Obsah </p>
          <div style="float:left; width:200px">floatuje vlevo</div>
          <div style="float:right; width:200px">floatuje vpravo</div>
          <div class="cleaner"><hr></div>
        <p> Text v obsahu </p>
        <p> cokoliv </p>
      </div>
      <div class="cleaner"></div>
    </div>
  </body>
</html>

a takhle to pak vypadá :(
Plaváček
Profil
#2 · Zasláno: 29. 10. 2009, 16:05:03
Odpovědět Citovat
lukigod:

Nejrychlejší řešení je do bloku #prostredni vrazit další DIV se šířkou 100% a float:left, třeba. Nezapomenout před patičkou na clear:both.
lukigod
Profil
#3 · Zasláno: 29. 10. 2009, 16:24:24
Odpovědět Citovat
Plaváček:
perfektní.. a je zadivováno :o)) díky moc. jak jsem psal: úplně banální...
Časová prodleva: 15 let
Toto vlákno je staré, již dlouho do něj nikdo nepřispíval.

Informace a odkazy zde uváděné už nemusejí být aktuální. Nechcete-li řešit zde uvedenou konkrétní otázku, založte si vlastní vlákno, nepište do tohoto. Vložíte-li sem nyní příspěvek, upoutáte pozornost mnoha lidí a někteří z nich si jen kvůli vám přečtou i všechny předcházející příspěvky. Předpokládáte-li, že váš text skutečně bude hodnotný, stiskněte následující tlačítko:


Běda vám, jestli to bude blábol.

0