Dva divy stejně vysoké

Mam dva divy, které mají nastavený min-height. Pokud je ale v divu velké množství textu, výška se zvětší a já potřebuju, aby se zvětšil i ten druhý div.

Díky za pomoc :)

<HTML>http://pixy.cz/pixylophone/vyber.html</HTML>

Díky, tabulkama to řešit nebudu. Holt se s tim nijak smířim a necham to takto http://marsgame.xf.cz

A dost mě tvoje články pomohly, např. problém min-height v různých prohlížečích a tak :)

SUPR!

jeee, když už jedeš přes CSS tak to udělej celý a navíc docílíš, že ti divy budou tejně dlouhý:

body {
text-align: center; /* vycentrování */
}

.hlavnidiv {
text-align: left; /* zruseni vycentrovaní */
width: 80%; /* tady si nastav šířku; můžeš i pevnou v px*/
border-color: #000000; /* rámeček bude černej */
border-style: solid; /* a plnej */
}

.logo {
height: 50px; /* sem dej výku loga */
}

.topmenu {
height: 1em; /* sem dej výšku toho tommenu */
}

.menu {
width: 30%; /* sem dej šířku toho menu */
float: left; /* bude to vlevo */
}

.text {
width: 70%; /* no, šířka toho textu */
float: right; /* napravo */
}

.paticka {
clear: both; /* tahle kravinka udělá, že ty dva předchozí divy budou stejně dlouhý; nebudou, ale bude to tak vypadat.. a to stačí :-) */
height: 1em; /* výška patky */
}

a struktura kódíku:

<body>
<div class="hlavnidiv">
<div class="logo"></div>
<div class="topmenu"></div>
<div class="menu"></div>
<div class="text"></div>
</div>
</body>

tak, psal sem to hlavy, takže nevim, jestli to fachá :-) kdyžtak to sem písni co nefunguje a se opravím :-)

Trošku jsem to tedy poupravil, ale ne tak jak jsi psal ty. Udělal jsem tomu tu patičku, ale stejně je levý menu pořád krátký ...

Trošku jsem to tedy poupravil. Udělal jsem tomu tu patičku, ale stejně je levý menu pořád krátký ...

min-height je dobrá věc, ovšem mírně nespolehlivá v IE. jak 6, tak 7. udělej něco takového:

<div id="all">

  <div id="header">
  </div>

  <div id="container">

    <div id="sidebar">
    </div>

    <div id="obsah">
    </div>

  <div id="footer">
  </div>

</div>

/* CSS */

body {
  text-align: center; /* centrovani pro IE */
}

#all {
  text-align: left;
  margin: 0 auto 0 auto; /* v poradi horni pravy spodni levy - auto centruje */
  width: 700px;
}

#header {
height: 100px;
}

#sidebar {
  float: left;
  width: 180px;
}

#obsah {
  padding: 0 0 0 190px; /* sirka sidebaru + odsazeni */
  /* hlavne sem nedavej min-height */
}

#footer {
  line-height: 30px; /* vertikalni vycentrovani, neuvadej pevnou vysku */
  clear: both; /* zaradi se az pod sidebar */
}

takováhle konstrukce ti umožní automatické natahování obou divů (levý - sidebar a pravý - obsah) podle aktuální výšky textu. jinou barvu na pozadí menu vyřeš texturou, kterou dáš na pozadí divu container, nebo přímo all. pevná výška stačí akorát u hlavičky (lze nahradit line-height), jinak nikde. pevná šířka pouze pro nejvyšší div a sidebar. div header lze nahradit za h1, div sidebar za ul nebo ol (pokud chceš mít celé menu v seznamu, není na škodu.) odsazení patičky řeším padding / margin-bottom pro sidebar a obsah. prázdné kostře nemá smysl nastavovat minimální výšku, stejně tam ten text nakonec bude... pak to řeš.

snad pomůže také http://mike.webzdarma.cz/css-lay-out-aneb-web-bez-tabulek-tutorial/

jej, zapomněl jsem uzavřít container :) div container uzavři před patičkou.

zruš tu černou pod tim menu a bude to stejně dlouhý

← Zpět na všechna témata

Nové příspěvky

Smazani stranek index.html ) HTML Tabulky Zalamování textu pomocí CSS Přesměrování Arduino - 400 Bad Request Nastavení českých písmen POMOC! po druhé! Pozicování (obrázek na střed). Jak vycentrovat obrazek, ktery je v prikazu absolute ? Použití tvůrce webu katalog async functions' is only available in es8 (use 'esversion: 8') Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 Problém s načítáním Div pro reklamu překrývá prvky webové stránky Nezobrazuje se mi lišta s reklamou ako nahrám na môj web favicon? JavaScript - nečitelný soubor *.js - jak prohlížet/editovat Problém s textem videostream index.html GB///refresh///JS Total Commander - server nenalezen Mobilní verze webu

Další témata

Webzdarma zvládnete to sami

Dva divy stejně vysoké

Nové příspěvky