float:left - HTML и CSS

ZhenyaKad · 06.04.2014, 19:02

Добрый вечер, первые попытки создания простого сайта и столкнулась с проблемой, не обтекает блок с контентом левое меню, хотя стоит float left. что я не так делаю?

Код HTML:

<body>
<div id="wrapper">
    
	
      <div id="content">
       <div id="leftBar">
        <div id="vidi"><p>Виды рекламы</p></div>
	      <div id="image"></div>
	        <div class="punkt">
		      <ul>
		       <li>Изготовления рекламы</li>
		        <li>Реклама в торговых сетях</li>
				<li>Видео реклама</li>
		       <li>Съемка</li>
		      </ul>
	  </div>
	  <div class="rasprostr"> <p>Распространение</p> </div>
	   <div id="image2"></div>
		<div class="punkt">
		 <ul>
		  <li>Распространение по почте</li>
		  <li>По офисам</li>
		  <li>Расклейка объявлений</li>
		  <li>Промо-акции</li>
		  <li>Доставка курьером</li>
		 </ul>
		</div>
	 <div class="rasprostr"><p>Полиграфия</p></div>
	 <div id="image3"></div>
	  <div class="punkt">
		 <ul>
		  <li>Печать всех видов</li>
		  <li>Дизайн,верстка</li>
		  <li>По офисам</li>
		 </ul>
		</div>
	 <div class="rasprostr"><p>Реклама и пресса</p></div>
	   <div id="image4"></div>
	     <div class="punkt">
		 <ul>
		  <li>Реклама в газете</li>
		  <li>Недвижимость</li>
		  <li>Баннеры</li>
		 </ul>
		</div>
	  </div>
	 </div>
        <div id="center">
            <h1>Главная страница</h1>
            <p>
            uam vel lobortis neque, quis accumsan risus. Morbi a sem convallis enim adipiscing laoreet ac ut magna. Proin pulvinar malesuada blandit.
            </p>
        </div>
    </div>
    <hr>
    <div id="footer">   
    <p>footer</p>
    </div>
</div> 
</body>
 
</html>

CSS

Код:

fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
html,body {
    margin:0;
    padding:0;
    min-width:960px;
}
#wrapper {
    margin:0 auto;
}
 
#header {
    width:100%;
	height: 360px;
	background:url('../../images/123.jpg') no-repeat;
	position:relative;
    z-index: 1;
}

#gorod {
width:100%;
height: 360px;
background:url('../../images/gorod1.jpg') no-repeat;
z-index: 2; 
position:absolute;
top:50%;
left:50%;
margin-top:-180px;
margin-left:-480px;
}
 
#logo {
position:absolute;
z-index:2;
font-style:italic;
font-size:36px;
font-family: Trebuchet MS;
text-shadow: 4px 1px 2px white ;
left:330px;
top:40px;
}

#sidebar {
padding:40px 20px 300px 610px;
z-index:2;
}
 
 #sidebar ul li {
font-family:Trebuchet MS;
font-size:100%;
list-style: none;
width:400px;
display: inline;
font-style:italic;
text-decoration:underline;
z-index:2;
position:relative;
padding-left:5px;
}

a {
color:black;
z-index:2;
}
 
#contact  {
font-family:Trebuchet MS;
font-style:italic;
font-size:20px;
font-weight: bold;
position:absolute;
right:270px;
top:110px;
z-index:2;
}

#telef {
font-family:Trebuchet MS;
font-style:italic;
font-weight: bold;
font-size:20px;
position:absolute;
right:270px;
top:140px;
line-height:10px;
z-index:2;
}

#adres {
font-family:Trebuchet MS;
font-style:italic;
font-size:100%;
position:absolute;
font-weight: bold;
right:270px;
top:170px;
z-index:2;
line-height:5px

}

#ulic {
color:red;	` 
 }
 
 
 
#content {
    width:100%;
}
 
#leftBar {
    float:left;
    width:300px;
	height:800px;
	margin:0px 500px 0px 200px;
    min-height:300px;
    padding:10px;
    border-right:1px solid #ddd;
	background:yellow;
}
 
#vidi {
font:italic bold 20px Trebuchet MS;
display: inline;
text-transform: uppercase;
text-align:center;
}



.rasprostr {
font:italic bold 20px Trebuchet MS;
display: inline;
text-transform: uppercase;
text-align:center;
}

.punkt {
font:italic 18px Trebuchet MS;
text-decoration:underline;
text-align:center;
line-height:30px
}

#image {
width: 300px;
height: 700px;
position:absolute;
left:260px;
top:440px;
background:url('../../images/4.jpg') no-repeat;
}

#image2 {
width: 300px;
height: 700px;
position:absolute;
left:260px;
top:620px;
background:url('../../images/4.jpg') no-repeat;
}

#image3 {
width: 300px;
height: 700px;
position:absolute;
left:260px;
top:833px;
background:url('../../images/4.jpg') no-repeat;
}

 #image4 {
width: 300px;
height: 700px;
position:absolute;
left:260px;
top:990px;
background:url('../../images/4.jpg') no-repeat;
}
 
#center {
    width:500px;
    padding:10px;
    background:red;
	border-right:1px solid #ddd;
}
 
 h1 {
 font-family:Trebuchet MS;
font-style:italic;
 }
 

h1,h2,h3 {
    text-align:center;
}

Прошу прощения за кривой код.

Metandrostenalon · 06.04.2014, 21:55

Цитата:

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

что я не так делаю?

Зачем такой margin у leftBar?

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Конвертация single float в double float	kypck	Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM	10	23.04.2012 00:22
margin-left, float: left	segail	HTML и CSS	1	01.02.2012 22:56
Ошибка типа cannot convert `float*' to `float' for argument `1' ...	Trackman	Помощь студентам	3	23.05.2011 17:09
IE8. не работает padding-left, margine-left	dimonnnn	HTML и CSS	7	13.08.2010 19:33
FLOAT TO TRING И STRING TO FLOAT!!	MelKiY_bad	C++ Builder	6	07.05.2010 14:31