래퍼 및 div 오버플로

초보자 인 나는 사이트의 CSS에 어려움을 겪고 있습니다.래퍼 및 div 오버플로

DIV와 래퍼를 사용하여 사이트를 만들었지 만 외부 DIV (래퍼)를 늘리려면 내부 DIV의 오버플로를 얻을 수 없습니다. 나는 http://www.sitepoint.com/examples/clearing_floats/example2.php을 보았지만 내 실수는 볼 수 없다.

미리 감사드립니다.

body { 
    text-align: center; 
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/background.jpg) 
} 
#wrapper { 
    text-align: left; 
    width: 1250px; 
    padding: 0px; 
    margin: 0 auto; 
    height: 100%; 
    overflow:auto; 
} 
#logo { 
    position: absolute; 
    top: 50px; 
    right: 10px; 
} 
#header { 
    text-align:left; 
    width: 100%; 
    height: 155px; 
    position: relative; 
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r1_c2.jpg); 
    padding-left: 4px; 
    z-index:9; 
} 
#menu { 
    text-align: left; 
    position: absolute; 
    bottom: 6px; 
    padding-left: 4px; 
} 
#headerimage { 
    text-align: left; 
    width: 100%; 
    height: 268px; 
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/keenfuel_r2_c2.jpg); 
} 
#mainwrapper { 
    text-align:left; 
    width: 100%; 
    height: 488px; 
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r 3_c2.jpg); 
    background-repeat: no-repeat; 
} 
#maincontent{ 
    width: 800px; 
    height: 488px; 
    float: left; 
    padding-left: 15px; 
    font-family:Verdana, Geneva, sans-serif; 
    color: #000000; 
} 
#newscontent{ 
    width: 360px; 
    heigth: 200px; 
    float: right; 
    margin-top: 20px; 
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/news_background.fw.png); 
    overflow:hidden; 
    color: #000000; 
    padding-left: 15px; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 11px; 
} 
#footer { 
    height: 56px; 
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r6_c2.jpg); 
    text-align: center; 
    font-family: Verdana, Geneva, sans-serif; 
    clear:both; 
}

<div id="wrapper"> 
    <div id=header><div id="logo"></div> 
    <div id="menu"> 

<?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, '<font color="#FFFFFF"> | [ac][menu_title]</a>', '', '', '', '[ac][menu_title]</a></font>'); ?> 

    </div> 
</div> 

<div id="headerimage"></div> 

<div id="mainwrapper"> 
    <div id="maincontent"><?php page_content(1); ?><br style="clear:both"/></div> 
    <div id="newscontent"> 
<?php 

// customized cwsoft-anynews function call 
$config = array(
    'group_id_type' => 'section_id', 
    'display_mode' => 4, 
'max_news_length' => 20, 
); 
echo getNewsItems($config); 

?> 

    <br style="clear:both"/> 
</div> 
</div>  
<div id="footer"><br /></div>

출처

2013-10-02 Bart

이것은 PHP와 관련이 없으므로 처리 된 HTML을 게시하십시오. 아마 심지어 [jsfiddle] (http://www.jsfiddle.net)일까요? – George

당신이 엄격하게 당신이 준 링크를 따르는 경우에, 당신의 newscontent div의 메인 컨텐츠 사업부의 일부 100 = 폭 %가 있어야합니다 또한 메인 컨텐츠가되어야합니다. 이 것을 얻을 수있는 - 주요 콘텐츠 사업부의 일부가 될해야합니다 newscontent의 사업부가보기와 같은 테이블의 종류가되기 위해 의미하고 newscontent 마지막에 여유 공간을 작성해야하는 경우

가

<html> 
<head> 
<style> 
body { 
text-align: center; 
background: url (http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/background.jpg) 
} 
#wrapper { 
text-align: left; 
width: 1250px; 
padding: 0px; 
margin: 0 auto; 
height: 100%; 
overflow:auto; 

} 
#logo{ 
position: absolute; 
top: 50px; 
right: 10px; 
} 

#header { 
text-align:left; 
width: 100%; 
height: 155px; 
position: relative; 
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r1_c2.jpg); 
padding-left: 4px; 
z-index:9; 
} 

#menu{ 
text-align: left; 
position: absolute; 
bottom: 6px; 
    padding-left: 4px; 

} 

#headerimage{ 
text-align: left; 
width: 100%; 
height: 268px; 
background:  url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/keenfuel_r2_c2.jpg); 
} 

#mainwrapper{ 
text-align:left; 
width: 100%; 
height: 488px; 
background:url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r 3_c2.jpg); 
background-repeat: no-repeat; 

} 
#maincontent{ 
width: 100%; 
height: 488px; 
float: left; 
padding-left: 15px; 
font-family:Verdana, Geneva, sans-serif; 
color: #000000; 

} 

