홈페이지를 다시 만들어보고 싶어서 거의 6년만에 드림위버 켜놓고 열심히 놀고 있습니다.

요즘엔 table로 안짜고 div 로 짠다고 해서 책도 사가지고 취미 삼아 만들기 시작했는데요.

문제가 생겨버렸네요.


<div id="menu">
  <h1>LOGO</h1>
  <ul>
    <li>HOME</li>
    <li>PROFILE</li>
    <li>CONTACT</li>
    <li>LINK</li>
  </ul>
</div>

이게 메뉴 부분 소스고...


#menu {
background-color: #CCCCCC;
margin: 10px 0px 0px 10px;
padding: 10px;
}

이게 메뉴 CSS 소스 입니다.


여기서 문제가...

div에 내용을 입력하면 div 크기가 자동으로 조절이 되어야 하는거잖아요?

가령 3줄을 쳐서 넣었으면 3줄에 해당하는 길이로 늘어나야하는데

지금 웹상에서 확인해보면 상하 패딩 20px 값으로만 지정되고

로고나 리스트에 해당하는 부분은 div 밖으로 빠져나가 있네요;;;

웃긴건 이 메뉴 아래가 div#contain 영역인데

마진 값은 또 리스트를 기준으로 잘 떨어져 있습니다;;



해결책이 뭔가요? 흐 답답해 죽겠네요 -_-

혹시나 해서 스샷 첨부합니다.