float object and list css
By hkim • Mar 1st, 2008 • Category: css, for myselfTable을 float시키고 싶을때 아래의 방법을 사용하고 있다고 가정하면,
table.wikiLeft {
float:left;
display:block;
font-size:1em;
background-color: #FFF;
margin: 0 20px 10px 0;
}
<table class=”wikiLeft”> . . . . </table>로 왼쪽으로 float하는 것이 가능하다. 다음의 본문은 이제 table의 오른 쪽에 위치하여 왼쪽으로 정렬되어 나타나다가 table의 height가 끝나는 순간 본문의 왼쪽면에 정렬되어 나타나야 한다. 즉,
- < t a b l e class=”wikiLeft” >
- <ul>…</ul>
그러나, 이 경우 list의 디스크모양이 테이블과 겹쳐지게 된다. 이 때 ul의 attributes 값을 아래와 같이 지정해주면:
ul {
padding: 0 0 0 2em;
margin: .25em 0 0em 0em;
list-style: disc ;
overflow: hidden; /* to start new block formatting context */
}
오러랩되는 것을 막을 수 있다.
hkim is Hyo's research interests include computer-mediated communicaiton, interactive television (aka iptv here in Korea), mobile communication, and social network analysis.
Email this author | All posts by hkim
