wdc wdc - 5 months ago 42
AngularJS Question

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>




Answer Source
  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>