CODEWITHSUNDEEP
htmlcssangularjs
Gavrilo Adamovic
Gavrilo Adamovic

Reputation: 2795

Placing div next to each other

I am having div tables like in the example.

There is ng-repeat angularjs which generates smaller divs inside one big wrapper div. And all that is centered. What I want is to place one smaller div on the right side of this wrapper_main div, with wrapper_main div still being in the center. I tried adding display:inline-block and nothing happened. float:left moved everything to the left which isn't what I want.

/* Styles go here */

div.pomocni_profil {
	margin: auto;
	width: 50%;
	border: solid chocolate medium;
	border-radius: 5%;
	display: inline-block;
}

div.pomocni_profil p{
	color: black;
	font-size: 14;
}

div.pratimPratioci {
	width: 200px;
	height: 500px;
	border: solid chocolate medium;
	display: inline-block;
	vertical-align: top;
}

div.wrapper_profil_glavni {
	height: 100%;
	width: 50%;
	margin: auto;
	display: inline-block;
	border: solid chocolate medium;

}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
<center>
<div class="wrapper_profil_glavni" >
<div class="aktivnosti_glavni" ng-repeat="aktivnost in aktivnosti">
		<div class="pomocni_profil">
		<center>
			<p class="naslov">{{aktivnost.aktivnost.naslov}} </p>
			<p><img alt="{{aktivnost.korisnik.username}}" ng-src="/trcanje/services/rest/profilna/{{aktivnost.korisnik.username}}?imeSlike={{aktivnost.korisnik.slika}}" height="50px"> </img> </p><!-- aktivnost.slika je slika korisnika koji je obavio aktivnost -->
			<p><a href="#" ng-click = "otvoriProfil(aktivnost.korisnik.username)" >{{aktivnost.korisnik.username}} </a></p>
			<br />
			<!-- TODO: da pise ime i prezime -->
			<p class="datum">{{aktivnost.aktivnost.datumFormatiran}} </p>
			<p>
			{{aktivnost.aktivnost.tempo}}/km  {{aktivnost.aktivnost.distanca}} km</p>
			<p>Vreme: {{aktivnost.aktivnost.trajanje}}</p>
			<br />
			<table><tr><th><input type="image" src="${pageContext.request.contextPath}/slike/lajk.png" height="25px" ng-click="lajkuj(ulogovaniKorisnik.username, aktivnost.aktivnost.id);"/></th><th>{{aktivnost.brojLajkova}}</th></tr></table>
		</center>
		</div>
		<br/><br/>
	</div>
		<div ng-if="(aktivnosti.length < ukupanBrojAktivnosti) && aktivnosti.length > 0"><center><a href="#!" ng-click="ucitajJos('${userDetails.username }')">Ucitaj jos</a></center></div>
	<br/>
</div>
</center>
  </body>

<div class = "pratimPratioci">

</div>

</html>

Upvotes: 1

Views: 109

Answers (1)

Saravanan I
Saravanan I

Reputation: 1229

  1. You can Make pratimPratioci div position absolute and move it to top right. Or
  2. Place the pratimPratioci div before center div in html and style it to float:left

/* Styles go here */

div.pomocni_profil {
	margin: auto;
	width: 50%;
	border: solid chocolate medium;
	border-radius: 5%;
	display: inline-block;
}

div.pomocni_profil p{
	color: black;
	font-size: 14;
}

div.pratimPratioci {
	width: 200px;
	height: 500px;
	border: solid chocolate medium;
	display: inline-block;
	vertical-align: top;
      position: absolute;
    top: 0;
    right: 0;
}

div.wrapper_profil_glavni {
	height: 100%;
	width: 50%;
	margin: auto;
	display: inline-block;
	border: solid chocolate medium;

}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
<center>
<div class="wrapper_profil_glavni" >
<div class="aktivnosti_glavni" ng-repeat="aktivnost in aktivnosti">
		<div class="pomocni_profil">
		<center>
			<p class="naslov">{{aktivnost.aktivnost.naslov}} </p>
			<p><img alt="{{aktivnost.korisnik.username}}" ng-src="/trcanje/services/rest/profilna/{{aktivnost.korisnik.username}}?imeSlike={{aktivnost.korisnik.slika}}" height="50px"> </img> </p><!-- aktivnost.slika je slika korisnika koji je obavio aktivnost -->
			<p><a href="#" ng-click = "otvoriProfil(aktivnost.korisnik.username)" >{{aktivnost.korisnik.username}} </a></p>
			<br />
			<!-- TODO: da pise ime i prezime -->
			<p class="datum">{{aktivnost.aktivnost.datumFormatiran}} </p>
			<p>
			{{aktivnost.aktivnost.tempo}}/km  {{aktivnost.aktivnost.distanca}} km</p>
			<p>Vreme: {{aktivnost.aktivnost.trajanje}}</p>
			<br />
			<table><tr><th><input type="image" src="${pageContext.request.contextPath}/slike/lajk.png" height="25px" ng-click="lajkuj(ulogovaniKorisnik.username, aktivnost.aktivnost.id);"/></th><th>{{aktivnost.brojLajkova}}</th></tr></table>
		</center>
		</div>
		<br/><br/>
	</div>
		<div ng-if="(aktivnosti.length < ukupanBrojAktivnosti) && aktivnosti.length > 0"><center><a href="#!" ng-click="ucitajJos('${userDetails.username }')">Ucitaj jos</a></center></div>
	<br/>
</div>
</center>
  </body>

<div class = "pratimPratioci">

</div>

</html>

Upvotes: 3

Related Questions