HTML и CSS неправильно позиционируют div

Question

HTML и CSS неправильно позиционируют div

0

Я работал над своим веб-сайтом, и вдруг у меня возникла проблема, я не хочу устанавливать высоту в свой divwash, но тогда она не отображается правильно, я хочу, чтобы она отображалась в полном объеме. Я отправлю ссылку на изображение, а на рис. Вы увидите серый квадрат, который я хочу, чтобы он отображался в полноэкранном режиме.

здесь ссылка: http://i62.tinypic.com/1428t47.png

здесь мой HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="css/media-queries.css" rel="stylesheet" type="text/css">

<title>Insert title here</title>
</head>
<body>
<div id="pagewrap">     

        <div id="logoBar">  
            <div class="helper">        
                <div class="logo"></div>
            </div>
        </div>
        <div style="clear:both;"></div>  
        <div id="sidebar">
            <div class="widget">
                <ul> 
                  <li style="border-top:0 !important;"><a href="">Acceuil</a></li> 
                  <li><a href="">Identification</a></li> 
                  <li><a href="">Mon Parcours</a></li> 
                  <li><a href="">Ma Formation</a></li> 
                  <li><a href="">Mes Projets</a></li> 
                  <li><a href="">Dossier de Veille</a></li> 
                  <li><a href="">Contact Me</a></li> 
                </ul>   
            </div>                  
        </div>

        <div class="contenu">
            <div class="post clearfix">     

                    <h1 class="post-title"><a href="#">Acceuil</a></h1>


                <br/><p>Ici vous trouverez toutes les informations conçernant moi, mes études, mes projets et ma formation.</p>

        </div>
</div>      
</div>          
</body>
</html>

Вот мой CSS:

/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
    width: 1000px;
    margin: 0 auto;
    background:#3c3c3c;

    /*SHADOW*/
    -webkit-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
    -moz-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
    box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
}

/************************************************************************************
MENU
*************************************************************************************/



/**Side Bar**/
#sidebar {
    width: 250px;
    float: left;
    margin: 10px 30px 0 24px;
}
.widget {
    background: #f5f5f5;
    margin: 0 0 30px;
    padding: 10px 20px;
    /* rounded corner */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /* box shadow */
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.widget ul {
    margin: 0;
    padding: 0;
}
.widget li {
    margin: 0;
    padding: 12px 0;
    list-style: none;
    clear: both;    
    border-top: solid 1px black;
}
.widget ul li a{
    font-family:stainy;
    font-size:21pt;
    color:#303438;
}
.widget ul li a:hover{
    text-decoration: none;
    outline: none;
    color:#30c9e0;
    font-size:22pt;
}
.widgettitle{
    font-family:stainy;
    font-size:20pt;

}
/************************************************************************************
Contenu
*************************************************************************************/

.contenu{

 background: #fff;
    margin: 30px 0 30px;
    padding: 20px 35px;
    width: 600px;
    float: left;
    /* rounded corner */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /* box shadow */
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* post */
.post {
    margin-bottom: 40px;
}
.post-title {
    margin: 0;
    padding: 0;
    /*font: bold 26px/120% Arial, Helvetica, sans-serif;*/
    font-family:stainy;
    font-size:46px;
    text-align:center;
}
.post-title a {
    text-decoration: none;
    color: #000;
}
.post-meta {
    margin: 0 0 10px;
    font-size: 90%;
}

user3410718 22 март 2014, в 11:53

Источник

Теги:

html

css

position

1 ответ

Ещё вопросы

MarioD · Accepted Answer · 2014-03-22T08-36-00.000Z

Дайте мне знать, если это то, чем вы были:

http://jsfiddle.net/9yVTt/

Вот что я сделал:

Удалено поплавок: слева от #sidebar &.contenu
Установите оба из них в строковый блок и вертикально-выровненный: верх
Я также дал.contenu margin-left от -4px, чтобы компенсировать ошибку в строчном блоке

CSS

/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
    width: 1000px;
    margin: 0 auto;
    background:#3c3c3c;

    /*SHADOW*/
    -webkit-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
    -moz-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
    box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
}

/************************************************************************************
MENU
*************************************************************************************/



/**Side Bar**/
#sidebar {
    width: 250px;
    margin: 10px 30px 0 24px;
}
.widget {
    background: #f5f5f5;
    margin: 0 0 30px;
    padding: 10px 20px;
    /* rounded corner */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /* box shadow */
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.widget ul {
    margin: 0;
    padding: 0;
}
.widget li {
    margin: 0;
    padding: 12px 0;
    list-style: none;
    clear: both;    
    border-top: solid 1px black;
}
.widget ul li a{
    font-family:stainy;
    font-size:21pt;
    color:#303438;
}
.widget ul li a:hover{
    text-decoration: none;
    outline: none;
    color:#30c9e0;
    font-size:22pt;
}
.widgettitle{
    font-family:stainy;
    font-size:20pt;

}
/************************************************************************************
Contenu
*************************************************************************************/

#sidebar,
.contenu{display:inline-block; vertical-align:top;}

.contenu{

 background: #fff;
    margin: 30px 0 30px -4px;
    padding: 20px 35px;
    width: 600px;
    /* rounded corner */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /* box shadow */
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* post */
.post {
    margin-bottom: 40px;
}
.post-title {
    margin: 0;
    padding: 0;
    /*font: bold 26px/120% Arial, Helvetica, sans-serif;*/
    font-family:stainy;
    font-size:46px;
    text-align:center;
}
.post-title a {
    text-decoration: none;
    color: #000;
}
.post-meta {
    margin: 0 0 10px;
    font-size: 90%;
}

Ты великий человек! это именно то, что я хотел! теперь единственное, что мне нравится: i60.tinypic.com/69q686.png , как мне сделать так, чтобы он занимал всю высоту страницы?
Вы можете использовать искусственные столбцы: alistapart.com/article/fauxcolumns или CSS: css-tricks.com/fluid-width-equal-height-columns или JS: cssnewbie.com/equal-height-columns-with-jquery/# .Uy1y9a1dVpw