초보 CSS 도와주세요!

추팔소 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2018.03.06 23:40:23 1776 (122.♡.♡.146)

답변 1

본문

어떤 회원님 도움으로 답변을 받아 레이아웃 구도를 어느정도 맞출 수 있었으나

두 가지 문제가 생겼습니다.

https://goo.gl/4oSnc3
(사이트 링크입니다)

HTML 코드


<div id="hd">

 <div id="main">

  <div id="tnb">
   상단 로고
  </div>
 
  <div id="content">
   <div id="lnb">
    좌측 메뉴
   </div>
   <div id="container">
    본문 타이틀
   </div>
  </div>

 </div>
 <div id="Rside">
  채팅방
 </div>
</div> <!-- #hd end -->

CSS 코드


#hd {height:100%}
#main {float:left;width:80%;height:100%}
/* 레이아웃 */
#tnb {width:100%;height:100px;background:#1f3a4f;color:#FFF}
#content {width:100%;height:100%}
#lnb {float:left;width:270px;height:100%;background:#1f3a4f}
#container {float:left;width:auto;height:100%;background:#DDD}
#container_title {margin-bottom:20px;font-size:1.2em;font-weight:bold}
#Rside {float:right;width:20%;height:100%}

문제1.
https://imgur.com/a/lm74b

위 링크의 사진처럼 #Rside (채팅방) 은 완전히 height 100% 정상으로 딱 잘리는데,
#lnb와 #container는 #tnb의 height 300px의 영향을 받아 아래로 300px 더 늘어나 있습니다.
제가 원하는 방향은 #lnb와 #container도 브라우저의 높이에 맞게 딱 잘리는 것 입니다.

문제2.
#container (회색 배경의 본문)에 CSS로 width: auto 값을 주었는데도
#lnb와 #rside의 사이를 꽉 채우지 않습니다 ㅠㅠ

어떻게 하면 좋을까요?