Могу ли я совершить преступную область?

Question

Я новичок в дизайне передней части.

сделал такой код.

<div id="header"> 
header 
</div> 
<div id="content"> 
content 
</div> 

<div id="sidebar"> 
in here will be login module 
</div> 

Каким образом боковая панель может быть нарушающей зону, подобную рис.

любое хорошее решение?

Answer 1

Конечно, это возможно. Все возможно с помощью CSS;)

Вам необходимо научиться использовать свойство position и float.

DEMO HERE

#wrap{ 
width:100%; 
margin:0 auto; 
} 
#header{ 
width:100%; 
height:50px; 
background:orange; 
} 
#content{ 
width:100%; 
height:500px; 
background:green; 
float:; 
} 
#sidebar{ 
width:25%; 
height:550px; 
background:red; 
float:left; 
position:relative; 
bottom:550px; 
left:20px; 
} 

Answer 2

Если вам просто нужно разместить такую ​​боковую панель, вы можете использовать position: absolute. В очень простой тест добавить следующие классы в ваш HTML:

body { 
    margin:0 
} 

div { 
    border: 1px solid black 
} 

#header { 
    height: 50px; 
} 

#content { 
    height:200px 
} 

#sidebar { 
    position: absolute; 
    top: 0; 
    left: 100px; 
    width: 100px; 
    height: 250px;  
} 

А вот демо: http://jsfiddle.net/Mxqh4/

Опять же, это всего лишь демо, и в реальном проекте должны быть динамически регулировать, но это должно дать вам начало.