Cześć, mam problem z uzyskaniem efektu w konstrukcji strony. Chciałbym zrobić to w ten sposób jak na obrazku:
Element pomarańczowy ma być mieć 300px w głównym obszarze roboczym, a reszta ma być równo z lewym oknem przeglądarki. To samo z blokiem niebieskim, tyle, że ma być wyrównany z prawej.
Nie mam pomysłu, a potrzebuję takiego rozwiązania. Fajnie by było gdyby ktoś podpowiedział :)
a obszar roboczy jest zmienny/stały?
Obszar roboczy będzie stały i będzie wynosi 1000px.
Może kombinować w ten sposób, ale ze względu na position: fixed; bloki będą w tych miejscach przez cały czas, możesz do tego dodać jakiś skrypt js żeby je później przesunąć/ukryć.
http://jsfiddle.net/1jyh8835/4/
Z position: absolute; będziesz mieć te bloki w środku bloku głównego i nie będą one doklejone do ekranu przez cały czas, a zależne od bloku w którym się znajdują, nie będziesz jednak mógł ich sensownie rozciągnąć do szerokości okna
http://jsfiddle.net/1jyh8835/5/
Dużo zależy też od tego co będziesz trzymał w tych blokach, bo można im dąć szerokość 100% i schować wszystko co wystaje poza okno przeglądarki przez overflow: hidden;
#main {
background-color: red;
min-height: 200px;
position: relative;
margin: 0 auto;
width: 1000px;
}
#orange {
background-color: orange;
min-height: 40px;
position: fixed;
left: 0;
right: calc(50% + 200px); /* 700px */
}
#blue {
background-color: blue;
min-height: 40px;
position: fixed;
right: 0;
left: calc(50% + 400px); /* 900px */
}
<div id="main">
glowny
<div id="orange">lewy</div>
<div id="blue">prawy</div>
</div>
To rozwiązanie tak jak wspomniałeś, działa tylko z position:fixed. Widziałem kiedyś podobne rozwiązanie, tylko opierało się na display:block. Za chiny nie mogę sobie przypomnieć jaka była składnia :/
możesz ustawić dla tych bloków odpowiednio float: left; i float: right; ale nie będziesz w stanie zawrzeć dokładnie 100 i 300 pikseli w bloku głównym, wartości te będą się też zmieniać w zależności od rozdzielczości okna.
robisz tak: