• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dwa divy obok siebie

Object Storage Arubacloud
0 głosów
1,245 wizyt
pytanie zadane 8 stycznia 2017 w HTML i CSS przez Daniel Kudyba Obywatel (1,260 p.)

Witam Wszystkich,

Tworzę stronę i mam problem. Podzieliłem całą zawartość div "content" na dwa divy "left-side" i "right-side", tylko nie wiem dlaczego div "right-side" wygląda na to, że jest pod divem :left-side" z prawej strony... 

 

<!DOCTYPE html>
<html lang="pl">
<head>
<link rel ="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="pl" lang="pl">
<link rel ="stylesheet" href="icons/css/facebook.css" type="text/css">


</head>


<body>
<header class="page-nav">
			<a href = "#" title = "Go back to homepage">
					<div id="logo-img"><img alt= "simple" src="logo.png" class="logo"></div>
			</a>
	<nav class="nav">
		<ul class="navigation-menu">
		
						<li><a href="#" title="Bieżace informacje"> Aktualności</a></li>
						<li><a href="#" title="Nasze produkty"> Produkty</a></li>
						<li><a href="#" title="Branże"> Branże</a></li>
						<li><a href="#" title="Branże"> Branże</a></li>
						<li><a href="#" title="Referencje"> Referencje</a></li>
						<li><a href="#" title="Kontakt  z Nami"> Kontakt </a></li>
						
		</ul>
		
					
			
	
	</nav>
	<input type="text" name="search" value="Search" class="input" >
	<div id="search"><i class="icon-search" title="Search"></i></div>
	<div style="clear: both"></div>

<main class="content">
	
	<div id="left-side">
			<ul class="side-menu">
								<li><a href="#" title="Menu">Menu</a></li>
								<li><a href="#" title="Bieżace informacje"> Aktualności</a></li>
								<li><a href="#" title="Branże"> Branże</a></li>
								<li><a href="#" title="Nasze produkty"> Produkty</a></li>
								<li><a href="#" title="Usługi"> Usługi</a></li>
								<li><a href="#" title="Referencje"> Referencje</a></li>
								<li><a href="#" title="Kontakt  z Nami"> Kontakt </a></li>
								<li><a href="#" title="Informacje o firmie"> O firmie</a></li>
								<li><a href="#" title="Branże"> Nagrody</a></li>
								<li><a href="#" title="Relacje inwestorskie"> Relacje inwestorskie</a></li>
								<li><a href="#" title="Partnerzy"> Partnerzy</a></li>
								<li><a href="#" title="Kariera"> Kariera</a></li>
				</ul>
		
		
				<div class ="fb"><i class="icon-facebook"></i></div>
				<div class ="i"><i class="icon-linkedin"></i></div>
	</div>
	
	<div id="right-side">
					<img title ="home" src="home.png" class="home"> 
					<h1 class="company"> O FIRMIE </h1>
					<div style="clear:both"></div>
					<article>
					<header>
					<h2>SIMPLE - z nami biznes jest prostszy! </h2>
					</header>

				<img title="image" src="image.jpg" class = "image">
				 
				<p>PONAD 24 LATA DOŚWIADCZENIA <p>
				<p>SIMPLE S.A. jest wiodącym w kraju producentem rozwiązań informatycznych do wspomagania zarządzania przedsiębiorstwami. Będąc producentem oprogramowania, dajemy pełną gwarancję dotyczącą jego działania oraz dostosowania do zmieniających się warunków biznesowych i przepisów prawa oraz szybkiej reakcji na zmieniające się potrzeby klientów.
				 </p>
				<p>PONAD 3 500 KLIENTÓW</p>
				<p>Działamy na polskim rynku producentów rozwiązań klasy ERP już od ponad 24 lat! Dostarczamy rozwiązania, które sprawdziły się w wielu zróżnicowanych branżach i doskonale znamy biznes naszych klientów. Nasza oferta dostosowana jest do potrzeb głównych sektorów polskiego rynku. Ze współpracy z nami skorzystało już blisko ponad 3,5 tysiąca firm.
				 </p>
				<p>PONAD 23 000 UŻYTKOWNIKÓW</p>
				<p>Nasze produkty zawsze charakteryzowały się udanym połączeniem: innowacyjności, szerokiej funkcjonalności, adaptowalności i skalowalności jak również dbałości o rozsądny budżet, dostosowany do możliwości naszych Klientów. Dlatego w 2010 roku liczba naszych użytkowników przekroczyła 25 tysiące
				</p>
				<p>NASI ODBIORCY</p>
				<p>Odbiorcami naszych rozwiązań są głównie firmy budowlane, przedsiębiorstwa produkcyjne, uczelnie wyższe, jednostki medyczne oraz firmy usługowe i handlowe. Widzimy i wspólnie wykorzystujemy możliwości jakie daje proces integracji Polski z Unią Europejską.
				</p>
				<p>ZINTEGROWANE ROZWIĄZANIA DLA KAŻDEJ BRANŻY </p>
				<p>SIMPLE posiada kompleksowe rozwiązania, dedykowane największym sektorom naszej gospodarki. W naszej ofercie znajdą Państwo rozwiązania dla firm o różnych profilach działalności (produkcyjnym, budowlanym, usługowym, handlowym), dla uczelni wyższych, jednostek medycznych, instytutów badawczych czy jednostek rządowych. 
				Nasze doświadczenia obejmują realizacje systemów dedykowanych pod indywidualne potrzeby klientów oraz integrację wszelkich rozwiązań wspomagających zarządzanie.
				 </p>
				<p>CERTYFIKATY I REKOMENDACJE</p>
				<p>SIMPLE S.A. posiada istotne na polskim rynku rekomendacje od Polskiego Towarzystwa Ekonomicznego oraz Stowarzyszenia Księgowych w Polsce, które potwierdzają, że oprogramowanie SIMPLE jest dostosowywane do zmieniających się polskich przepisów prawnych oraz wymagań Unii Europejskiej.  Ponadto SIMPLE S.A. wprowadziło i stosuje system zarządzania jakością ISO 90001:2008 w zakresie: projektowania, produkcji i wdrażania systemów informatycznych, a także  sprzedaż i instalacja sprzętu komputerowego oraz szkolenia.
				 </p>
				<p>Oprogramowanie SIMPLE zostało wyróżnione również: GAZELĄ BIZNESU, MEDALEM EUROPEJSKIM, statuetką TopBuilder oraz posiada status Microsoft Gold Certified Partner oraz BRE Partner Gold CERTIFICATE.  Osiągnięte wyniki pozwoliły zająć SIMPLE S.A. 30 miejsce w rankingu DIAMENTÓW FORBESA dla województwa mazowieckiego. Firma SIMPLE otrzymała również tytuł "Najlepszy dostawca IT dla przemysłu 2010 w kategorii ERP/MRP II (system polski)- producent".
				 </p>
				<p>ZAWSZE BLISKO CIEBIE</p>
				SIMPLE S.A. wraz z Partnerami prowadzi szeroko zakrojoną sprzedaż do Klientów na terenie całego kraju. Chcemy być jak najbliżej naszych klientów, dlatego wciąż dążymy do poszerzania sieci naszej sprzedaży.Unią Europejską.
				 </p>


					
					
					</article>
					
	</div>
	<div style="clear: both"></div>
	
	</main>




</header>

<footer>

</footer>
</body>






</html>
body{
	max-width:1366px;
	max-height:1920px;
	margin:0;
	padding:0;
	font-family: 'Roboto', sans-serif;
	color:#053f58;
}
@media (max-width:1300px){
	#search{
	display:none;
	}
	.input{
		display:none;
	}
}
.page-nav {
	width:100%;
	height:88px;
	background-color:#053f58;
}
.nav{
	float: left;
}
.nav .navigation-menu{
	list-style:none;
	text-decoration:none;
	margin-top:30px;

}
.page-nav .navigation-menu li {
	display:inline;
	text-decoration:none;
	color:white;
	padding-left:20px;
	list-style-type: none;
	
}
.page-nav .navigation-menu li a	{
	color: #FFFFFF;
	text-decoration:none;
	
}
#search{
	float:right;
	margin-right:31px;
}
#search .icon-search{
	
}

.input{
	float:left;
	margin-top:30px;
	margin-left: 100px;
	background-color:#7795a3;
}
.image{
	width:200px;
	height:auto;
}
.home{
	width:80px;
	height:auto;
	float:left;
}
.company
{
	float:left;
}


.icon-home{
	color:#02405b;
	width:50px;
	height: auto;
}


.logo{
	margin-left:200px;
	width:auto;
	height:120px;
	float: left;
	padding-top:20px;
	background-color:white;
	padding:10px;
	
}




#header-nav{
	width:100%;
	height:88px;
	background-color:#053f58;
}

.side-menu{
	margin-top:50px;
	width:200px;
	
}
.content{
    margin  : auto;
    border  : 1px solid blue;
    padding : 0px;
    width   : 1350px;
	
}
}

#left-side{
	width:450px;
	height:auto;
	margin:0;
	padding:0;

}
#right-side{
	float:right;
	width:900px;
	height:auto;
	margin:0;
	padding:0;

}

 

2 odpowiedzi

+1 głos
odpowiedź 8 stycznia 2017 przez dwadolary Gaduła (4,650 p.)
wybrane 8 stycznia 2017 przez Daniel Kudyba
 
Najlepsza
#left-side {
float: left;
}

Jedną z metod umieszczania dwóch divów obok siebie jest nadanie im obu float:left. Odległości korygujesz wtedy za pomocą właściwości margin-right itp. Polecam też zapoznać się z czymś takim jak flexbox, który pozwala zrezygnować z floatów i jest dużo wygodniejszy

Zostawiam link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

komentarz 8 stycznia 2017 przez Daniel Kudyba Obywatel (1,260 p.)
Zadziałało dopiero z display: flex;  Serdecznie dziękuje! ;)
+1 głos
odpowiedź 8 stycznia 2017 przez imklau Nałogowiec (42,090 p.)
Jak tworzysz stronę i oglądasz ją w przeglądarce, to kliknij tam prawym przyciskiem myszki i wybierz "Zbadaj zawartość".
Widać tam, że jest problem z szerokością diva "fb" i "i".

Mój błąd, bo usunięcie tych divów nic nie zmienia :D
Usunęłam: <div style="clear:both" > </div>
A do #left-side i #right-side dałam: display: inline-block;
Teraz działa :P
komentarz 8 stycznia 2017 przez Daniel Kudyba Obywatel (1,260 p.)
Ooo super, dziękuje ;)
komentarz 8 stycznia 2017 przez Daniel Kudyba Obywatel (1,260 p.)

Poprawiłem w ten sam sposób, tylko że u mnie coś nie działa? Jest jakiś błąd, którego nie widzę? 

 

<!DOCTYPE html>
<html lang="pl">
<head>
<link rel ="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="pl" lang="pl">
<link rel ="stylesheet" href="icons/css/facebook.css" type="text/css">


</head>


<body>
<header class="page-nav">
			<a href = "#" title = "Go back to homepage">
					<div id="logo-img"><img alt= "simple" src="logo.png" class="logo"></div>
			</a>
	<nav class="nav">
		<ul class="navigation-menu">
		
						<li><a href="#" title="Bieżace informacje"> Aktualności</a></li>
						<li><a href="#" title="Nasze produkty"> Produkty</a></li>
						<li><a href="#" title="Branże"> Branże</a></li>
						<li><a href="#" title="Branże"> Branże</a></li>
						<li><a href="#" title="Referencje"> Referencje</a></li>
						<li><a href="#" title="Kontakt  z Nami"> Kontakt </a></li>
						
		</ul>
		
					
			
	
	</nav>
	
	<input type="text" name="search" value="Search" class="input" >
	<div id="search"><i class="icon-search" title="Search"></i></div>
	
	<div style="clear: both"></div>

<main class="content">
	
	<div id="left-side">
			<ul class="side-menu">
								<li><a href="#" title="Menu">Menu</a></li>
								<li><a href="#" title="Bieżace informacje"> Aktualności</a></li>
								<li><a href="#" title="Branże"> Branże</a></li>
								<li><a href="#" title="Nasze produkty"> Produkty</a></li>
								<li><a href="#" title="Usługi"> Usługi</a></li>
								<li><a href="#" title="Referencje"> Referencje</a></li>
								<li><a href="#" title="Kontakt  z Nami"> Kontakt </a></li>
								<li><a href="#" title="Informacje o firmie"> O firmie</a></li>
								<li><a href="#" title="Branże"> Nagrody</a></li>
								<li><a href="#" title="Relacje inwestorskie"> Relacje inwestorskie</a></li>
								<li><a href="#" title="Partnerzy"> Partnerzy</a></li>
								<li><a href="#" title="Kariera"> Kariera</a></li>
				</ul>
		
		
				<div class ="fb"><i class="icon-facebook"></i></div>
				<div class ="i"><i class="icon-linkedin"></i></div>
	</div>
	
	<div id="right-side">
					<img title ="home" src="home.png" class="home"> 
					<h1 class="company"> O FIRMIE </h1>
					<div style="clear:both"></div>
					<article>
					<header>
					<h2>SIMPLE - z nami biznes jest prostszy! </h2>
					</header>

				<img title="image" src="image.jpg" class = "image">
				 
				<p>PONAD 24 LATA DOŚWIADCZENIA <p>
				<p>SIMPLE S.A. jest wiodącym w kraju producentem rozwiązań informatycznych do wspomagania zarządzania przedsiębiorstwami. Będąc producentem oprogramowania, dajemy pełną gwarancję dotyczącą jego działania oraz dostosowania do zmieniających się warunków biznesowych i przepisów prawa oraz szybkiej reakcji na zmieniające się potrzeby klientów.
				 </p>
				<p>PONAD 3 500 KLIENTÓW</p>
				<p>Działamy na polskim rynku producentów rozwiązań klasy ERP już od ponad 24 lat! Dostarczamy rozwiązania, które sprawdziły się w wielu zróżnicowanych branżach i doskonale znamy biznes naszych klientów. Nasza oferta dostosowana jest do potrzeb głównych sektorów polskiego rynku. Ze współpracy z nami skorzystało już blisko ponad 3,5 tysiąca firm.
				 </p>
				<p>PONAD 23 000 UŻYTKOWNIKÓW</p>
				<p>Nasze produkty zawsze charakteryzowały się udanym połączeniem: innowacyjności, szerokiej funkcjonalności, adaptowalności i skalowalności jak również dbałości o rozsądny budżet, dostosowany do możliwości naszych Klientów. Dlatego w 2010 roku liczba naszych użytkowników przekroczyła 25 tysiące
				</p>
				<p>NASI ODBIORCY</p>
				<p>Odbiorcami naszych rozwiązań są głównie firmy budowlane, przedsiębiorstwa produkcyjne, uczelnie wyższe, jednostki medyczne oraz firmy usługowe i handlowe. Widzimy i wspólnie wykorzystujemy możliwości jakie daje proces integracji Polski z Unią Europejską.
				</p>
				<p>ZINTEGROWANE ROZWIĄZANIA DLA KAŻDEJ BRANŻY </p>
				<p>SIMPLE posiada kompleksowe rozwiązania, dedykowane największym sektorom naszej gospodarki. W naszej ofercie znajdą Państwo rozwiązania dla firm o różnych profilach działalności (produkcyjnym, budowlanym, usługowym, handlowym), dla uczelni wyższych, jednostek medycznych, instytutów badawczych czy jednostek rządowych. 
				Nasze doświadczenia obejmują realizacje systemów dedykowanych pod indywidualne potrzeby klientów oraz integrację wszelkich rozwiązań wspomagających zarządzanie.
				 </p>
				<p>CERTYFIKATY I REKOMENDACJE</p>
				<p>SIMPLE S.A. posiada istotne na polskim rynku rekomendacje od Polskiego Towarzystwa Ekonomicznego oraz Stowarzyszenia Księgowych w Polsce, które potwierdzają, że oprogramowanie SIMPLE jest dostosowywane do zmieniających się polskich przepisów prawnych oraz wymagań Unii Europejskiej.  Ponadto SIMPLE S.A. wprowadziło i stosuje system zarządzania jakością ISO 90001:2008 w zakresie: projektowania, produkcji i wdrażania systemów informatycznych, a także  sprzedaż i instalacja sprzętu komputerowego oraz szkolenia.
				 </p>
				<p>Oprogramowanie SIMPLE zostało wyróżnione również: GAZELĄ BIZNESU, MEDALEM EUROPEJSKIM, statuetką TopBuilder oraz posiada status Microsoft Gold Certified Partner oraz BRE Partner Gold CERTIFICATE.  Osiągnięte wyniki pozwoliły zająć SIMPLE S.A. 30 miejsce w rankingu DIAMENTÓW FORBESA dla województwa mazowieckiego. Firma SIMPLE otrzymała również tytuł "Najlepszy dostawca IT dla przemysłu 2010 w kategorii ERP/MRP II (system polski)- producent".
				 </p>
				<p>ZAWSZE BLISKO CIEBIE</p>
				SIMPLE S.A. wraz z Partnerami prowadzi szeroko zakrojoną sprzedaż do Klientów na terenie całego kraju. Chcemy być jak najbliżej naszych klientów, dlatego wciąż dążymy do poszerzania sieci naszej sprzedaży.Unią Europejską.
				 </p>


					
					
					</article>
					
	</div>
	
	
	</main>




