Пропадают границы блоков div при задании им свойств

@Mcr · Регистрация: 30.01.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Не знаю почему, но у меня, когда я создаю два блока без стиля внутри блока "content" бордеры нормально показываются.
А когда дивам задаю свойства то вообще все границы пропадают.
Подскажите как решить эту проблему пожалуйста!
Опыта мало, строго не судите!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="content" style=" width:900px; margin:0 auto;  border-right:1px solid #c4c3c8; border-left:1px solid #c4c3c8;">
               <div style="width:600px; margin:1px; float:left;"> 
               <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
                </asp:ContentPlaceHolder>
                </div>
 
                <div style=" width:300px; margin:1px; float:left; border-left:1px solid #c4c3c8;">
                <asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server">
        
                </asp:ContentPlaceHolder>
                </div>
</div>

mixenik · 07.08.2014, 12:00

float: left он такой, ну.
Смешивать html и css некомильфо(создайте отдельный файл css, дивам присвойте классы и к этим классам добавляйте стили).
а вообще после последнего float нужно делать clear: both

@Mcr · 07.08.2014, 13:01 **[ТС]**

Сообщение от mixenik

float: left он такой, ну.
Смешивать html и css некомильфо(создайте отдельный файл css, дивам присвойте классы и к этим классам добавляйте стили).
а вообще после последнего float нужно делать clear: both

Так у меня все так и есть просто выложил думал так нагляднее будет.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <div id="content">
               <div id="leftContent"> 
               <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
                </asp:ContentPlaceHolder>
                </div>
 
                <div id="rightContent">
                <asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server">
        
                </asp:ContentPlaceHolder>
                </div>
        </div>
    </div>
    <div id="footer"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#footer
{
    border:1px solid #c4c3c8; 
    background-color:#f7f7f7; 
    height:250px;
    clear:both;
}
 
#content
{
    width:900px; 
    margin:0 auto;  
    border-right:1px solid #c4c3c8; 
    border-left:1px solid #c4c3c8;
}
 
#leftContent
{
    width:600px; 
    float:left;
}
 
#rightContent
{
    width:300px;  
    float:left; 
    border-left:1px solid #c4c3c8;
}

Добавлено через 44 минуты
Что никто не поможет?

mixenik · 07.08.2014, 14:21

height блокам укажите

Добавлено через 3 минуты
и ширину внутренних блоков меньше 900. иначе поедет верстка

@Mcr · 07.08.2014, 14:34 **[ТС]**

Сообщение от mixenik

height блокам укажите
Добавлено через 3 минуты
и ширину внутренних блоков меньше 900. иначе поедет верстка

Получилось.
Но вот проблема с высотой, у меня высота может разная быть на разных страницах. а вместе с auto границы тоже не показываются. Как быть?

mixenik · 07.08.2014, 14:40

в процентах задайте

Добавлено через 4 минуты
и минимальную и максимальную высоту еще можно задать

@Mcr · 07.08.2014, 14:47 **[ТС]**

Сообщение от mixenik

в процентах задайте

В процентах граница не показывается.
А как сделать чтобы просто блоки оставались на месте а скролбаром содержимое просматривать?

mixenik · 07.08.2014, 14:56

попробовал ваш код и задал высоту в процентах, все прекрасно работает.

Добавлено через 1 минуту
Вы возможно забыли высоту у родительского элемента задать

Добавлено через 39 секунд

Сообщение от Mcr

А как сделать чтобы просто блоки оставались на месте а скролбаром содержимое просматривать?

Примерчик есть глянуть?

@Mcr · 07.08.2014, 15:08 **[ТС]**

Сообщение от mixenik

попробовал ваш код и задал высоту в процентах, все прекрасно работает.
Добавлено через 1 минуту
Вы возможно забыли высоту у родительского элемента задать
Добавлено через 39 секунд
Сообщение от Mcr
А как сделать чтобы просто блоки оставались на месте а скролбаром содержимое просматривать?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#content
{
     height: 100%;
    width:900px; 
    margin:0 auto;  
    border-left:1px solid #c4c3c8; 
    border-right:1px solid #c4c3c8;
}
 
#leftContent
{
    height: 100%;
    width:590px; 
    float:left;
}
 
#rightContent
{
     height: 100%;
    width:290px;  
    float:left; 
    border-left:1px solid #c4c3c8;

Примерчик есть глянуть?

Сообщение от mixenik

в процентах задайте

Та нету примерчика все на локальной машине.

mixenik · 07.08.2014, 15:13

ваш код в хроме работает.
Скролл внутри фиксированных блоков?

@Mcr · 07.08.2014, 15:26 **[ТС]**

Пипец, а у меня в Хроме не работает...
А скрол один общий тот, за который отвечает браузер справа.

mixenik · 07.08.2014, 16:38

ну я вижу только вариант с фиксированными дивами вокруг окна с контентом

@Sabio · 07.08.2014, 17:04

CSS
1
2
3
#content{
    overflow:hidden;
}

mixenik · 07.08.2014, 17:07

Sabio, и прокрутка пропадает...

@Sabio · 07.08.2014, 17:12

mixenik, в смысле? Не понял вас.

mixenik · 07.08.2014, 17:14

CSS
1
2
3
#content{
    overflow:hidden;
}

Прокрутка в диве вообще пропадет + обрежется контент, который не влез в див

@Sabio · 07.08.2014, 17:23

mixenik, а зачем прокрутка в диве? Прокрутка в браузере должна быть. Это свойство позволяет контейнеру видеть элементы с float и не схлопываться, будто он пустой. Поэтому и не видно границ у ТС. Потому что контейнер думает, что у него содержимого нет. И ничего не обрежется в данном случае.

mixenik · 07.08.2014, 17:34

Sabio, Он хочет фиксированный див, в котором будет прокрутка контента скролом браузера

@vovandr · 07.08.2014, 17:43

CSS
1
2
3
4
5
#content:after {
    content: '';
    display: table;
    clear: both;
}

@Sabio · 07.08.2014, 17:47

mixenik, хм... не заметил этого. Ну clearfix тогда.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	07.08.2014, 12:00
	float: left он такой, ну. Смешивать html и css некомильфо(создайте отдельный файл css, дивам присвойте классы и к этим классам добавляйте стили). а вообще после последнего float нужно делать clear: both 0

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	07.08.2014, 14:21
	height блокам укажите Добавлено через 3 минуты и ширину внутренних блоков меньше 900. иначе поедет верстка 0

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	07.08.2014, 14:40
	в процентах задайте Добавлено через 4 минуты и минимальную и максимальную высоту еще можно задать 0

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	07.08.2014, 15:13
	ваш код в хроме работает. Скролл внутри фиксированных блоков? 0

@Mcr 10 / 10 / 3 Регистрация: 30.01.2012 Сообщений: 366
	07.08.2014, 15:26 [ТС]
	Пипец, а у меня в Хроме не работает... А скрол один общий тот, за который отвечает браузер справа. 0

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	07.08.2014, 16:38
	ну я вижу только вариант с фиксированными дивами вокруг окна с контентом 0

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	07.08.2014, 17:07
	Sabio, и прокрутка пропадает... 0

@Sabio 57 / 57 / 14 Регистрация: 24.06.2013 Сообщений: 265
	07.08.2014, 17:12
	mixenik, в смысле? Не понял вас. 0

@Sabio 57 / 57 / 14 Регистрация: 24.06.2013 Сообщений: 265
	07.08.2014, 17:23
	mixenik, а зачем прокрутка в диве? Прокрутка в браузере должна быть. Это свойство позволяет контейнеру видеть элементы с float и не схлопываться, будто он пустой. Поэтому и не видно границ у ТС. Потому что контейнер думает, что у него содержимого нет. И ничего не обрежется в данном случае. 0

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	07.08.2014, 17:34
	Sabio, Он хочет фиксированный див, в котором будет прокрутка контента скролом браузера 0

@Sabio 57 / 57 / 14 Регистрация: 24.06.2013 Сообщений: 265
	07.08.2014, 17:47
	mixenik, хм... не заметил этого. Ну clearfix тогда. 0