Переполнение оболочки и div

Question

Переполнение оболочки и div

0

Будучи новичком, я борюсь с CSS сайта.

Я создал сайт с несколькими 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>

Bart 02 окт. 2013, в 13:32

Источник

0

Это не связано с PHP, опубликуйте обработанный HTML. Может быть, даже jsfiddle ?
George 02 окт. 2013, в 10:37

Теги:

html

css

1 ответ

Ещё вопросы

Это не связано с PHP, опубликуйте обработанный HTML. Может быть, даже jsfiddle ?

Quicker · Answer 1 · 2013-10-02T08-57-00.000Z

если вы строго следуете по ссылке, которую вы указали, ваш div-контент должен стать частью основного контента div, а ваш основной контент должен иметь ширину = 100%. Как это:

<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>

Однако, если ваше подразделение newscontent должно стать частью основного контента, div должен стать своего рода таблицей, подобной представлению, и ваше содержимое новостей должно заполнить свободное пространство в конце - это может быть достигнуто таким образом:

<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>

Спасибо за ваш ответ. Я действительно пытаюсь расположить раздел новостей по содержанию рядом с элементом основного контента. Если я прав, возможно, было бы лучше использовать второй вариант, который вы мне дали, но он помещает div newscontent в div maincontent.