</header>

<footer>

</footer>
</body>






</html>
body{
	max-width:1366px;
	max-height:1920px;
	margin:0;
	padding:0;
	font-family: 'Roboto', sans-serif;
	color:#053f58;
}
@media (max-width:1300px){
	#search{
	display:none;
	}
	.input{
		display:none;
	}
}
.page-nav {
	width:100%;
	height:88px;
	background-color:#053f58;
}
.nav{
	float: left;
}
.nav .navigation-menu{
	list-style:none;
	text-decoration:none;
	margin-top:30px;

}
.page-nav .navigation-menu li {
	display:inline;
	text-decoration:none;
	color:white;
	padding-left:20px;
	list-style-type: none;
	
}
.page-nav .navigation-menu li a	{
	color: #FFFFFF;
	text-decoration:none;
	
}
#search{
	float:right;
	margin-right:31px;
}
#search .icon-search{
	
}

.input{
	float:left;
	margin-top:30px;
	margin-left: 100px;
	background-color:#7795a3;
}
.image{
	width:200px;
	height:auto;
}
.home{
	width:80px;
	height:auto;
	float:left;
}
.company
{
	float:left;
}


.icon-home{
	color:#02405b;
	width:50px;
	height: auto;
}


.logo{
	margin-left:200px;
	width:auto;
	height:120px;
	float: left;
	padding-top:20px;
	background-color:white;
	padding:10px;
	
}




#header-nav{
	width:100%;
	height:88px;
	background-color:#053f58;
}

.side-menu{
	margin-top:50px;
	width:200px;
	
}
.content{
    margin  : auto;
    width   : auto;
	
}

#left-side{
	float:left;
	width:450px;
	height:auto;
	margin:0;
	padding:0;
	display: inline-block;
}
#right-side{
	float:right;
	width:900px;
	height:auto;
	margin:0;
	padding:0;
	display: inline-block;

}

 

komentarz 8 stycznia 2017 przez imklau Nałogowiec (42,090 p.)
Popraw div .content ;)

Podobne pytania

0 głosów
2 odpowiedzi 829 wizyt
pytanie zadane 20 marca 2019 w HTML i CSS przez Fover3241 Nowicjusz (230 p.)
0 głosów
1 odpowiedź 1,054 wizyt
pytanie zadane 12 października 2018 w HTML i CSS przez fotoman Nowicjusz (120 p.)
0 głosów
3 odpowiedzi 347 wizyt

92,570 zapytań

141,422 odpowiedzi

319,644 komentarzy

61,959 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...