공부삼아 독학해보고 있는데

작은 사이트들 뜯어가면서 야매로 해서 그런지 잘 동작이 안돼는 부분들이 많네요 ㅜㅜ

아래같은 웹사이트를 구현하고싶은데요 

평상시에는 사진1처럼 사이트 하단의 검은 부분 (div처리했어요)이 저렇게 있고 트위터 위젯과 링크, 2개의 div 블록이 가로 정렬 돼있는 형태고

 width가 500px 이하로 (모바일이라든지) 줄어들면 사진2처럼 트위터 위젯과 링크, 두개의 div 블록이 세로 정렬되게 만들려고 했거든요....







그런데 실제로 해보니 사진1은 잘 재현이 됐는데

사진 2는...







이렇게 트위터 위젯이 부모인 검정박스 div를 뚫고 내려와버리고, 그 밑으로는 body가 보입니다. (body의 배경으로 씹덕캐릭터를 걸어둔거라...)

해결해보려고 @media 를 걸어서 width가 500px 이하일 경우 검정 div의 height값이 2배가 되게도 해봤는데

작동하지가 않네요...

검정 div박스에 overflow:hidden을 걸었더니 트위터 위젯의 아랫부분이 짤려버립니다.

fixed를 걸면 아예 검정색 div 영역 전체가 사라져버리고요. 


어떻게 해결할 수 있을까요 ㅜㅜ

width 500px 이하일때도 검정박스가 사이트 최하단에 위치하고,

두개의 자식요소 div들이 세로로 정렬되게

만들고 싶습니다.


여러가지 찾아보고 지식인에도 물어봤는데 아직 답을 못찾았어요

제발 도와주세요 


소스코드는 지식인 링크에 있습니다 : https://m.kin.naver.com/mobile/qna/detail.nhn?d1Id=1&dirId=1040202&docId=310625061