2012-04-27 5 views
0

나는이 div의에 둘러싸여 내 단락 내용에 약간의 문제가 오전 :문제와 2 명 div를

http://jsfiddle.net/NinjaSk8ter/6sv5T/

나는 내용이 필요는 contentheader div의 아래에 표시 및 포장 imagebox div 및 imagebox div와 겹치지 않습니다. p 내용은 contentheader와 imagebox를 둘러싸 야합니다.

나는 작동하지 않는 contentheader 및 imagebox에 대해 Z- 색인을 적용하려고 시도했습니다.

하지만 content가 contentheader div 아래에 표시되도록 단락 태그의 margin-top을 설정했지만 올바른 방법이라고 생각하지 않습니다.

"contentbox"클래스를 콘텐츠에 적용 할 수 있기를 기대했지만이 div가 다른 contentheader 및 imagebox div 외부에 있도록하는 방법을 모르겠습니다.

누군가가 어떻게 이런 일이 일어 났는지에 대해 나에게 고마워 할 수 있다면 고맙겠습니다.

+0

이 당신의 단락은 하나 개의 사업부에 의해 "둘러싸여"있는

<div id="mid-featureleft"> <div class="imagebox"> </div> <div class="contentheader"> <h1>Georgio Versari Painters Artisans</h1> </div> <p>Content Content Content Content Content Content Content Content Content Content Content Content</p> </div>​ 

CSS. 다른 사업부는 형제입니다. – j08691

+0

.imagebox 및 .contentheader는 단락의 형제입니다. # 중반 featureleft p에서 300px의 오른쪽 마진을 설정하는 것이 가장 좋은 이유는 무엇입니까? – j08691

+0

이미지 박스를 감싸고 그 아래에 떨어지는 내용이 필요합니다. 이미지 박스 높이가 featureleft 중간보다 작 으면 – Paul

답변

0

jsFiddle example과 같이 HTML과 CSS를 재 배열했습니다.

HTML

#mid-featureleft { 
    height:250px; 
    width:609px; 
    margin: 12px 0 0 0; 
    float:left; 
    position:relative; 
    background-color:#E7EFF7; 
} 
#mid-featureleft p { 
    color: #0C2A55; 
    margin:0; 
    font-size:12px; 
    line-height:14px; 
    padding: 5px 5px 5px 5px; 
} 
#mid-featureleft .contentheader { 
    height:29px; 
    width:286px; 
    text-align:left; 
    line-height:29px; 
    margin:0 0 0 0; 
    padding: 0 0 0 6px; 
    float:left; 
    background-color:red; 
} 

#mid-featureleft .imagebox { 
    height:200px; 
    width:272px; 
    float: right; 
    margin:0 0 0 20px; 
    background-color:green; 
}​