Problem z ułożeniem 2 divów obok siebie

pytanie zadane 12 stycznia 2016 w HTML i CSS przez Kuba Bielawski Obywatel (1,760 p.)
zmienione kategorie 12 stycznia 2016 przez Arkadiusz Waluk

cześć. Mam problem z ułożeniem 2divów obok siebie. Mianowicie chodzi o Fotka i opis. Oto kod:

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> Opis strony</title>
		<link rel="Stylesheet" href="style.css" type="text/css" />
	</head>
	<body>
		<div id="strona">
			<div id="pasekg">

			</div>

			<nav>
				<ul>
					<li>
						<a href="#">Najnowsze</a>
						<a href="#">Wyniki</a>
						<a href="#">Kontakt</a>
						<a href="#">Pomoc</a>
						<a href="#">Donate</a>
					</i>
				</ul>
			</nav>
			<div id="fotka">
			<img src="avatar.png" width:"10px" height:"20px">
			</div>
			<div id="opis">
				<h1>Krótkie informacje o mnie:</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum sollicitudin libero, eget dapibus quam imperdiet et.</p></br><p> Nullam lacinia convallis odio, eu iaculis mauris sagittis in. Nulla pulvinar ante quis placerat malesuada</p></br><p>Miłego dnia!</p>
			</div>
			<div style="clear:both;"></div>
		</div>
		<div id="footer">Strona www.XXXXXX.pl wykonana przez Vizooo. Wszelkie prawa zastrzeżone.</div>
	</body>
</html>

body
{
	margin: 0 !important;
	background-color: #191919;
	width: 100%;
}
#pasekg
{
	width: 100%;
	height: 120px;
	text-align: center;
	color: white;
	padding: 0;
}
nav ul
{
	background-color: #46A0D5;
	list-style: none;
	padding: 0;
	text-align: center;
}
nav ul li 
{
	font-size: 120%;
	padding: 15px;
}
nav ul li a:hover
{
	background-color: #fbfbfb;
	color: #46A0D5;
	border-radius: 15px;
}
nav ul li a
{
	color: #fbfbfb;
	text-decoration: none;
	padding: 11px;
}
#fotka
{
	width: 20%;
	height: 300px;
	margin: 0 2.5%;
	border: 1px solid red;
	float: left;
}
#fotka img
{
	width: 100%;
}
#opis
{
	margin: 8px 5px 8px 5px;
	border-radius: 6px;
	text-align: center;
	width: 30%;
	margin: 0 auto;
	float: left;
	border-left: 1px dotted white;
}
#opis h1
{
	font-size: 44px;
	color: #46A0D5;
	padding-bottom: 15px;
}
#opis p
{
	font-size: 17px;
	color: white;
	margin: 0 auto;
}
#footer
{	
	clear:both;
	border-top: 1px solid gray; 
	height: 40px;
		line-height: 40px;
		vertical-align: middle;
	color: white;
	clear: both;
	width: 100%;
	text-align: center;
	position: absolute;
	font-size: 12px;
	margin-top: 70px;
	
}

2 odpowiedzi

odpowiedź 12 stycznia 2016 przez mbabane Szeryf (79,280 p.)

a na czym polega ten problem?

bo u mnie wyswietla sie to tak:

http://zapodaj.net/images/d2a80c292c10e.png

komentarz 12 stycznia 2016 przez Radfler VIP (101,030 p.)

No właśnie! Poza tym ktoś chyba pomylił dział...

komentarz 12 stycznia 2016 przez Kuba Bielawski Obywatel (1,760 p.)

Dobra. Już robię tego diva od nowa.

Mam diva pasekd który ma 100% width. Chciałbym zrobić w środku dwa divy : fotka i opis

każdy po 50% dostępnej szerokości. Co chwile próbuje i mam problem żeby je ułożyć obok siebie/

coś w tym guście:

FOTKA | OPIS

komentarz 12 stycznia 2016 przez mbabane Szeryf (79,280 p.)

ja bym zrobił tak że wsadził bym obrazek i opis do jednego diva, i potem kombinował z jego ustawieniem.

A żeby wyśrodkować to chyba będzie można dać margin-left: auto; margin-right: auto;

komentarz 12 stycznia 2016 przez Czort Nałogowiec (32,500 p.)

Aby border 1px nie był uwzględniany w szerokości do obydwu dodaj box-sizing:border-box; W divie fotka ustawiasz lewy i prawy margines na 2.5% czyli żeby całość zajmowała 50 musisz odjąć te procenty.

Gotowiec: https://jsfiddle.net/Lpz1jjej/