Почему дочерний div не подходит к границе родительского div?

У меня очень простой код HTML/CSS, у которого есть родительский div pageWrapper, внутри которого у меня есть header, rightPanel. У меня есть граница до pageWrapper, поэтому header и rightPanel оба должны быть показаны внутри границы.Почему дочерний div не подходит к границе родительского div?

Когда я вижу рендеринг HTML в окне конструктора Visual Studio, он показывает корректный вывод, rightPanel попадает под границу. Но в IE/Chrome/Firefox rightPanel не подходит к границе pageWrapper.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
     #pageWrapper { 
      font: 14px/11.4; 
      width: 1000px; 
      background-color: #FFF; 
      margin-left: auto; 
      margin-right: auto; 
      border: 5px solid black; 
     } 

     #header { 
      height: 127px; 
      width: 1000px; 
     } 

     #logo { 
      position: relative; 
      left: 15px; 
      top: 4px; 
     } 

     #blogSlogan { 
      position: relative; 
      width: 270px; 
      left: 685px; 
      top: -125px; 
     } 

     #searchBox { 
      position: relative; 
      left: 685px; 
      top: -70px; 
      width: 290px; 
     } 

     #rightPanel { 
      position:relative; 
      background-color: red; 
      height: 600px; 
      width: 500px; 
      float: right; 
     } 
    </style> 
</head> 
<body> 
    <div id="pageWrapper"> 

     <div id="header"> 
      <img src="Images/linkedin.jpg" alt="Social voice logo" 
       height="109px" id="logo" /> 
      <p id="blogSlogan">Your source for mobile/media marketing.</p> 
      <div id="searchBox"> 
       <input type="text" name="search" size="25" value="Search" /> 
       <input type="submit" value="SEARCH" /> 
      </div> 
     </div> 
     <!-- End header--> 

     <div id="rightPanel"> 

     </div> 
     <!-- End rightPanel--> 
    </div> 
    <!-- End pageWrapper--> 

</body> 
</html>

enter image description here

источник

2015-01-09 Pranit Kothari

Используйте любой сброс css и проверьте, что проблема решена или нет. – Hareesh

Это потому, что вы плавали правую панель, но нет ничего после того, как очистить поплавок.

Я бы хотел прочитать немного больше о using floats.

Вам нужно добавить следующее:

#pageWrapper:after { 
    clear: both; 
    content: " "; 
    display: block; 
    visibility: hidden; 
    height: 0; 
}

Или, если вам нужно поддерживать ниже, чем IE8 (:after не поддерживается), то вам нужно добавить дополнительный div после ваших плавающих элементов и убедитесь, что он имеет CSS clear: both;

DEMO

источник

2015-01-09 10:51:27 mattytommo

ответ на ваш вопрос очень прост. Вы применили float:right к вашему красному div, но его контейнер не плавает. Это генерирует поведение, которое вы видите, в соответствии с спецификациями модели коробки.

Вы должны занять некоторое время, чтобы понять, как работает модель коробки, как разные значения position и float влияют на ваш стиль, поскольку я вижу, что вы использовали какую-то позицию: относительная, и на самом деле это не имеет никакого смысла смотреть на остальных html и css.

источник

2015-01-09 10:56:06

Я очень новичок в HTML/CSS.Спасибо за совет. Можете ли вы предложить ссылку, где я могу быстро изучить HTML/CSS. +1. –

Существует не быстро. Вы можете учиться, но для чего-то еще потребуется время и практика. Вы можете начать с учебников по w3schools и html5doctor, а затем google для более продвинутых руководств. –

css трюки или академия кода - оба являются отличными источниками информации – jbutler483

Если вы установилисвойство float CSS на right, он будет вынут из потока HTML. Вам нужно добавить элемент в конце #pageWrapper с свойством CSS clear: both, чтобы он разделил основной div до точки, где заканчиваются все перемещенные элементы. Уборщик способ сделать это с помощью CSS добавляет эти строки в CSS:

#pageWrapper:after { 
    content: “ "; 
    display: block; 
    clear: both; 
}

источник

2015-01-09 10:58:38

Просто добавьте переполнения: скрытый свойство родительского DIV вы будете иметь свой ответ Спасибо

источник

2015-01-09 11:00:33

изменения на правой панели из поплавка справа налево: 500 пикселей; будет работать

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>dd</title> 
    <style type="text/css"> 
     #pageWrapper { 
      font: 14px/11.4; 
      width: 1000px; 

      background-color: #FFF; 
      margin-left: auto; 
      margin-right: auto; 
      border: 5px solid black; 
     } 

     #header { 
      height: 127px; 
      width: 1000px; 
     } 

     #logo { 
      position: relative; 
      left: 15px; 
      top: 4px; 
     } 

     #blogSlogan { 
      position: relative; 
      width: 270px; 
      left: 685px; 
      top: -125px; 
     } 

     #searchBox { 
      position: relative; 
      left: 685px; 
      top: -70px; 
      width: 290px; 
     } 

     #rightPanel { 
      position:relative; 
      background-color: red; 
      height: 600px; 
      width: 500px; 
      right:-500px; 

     } 
    </style> 
</head> 
<body> 
    <div id="pageWrapper"> 

     <div id="header"> 
      <img src="Images/linkedin.jpg" alt="Social voice logo" 
       height="109px" id="logo" /> 
      <p id="blogSlogan">Your source for mobile/media marketing.</p> 
      <div id="searchBox"> 
       <input type="text" name="search" size="25" value="Search" /> 
       <input type="submit" value="SEARCH" /> 
      </div> 
     </div> 
     <!-- End header--> 

     <div id="rightPanel"> 

     </div> 
     <!-- End rightPanel--> 
    </div> 


</body>

источник

2015-01-09 11:16:41 Fang

Я обновил свой HTML и CSS

<body> 
<div id="pageWrapper"> 
    <div class="secondWrapper"> 
    <div id="header"> 
     <img src="Images/linkedin.jpg" alt="Social voice logo" 
      height="109px" id="logo" /> 
     <p id="blogSlogan">Your source for mobile/media marketing.</p> 
     <div id="searchBox"> 
      <input type="text" name="search" size="25" value="Search" /> 
      <input type="submit" value="SEARCH" /> 
     </div> 
    </div> 
    <!-- End header--> 

    <div id="rightPanel"> 

    </div> 
    <!-- End rightPanel--> 
    </div> <!-- End secondwrapper--> 
</div> 
<!-- End pageWrapper--> 

</body>

Что я сделал включен другой обертку внутри pagewrapper и дал поплавок и границы

здесь CSS

#pageWrapper { 
     font: 14px/11.4; 
     width: 1000px; 
     background-color: #FFF; 
     margin-left: auto; 
     margin-right: auto; 


    } 
.secondWrapper{ 
    float:left; 
    border: 5px solid black; 
    width:100%: 

} 

    #header { 
     height: 127px; 
     width: 1000px; 
     float:left; 
    } 

    #logo { 
     float:left; 
     margin:10px 0 0 10px; 
    } 

    #blogSlogan { 
     float:right; 
     width: 270px; 

    } 

    #searchBox { 
     float:right; 
     clear:right; 

    } 

    #rightPanel { 
     background-color: red; 
     height: 600px; 
     width: 500px; 
     float: right; 
    }

источник

2015-01-09 11:24:10 Hareesh

Почему дочерний div не подходит к границе родительского div?

ответ

Смежные вопросы