Pomocy! Problem w css!

pytanie zadane 1 stycznia 2016 w HTML i CSS przez xSvilen Mądrala (5,740 p.)

Cześć! Chyba dosyć banalna sprawa dla kogoś doświadczonego, otóż dlaczego div po prawej nie chce wskoczyć do góry? Link do zdj: http://zapodaj.net/670c47c1a5d7c.jpg.html

HTML:

<div class="socialLeftHeader">
				<div class="blockSocial">
					<div class="symulacjaSocial">30x30</div>
					<div class="textSocial">Wejdź na FB!</div>
				</div>
				<div class="blockSocial">
					<div class="symulacjaSocial">30x30</div>
					<div class="textSocial">Wejdź na FB!</div>
				</div>
			</div>
			<center>
			<div class="logoPage1Div">				
					<img src="images/logo.png" class="logoPage1">
			</div>
			</center>
			<div class="socialRightHeader">
				<center>
					<div class="blockSocial">
						<div class="symulacjaSocial">30x30</div>
						<div class="textSocial">Wejdź na FB!</div>
					</div>
					<div class="blockSocial">
						<div class="symulacjaSocial">30x30</div>
						<div class="textSocial">Wejdź na FB!</div>
					</div>
				</center>
			</div>

CSS:

header{
	background-color: rgba(0, 0, 0, 0.3);
	width: auto;
	max-width: 100%;
	height: auto;
}
#container{
	width: 70%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	background-color: rgba(255, 0, 0, 0.3);
}
.logoPage1{
	width: 100%;
}
.socialLeftHeader{
	width: 22%;
	display: block;
	float: left;
	height: auto;
	display: block;
	background-color: #fff;
}
.logoPage1Div{
	width: 50%;
	height: auto;
	margin-left: 0;
	margin-right: 0;
	background-color: #000;	
}
.socialRightHeader{
	width: 22%;
	display: block;
	float: right;
	height: auto;
	display: block;
	background-color: #fff;
}
.blockSocial{
	width: 40%;
	height: 100px;
	background-color: #fff;
	display: inline-block;
	
}

3 odpowiedzi

odpowiedź 1 stycznia 2016 przez Konrad Nabożny Stary wyjadacz (13,460 p.)

To jest całe body w HTML? Mam nadzieję że nie.

komentarz 2 stycznia 2016 przez xSvilen Mądrala (5,740 p.)

<body>
	<div id="container">
	
		<header>
		<center>
			<div class="socialLeftHeader">
				<div class="blockSocial">
					<div class="symulacjaSocial">30x30</div>
					<div class="textSocial">Wejdź na FB!</div>
				</div>
				<div class="blockSocial">
					<div class="symulacjaSocial">30x30</div>
					<div class="textSocial">Wejdź na FB!</div>
				</div>
			</div>
			<center>
			<div class="logoPage1Div">				
					<img src="images/logo.png" class="logoPage1">
			</div>
			</center>
			<div class="socialRightHeader">
				<center>
					<div class="blockSocial">
						<div class="symulacjaSocial">30x30</div>
						<div class="textSocial">Wejdź na FB!</div>
					</div>
					<div class="blockSocial">
						<div class="symulacjaSocial">30x30</div>
						<div class="textSocial">Wejdź na FB!</div>
					</div>
				</center>
			</div>
				<br>
			<nav>
				<ul>
					<li>O mnie</li>
					<li>Mój sprzęt
						<ul>
							<li>Hardware</li>
							<li>Software</li>
						</ul>
					</li>
					<li>FAQ</li>
					<li>Kontakt</li>
				</ul>
			</nav>
		</center>	
		</header>
		
		<content>
		iugyugugui
		</content>	
		
		<footer>
		
		</footer>
		
	</div>
</body>

odpowiedź 2 stycznia 2016 przez robert9620 Stary wyjadacz (11,640 p.)

Nie używaj float: left i float: right na zmiane. Zdecyduj się na jedną stronę (ja zawsze daje float: left) i wtedy jak wszystkie będą miały float ustawiony na left będą obok siebie i żaden nie spadnie (to co jest pierwsze w kodzie będzie najbardziej po lewej, kolejny element w kodzie będzie bardziej na prawo i kolejny będzie jeszcze bardziej na prawo). Jeżeli jednak chcesz zachować między nimi odstęp to wystarczy dodać margin: right.

Ewentualnie możesz dać position: absolute i right:0px;