3 oszlopos design - min-width a középső oszlopra

3 oszlopos design - min-width a középső oszlopra
2012-04-18T15:51:27+02:00
2012-04-18T16:23:13+02:00
2022-11-25T10:25:42+01:00
petya8617
Üdv!

Egy Html-Css problémába ütköztem. Szeretnék egy alap designt létrehozni, melynek az egyszerűsített kódját mellékeltem is.

Röviden leírva:

1. doboz: Menu bal oldalt, fix 200px, mindig látszik.

2. doboz: Középső tartalmi rész, mindig látszik dinamikus szélesség, de min-width: 780px

3. doboz: Jobb oldali helyi menu, fix 200px, de ha az előz kettő doboz szélességei (200+780) mellett ez nem fér el a jobb oldalon, akkor szeretném, ha ez a 3. doboz kicsúszna a képernyőből. Jelenleg sajnos ez "rácsúszik" a középső dobozra. Tippem, hogy a float:right kavar be valamiért.

A kód:

<!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></title> <style type="text/css"> body, * { margin: 0px; } body { background-color: #EEEEEE; } .Header { height: 80px; background-color: #222222; color: #FFFFFF; } .MainMenu { background-color: #FF8822; width: 180px; float: left; padding: 10px; } .ContextMenu { padding: 10px; width: 180px; float: right; background-color: #0099FF; } .Content { background-color: #33CC55; margin: 0px 210px; padding: 10px; min-width: 780px; } </style> </head> <body> <div class="Header"> Fejléc </div> <div class="MainMenu"> <ul> <li>Főoldal</li> <li>Felhasználók</li> </ul> </div> <div class="ContextMenu"> Helyi menü </div> <div class="Content"> Tartalom - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at condimentum neque. Phasellus malesuada euismod lacinia. Vivamus id odio enim, et adipiscing sem. Pellentesque imperdiet, risus id auctor ornare, enim lectus commodo urna, ac pellentesque felis augue elementum metus. Suspendisse potenti. Ut neque lorem, vehicula non condimentum vel, porttitor in ante. Curabitur dictum magna at justo euismod tempor. Nulla mollis tincidunt sodales. In suscipit mollis dui, ac varius lacus adipiscing nec. Suspendisse potenti. Suspendisse nisl nibh, fringilla quis egestas at, vehicula in lacus. Proin vel consectetur urna. Maecenas egestas magna quis quam consectetur non adipiscing nulla laoreet. Integer vel mauris ante, nec semper turpis. Suspendisse euismod ante quis leo suscipit vel varius urna commodo. Duis in augue eget turpis tempor posuere vel vitae dolor. Donec fermentum, purus et vulputate rhoncus, augue libero gravida urna, eget ornare enim ipsum eu mi. Donec ultricies mauris eget lacus hendrerit vel venenatis massa aliquam. </div> </body> </html>
Mutasd a teljes hozzászólást!
Nézd meg a következő TESZT-oldalt különböző böngészőablak méreteknél!
Ha a min-width beállítás IE-7,8 esetén is kell, arra is van megoldás...
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd