Горизонтальное выравнивание левой и правой колонок на сайте

@Arthur the king · Регистрация: 14.08.2016

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

Люди, помогите пожалуйста снова новичку

. Я продолжаю свле обучение и опять застрял : не понимаю почему левая колонка (свойство float: left

отображается после элементов главной, а не параллельно, как правая колонка.

прикладываю свой сайт, скриншот, такж коды (фрагменты), мб может по ним будет понятно не скачивая сайта.

HTML5

1
2
3

<div class="left">
<p><a href="http://www.care2.com/click-to-donate/oceans/"><img src="https://www.cyberforum.ru/images/ocean.png" alt="click to donate - ocean - care2 project" id="ocean" target="_blank"></a></p>
</div>

CSS

.left {float:left;
    width: 350px;
    margin: 10px;
    text-align: center;
 
}
 
#ocean {border-width: 3px;
    border-style: solid;
    border-color: white;
    padding: 0px;
    width: 300px;
    margin: 10px;
 
}

@Kenworth · 14.08.2016, 23:43

Попробуй сделать обнуление стилей родительскому блоку в котором лежит Ваш класс ".left"

@Fedor92 · 15.08.2016, 00:24

Arthur the king, по умолчанию блочные элементы занимают 100% ширины экрана... Поэтому чтобы уместить все блоки на одной линии, для блока #brd необходимо задать ширину, к примеру 20% и всё будет гуд...

@Arthur the king · 15.08.2016, 10:26 **[ТС]**

Fedor92, но у блока #brd ширина указана - width:350px;

Добавлено через 7 минут
Kenworth, css reset не помог

@Fedor92 · 15.08.2016, 12:25

Сообщение от Arthur the king

Fedor92, но у блока #brd ширина указана - width:350px;

Сначала правильно стили подключите:

HTML5

1	<link type="text/css" rel="stylesheet" href="mysite.css">

в тестовом файле, а потом мне про ширину рассказывайте... А теперь к делу:

Горизонтальное выравнивание левой и правой колонок на сайте

Его надо либо удалить - либо вставить видео... А потом дело техники, надо тупо переставить блоки местами:

HTML5

<html>
<head>
<title>Мой Сайт</title>
<link type="text/css" rel="stylesheet" href="mysite.css">
</head>
<body>
<h1 id="header">my website</h1>
<div class="left">
<p><a href="http://www.care2.com/click-to-donate/oceans/"><img src="https://www.cyberforum.ru/images/ocean.png" alt="click to donate - ocean - care2 project" id="ocean" target="_blank"></a></p>
</div>
<div id="brd">
<p>Using data on shark catches, discards and mortality rates worldwide, the researchers estimated that approximately 100 million sharks are killed per year by humans. However, they add that this is a conservative estimate, and the true number could be as high as 273 million sharks killed annually by humans.</p>
<br>
<img src="https://www.cyberforum.ru/images/White_shark.jpg" width="300" height="300" alt="great white shark" hspace="0" vspace="0" class="pic_sh"></p>
</div>
<p class="video">
<iframe width="320" height="180" src="https://www.youtube.com/embed/wnfWoscqQTU" frameborder="0" allowfullscreen></iframe>
</p>
<DIV class="video" align="center"><embed src="naruto_new2.swf" menu="false" quality="high" width="151" height="70" name="poqbum-dot-com" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="playlist=chlist.xg" wmode="transparent"></embed></DIV>
</body>
</html>

Плюс ко всему надо добавить доктайп и указать кодировку с помощью метатега... Раз уж Вы новичок, то поясню, что доктайп является требованием обязательным иначе Ваша страничка воспроизводиться броузером в режиме совместимости, что может привести к некорректной визуализации...

@Arthur the king · 16.08.2016, 01:12 **[ТС]**

Fedor92,

стили подключены правильно. Сегодня уже разобарлся, да, проблема была в том, что оказывается левая и права плавающие колонки (их код) должны идти перед кодом средней. Про кодировку и доткайп знаю, просто лень делать это в одном из многих тестовый сайтов.

спасибо за Ваши ответы.

(Тот блок не пустой, просто в версии сайта которую я вам отправил не было картинок и плеера который там располагался)

@Kenworth 105 / 104 / 59 Регистрация: 21.10.2013 Сообщений: 346
	14.08.2016, 23:43	2
	Попробуй сделать обнуление стилей родительскому блоку в котором лежит Ваш класс ".left" 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	15.08.2016, 00:24	3
	Arthur the king, по умолчанию блочные элементы занимают 100% ширины экрана... Поэтому чтобы уместить все блоки на одной линии, для блока #brd необходимо задать ширину, к примеру 20% и всё будет гуд... 0

@Arthur the king 0 / 0 / 0 Регистрация: 14.08.2016 Сообщений: 5
	15.08.2016, 10:26 [ТС]	4
	Fedor92, но у блока #brd ширина указана - width:350px; Добавлено через 7 минут Kenworth, css reset не помог 0

@Arthur the king 0 / 0 / 0 Регистрация: 14.08.2016 Сообщений: 5
	16.08.2016, 01:12 [ТС]	6
	Fedor92, стили подключены правильно. Сегодня уже разобарлся, да, проблема была в том, что оказывается левая и права плавающие колонки (их код) должны идти перед кодом средней. Про кодировку и доткайп знаю, просто лень делать это в одном из многих тестовый сайтов. спасибо за Ваши ответы. (Тот блок не пустой, просто в версии сайта которую я вам отправил не было картинок и плеера который там располагался) 0

Горизонтальное выравнивание левой и правой колонок на сайте

Решение