#newscontent{ 
width: 360px; 
heigth: 200px; 
float: right; 
margin-top: 20px; 
background:  url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/news_background.fw.png); 
overflow:hidden; 
color: #000000; 
padding-left: 15px; 
font-family: Verdana, Geneva, sans-serif; 
font-size: 11px; 
} 
#footer{ 
height: 56px; 
background:  url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r6_c2.jpg); 
text-align: center; 
font-family: Verdana, Geneva, sans-serif; 
clear:both; 
} 

</style> 
</head> 

<body> 

<div id="wrapper"> 

<div id=header> <div id="logo"> </div> 
<div id="menu">   <?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, '<font  color="#FFFFFF"> | [ac][menu_title]</a>', '', '', '', '[ac][menu_title]</a></font>'); ?> </div> </div> 

<div id="headerimage"></div> 

<div id="mainwrapper"> 
<div id="maincontent"><?php page_content(1); ?> <br style="clear:both"/> 
<div id="newscontent"> 
    <?php 

    // customized cwsoft-anynews function call 
$config = array(
'group_id_type' => 'section_id', 
'display_mode' => 4, 
'max_news_length' => 20, 
); 
echo getNewsItems($config); 


?> 
<br style="clear:both"/> 
</div> 
</div> 
</div>  
<div id="footer"><br /> 
        </div> 



</body> 
</html>

그러나이처럼 way :

<html> 
<head> 
<style> 
body { 
text-align: center; 
background: url (http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/background.jpg); 

} 
#wrapper { 
text-align: left; 
width: 1250px; 
padding: 0px; 
margin: 0 auto; 
height: 100%; 
overflow-x:hidden; 
} 
#logo{ 
position: absolute; 
top: 50px; 
right: 10px; 
} 

#header { 
text-align:left; 
width: 100%; 
height: 155px; 
position: relative; 
background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r1_c2.jpg); 
padding-left: 4px; 
z-index:9; 
} 

#menu{ 
text-align: left; 
position: absolute; 
bottom: 6px; 
    padding-left: 4px; 

} 

#headerimage{ 
text-align: left; 
width: 100%; 
height: 268px; 
background:  url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/keenfuel_r2_c2.jpg); 
} 

#mainwrapper{ 
text-align:left; 
width: 100%; 
height: 488px; 
background:url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r 3_c2.jpg); 
background-repeat: no-repeat; 
position:relative; 
} 
#maincontent{ 
width: 800px; 
height: 488px; 
display:inline-block; 
padding-left: 15px; 
font-family:Verdana, Geneva, sans-serif; 
color: #000000; 
overflow-x:hidden; 
} 

#newscontent{ 
left:800px; 
heigth: 200px; 
right:1px; 
display:inline-block; 
margin-top: 20px; 

color: #000000; 
padding-left: 15px; 
font-family: Verdana, Geneva, sans-serif; 
font-size: 11px; 
background-color:#770000; 
overflow-x:hidden; 
} 
#footer{ 
height: 56px; 
background:  url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r6_c2.jpg); 
text-align: center; 
font-family: Verdana, Geneva, sans-serif; 
clear:both; 
} 

</style> 
</head> 

<body> 

<div id="wrapper"> 

<div id=header> <div id="logo"> </div> 
<div id="menu">   <?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, '<font  color="#FFFFFF"> | [ac][menu_title]</a>', '', '', '', '[ac][menu_title]</a></font>'); ?> </div> </div> 

<div id="headerimage"></div> 

<div id="mainwrapper"> 
<div id="maincontent"><?php page_content(1); ?> <br style="clear:both"/> </div> 
<div id="newscontent"> 
    <?php 

    // customized cwsoft-anynews function call 
$config = array(
'group_id_type' => 'section_id', 
'display_mode' => 4, 
'max_news_length' => 20, 
); 
echo getNewsItems($config); 

?> 
<br style="clear:both"/> 
</div> 
</div>  
<div id="footer"><br /> 
        </div> 



</body> 
</html>

출처

2013-10-02 11:05:40 Quicker

답변 해 주셔서 감사합니다. 나는 정말로 주 내용 div 옆에 newscontent div를 배치하려고합니다. 만약 내가 옳다면, 당신이 준 두 번째 옵션을 사용하는 것이 가장 좋을 수도 있지만, 주요 내용 div 아래에 뉴스 콘텐트 div를 배치합니다. – Bart

래퍼 및 div 오버플로

답변

관련 문제