Простейшая верстка(ширины эл-тов)

@Taratoshka · Регистрация: 16.11.2015

Author24 — интернет-сервис помощи студентам

Добрый день, я начинающий программист. Занимаюсь версткой.
Задача:
Расположить блоки в нужном порядке
есть 4 блока. первый блок должен располагаться слева, он должен занимать 100% высоты и 10 % ширина от экрана.
2-ой блок должен располагаться сверху в центре(ширина 80%) и высота его должна быть 15% от высоты экрана.
3-ий блок должен располагаться справа: ширина 10%, высота 100% от экрана
и 4-ый блок должен располагаться в центре под вторым блоком и между 1-ым и 3-им блоками(ширина 80%, высота 85%)

HTML5

<head>
        <title>Фотографии</title>
        <style type="text/css">
            .LeftArea {width:10%; height:100%; background-color:#FFEFD5; display:inline-block; float:left;}
            .TopArea{width:80%; height:15%; background-color:#DCDCDC; display:inline-block;}
        </style>
    </head>
    <body>
        <script type="text/javascript">
        window.onload=function(){//это событие происходящее при загрузке страницы
                CheckFunction();
                window.onresize=CheckFunction;
            }
 
            function CheckFunction(){// размер экрана и полей 
                var w=document.body.offsetWidth;//ширина экрна
                var h=document.body.offsetHeight;//высота экрана
                var WidthLeftArea=Math.ceil(w*(0.1));//ширина левого div
                var WidthCenterArea=w-(WidthLeftArea+WidthLeftArea);//ширина центрального верхнего div
                var HeightCenterTopArea=Math.ceil(h*0.1);//высота цетрального  верхнего div
                var HeightCenterArea=h-HeightCenterTopArea;// высота центрального  div
                
                var CenterDiv=document.getElementsByClassName("CenterArea")[0];// центральный div
                var RightDiv=document.getElementsByClassName("RightArea")[0];// получение правого div
                //стили
                CenterDiv.style.height=HeightCenterArea//высота центрального  div
                CenterDiv.style.width=WidthCenterArea-3;//ширина центрального div
                CenterDiv.style.backgroundColor="#D5FFCC";//закрашивание
                CenterDiv.style.display="inline-block";
                
                RightDiv.style.height=h;
                RightDiv.style.width=WidthLeftArea-3;
                RightDiv.style.display="inline-block";
                RightDiv.style.backgroundColor="#FFEFD5";
                RightDiv.style.top=0;
                RightDiv.style.float="right";
            }
            </script>
                <div class="LeftArea"></div>
        <div class="TopArea"></div>
        <div class="RightArea"></div>
        <div class="CenterArea">
    </body>

Я хочу сделать 2 блока через стили в процентах, а другие 2 блока задать конкретными числами. И у меня почем-то блоки не встают на нужные места. Занятно, что при изменении размеры блоки занимают нужное положение.

	16.11.2015, 01:16