DIV를 사용하는 CSS의 다중 박스 레이아웃

나는 웹 사이트를 만들고 로그인 상자를 만들려고합니다. 두 개의 콘텐츠 상자가있는 웹 사이트가 있으며 세 번째 "로그인 상자"를 추가하려고합니다.DIV를 사용하는 CSS의 다중 박스 레이아웃

그러나 위의 (컨테이너의 현재 폭을 가졌을 때) 이상 (컨테이너의 너비를 늘려서 상자).

또한 여백이 새로 만든 상자에도 영향을 미치지 않는 것으로 보입니다. 여기

내가 그것을 같이 할 것입니다 : http://i.stack.imgur.com/Kmm1g.jpg

그리고 여기에 현재의 웹 사이트입니다 : http://www.winterlb.com/

그래서 제 질문은,이 작업을 수행하는 가장 쉬운 방법은 무엇이다는? 감사.

2011-10-01 Ivan

왜 이렇게 생각하지 않았는지, 고마워요! – Ivan

도구 모음을 사용하여 이미지를 업로드하거나 최소한 URL을 가져 와서 Stack Exchange 제공 Imgur 계정으로 이동하십시오. 감사! – Arjan

로그인 상자와 탐색 상자를 같은 div에 넣을 수 있습니다.

이

HTML :이

<div id="navBar"> 
<div id="loginBox"> 
    ... 
</div> 
<div id="navBox"> 
    ... 
</div> 
</div> 

<div id="mainContent"> 
    ... 
</div>

CSS :

div#navBar { 
    float: left; 
    width: 200px; 
} 

div#mainContent { 
    float: left; 
    width: 600px; 
}

2011-10-01 01:24:09 Anson

이 '사이드 바'내부의 '세 번째 상자'를 추가하고 추가과 같이이 사업부 및 주요 콘텐츠 DIV 플로트 원래의 사이드 바 콘텐츠를 래핑하는 또 다른 div입니다.

approriate login div 및 navigation div의 스타일을 지정하십시오. 필요한 경우 왼쪽으로 부 으십시오.

여기 당신은 DOCTYPE없이 제대로이를 수행하지 않습니다 구조가 http://pastebin.com/3hLmGzRZ

2011-10-01 01:25:15 newpxsn

어떻게 보일지의 샘플 HTML입니다. 당신은 쿼크 모드입니다. 첫 번째 줄에 추가 한 다음 우리가 어디에 있는지 확인하십시오. <!DOCTYPE html>

2011-10-01 01:38:47 Rob

답변