Css'deki div'leri nasıl yeniden düzenlerim?

Question

Böyle bir sayfayı yapmak istiyorum: https://www.dropbox.com/s/5qwht1q96idtc22/hf.png?dl=0 bu parametrelerle:

Background: red 
header: 70px tall, black background, is always at the top of your browser  (fixed position), total width 
Content: 500px wide, centered in height matches the contents of a blue background, the browser scrolljának top position 30px from the header 
Left column: 300px wide (including frame), 550px high and 25px from the container to containing a yellow background, black border 5px 
Right column: 125px wide, 200px high, white background, 25px on the container to contain' 

Sadece bu yaptı: Bu kod ile https://www.dropbox.com/home?preview=hazikep.jpg

:

*{ 
margin:0; 
padding:0; 
} 


html, body 
{ 
height: 100%; 
width: 100%; 
background-color: red; 
} 

#fejlec{ 
height: 70px; 
width: 100%; 
background-color: black; 
background-position:top; 
background-attachment:fixed; 
position: fixed; 
} 

#kek{ 

background-color: blue; 
width: 500px; 
height: 100%; 
position: absolute; 
top:170px; 
bottom: 0; 
left: 0; 
right: 0; 
margin: auto; 
} 

#sarga{ 
background-color: yellow; 
width:260px; 
height: 550px; 
padding:20px; 
border:5px solid black; 
position: absolute; 
top:-25px; 
bottom: 0; 
left: 0; 
right: 0; 
margin: auto; 
float: left ; 


} 

#feher 
{ 
background-color: white; 
width:125px; 
height: 200px; 
padding:25px; 
} 

Bilmiyorum kim css ile div düzenlemek yapmak, bu yüzden birisi bana yardımcı olabilir, çok yararlı olabilir.

Answer 1

Bu başlangıç ​​olmalıdır: https://jsfiddle.net/hex8xsbs/

html:

<div class="header"></div> 
<div class="container"> 
    <div class="content"></div><div class="sidebar"></div> 
</div> 

css: O düzen gerçekleştirilmesi için birçok yol vardır

html { 
    background: red; 
} 

.header { 
    height: 70px; 
    width: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    background: black; 
} 

.container { 
    width: 500px; 
    margin: 100px auto; 
    background: blue; 
} 

.content { 
    width: 300px; 
    height: 550px; 
    margin: 25px; 
    display: inline-block; 
    vertical-align: top; 
    background: yellow; 
} 

.sidebar { 
    width: 125px; 
    height: 200px; 
    margin: 25px 0 25px 0; 
    display: inline-block; 
    vertical-align: top; 
    background: white; 
} 

Answer 2

.

Switz en birine başka (benzer) bir çözüm olabilir:

HTML

<div id="fejlec"></div> 
<div id="kek"> 
    <div id="sarga"></div> 
    <div id="feher"></div> 
    <div class="clear"> </div> 
</div> 

ve css:

*{ 
margin:0; 
padding:0; 
} 


html, body 
{ 
height: 100%; 
width: 100%; 
background-color: red; 
} 

.clear { 
    clear: both; 
} 
#fejlec { 
height: 70px; 
width: 100%; 
background-color: black; 
position: fixed; 
top: 0 
} 

#kek { 
background-color: blue; 
width: 500px; 
margin: 100px auto 0; 
padding: 20px; 
} 

#sarga { 
background-color: yellow; 
width:260px; 
height: 550px; 
padding:20px; 
float: left; 
border:5px solid black; 
} 

#feher { 
background-color: white; 
width:26%; 
height: 200px; 
padding:25px; 
float: right; 
} 

https://jsfiddle.net/njb9aj5z/