2 sloupcové DIVy

Místo pro dotazy a rady ohledně programovacích jazyků (C++, C#, PHP, ASP, Javascript, VBS..) a tvorby webových stránek

Moderátor: Mods_senior

Zamčeno
strambm
Level 1
Level 1
Příspěvky: 70
Registrován: 23 srp 2010 19:44

2 sloupcové DIVy

Příspěvek od strambm »

Dobrý den,
už dva dny zápasím s tím, že mám na webu 2 divy, kde jeden má výšku auto ( prostě aby se roztahoval podle toho kolik je v něm obsahu ) a vedle něj je úzký div určený pro menu. Ale nikde jsem nenašel jak docílit toho aby div určený pro menu byl stejně dlouhý jako div určený pro text.
Nevíte jak na to?

zjednodušeně to vypadá takto:

HTML
<div>
<div id="menu">
</div>
<div id="article">
</div>
</div>

CSS:
#menu{
background-color:DodgerBlue;
height:100%;
width:150px;
float:left;
margin:auto;
}
#article{
background-color: #fcff77;
min-height: 400px;
width:715px;
padding:65px;
float:right;
height:auto;
}
Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: 20 srp 2008 14:02
Bydliště: Brno
Kontaktovat uživatele:

Re: 2 sloupcové DIVy

Příspěvek od CZechBoY »

Zdravím,
několik sekund googlení (1 dotaz na google) mi přinesl celkem použitelný článek o možnostech: http://jecas.cz/stejne-vysoke-sloupce
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
IDVert3X

Re: 2 sloupcové DIVy

Příspěvek od IDVert3X »

Použi Flexbox.
strambm
Level 1
Level 1
Příspěvky: 70
Registrován: 23 srp 2010 19:44

Re: 2 sloupcové DIVy

Příspěvek od strambm »

Zkouším to řešit přes ten flex, ale nevím jak nastavit 100% height jediná změna je to, že mám menu místo nahoře uprostřed stránky.
#menu {
background-color:DodgerBlue;
height:100%;
width:150px;
float:left;
margin:auto;
flex:150;
}
#article {
background-color: #fcff77;
min-height: 400px;
width:715px;
padding:65px;
float:right;
height:auto;
flex: 715;
margin-left: 5px;
}
Zamčeno

Zpět na „Programování a tvorba webu“