Updated layout

Signed-off-by: Andreas Jacobsen <andreasjacobsen93@gmail.com>

settings/css/settings.css

@@ -25,9 +25,15 @@ input#pass1, input#pass2, input#passwordbutton {
 }
 
 .personal-settings-password-box {
-	margin-bottom: 80px;
+	margin-top: 20px;
+	margin-bottom: 136px;
 }
 
+.personal-settings-group-box,
+.personal-settings-language-box {
+	margin-top: 20px;
+ }
+
 .icon-federation-menu {
 	width: 44px;
 	margin: -6px;
@@ -102,10 +108,6 @@ input#pass1, input#pass2, input#passwordbutton {
 	height: 33px;
 }
 
-#language {
-	padding-bottom: 0;
-}
-
 .jcrop-holder {
 	z-index: 500;
 }
@@ -148,13 +150,14 @@ input#pass1, input#pass2, input#passwordbutton {
 	float: right;
 }
 
-#personal-settings-avatar-container {
+#personal-settings-avatar-container,
+#personal-settings-group-container {
 	float: left;
 }
 
 .profile-settings-container {
-	top: 20px;
 	position: relative;
+	margin-left: 215px;
 	max-width: 600px;
 }
 
@@ -168,7 +171,8 @@ input#pass1, input#pass2, input#passwordbutton {
 	clear: both;
 }
 
-.personal-settings-container > div {
+.personal-settings-container > div,
+.profile-settings-container > div {
 	float: left;
 	height: 100px;
 	min-width: 300px;
@@ -179,11 +183,6 @@ input#pass1, input#pass2, input#passwordbutton {
 	min-width: 200px;
 }
 
-.personal-settings-group-box, .personal-settings-language-box {
-    margin-top: -20px;
-    margin-bottom: -20px;
-}
-
 #avatarform > h2,
 .personal-settings-container > div h2 {
 	position: relative;
@@ -281,6 +280,7 @@ input#pass1, input#pass2, input#passwordbutton {
 #lostpassword,
 #groups {
 	display: inline-block;
+	margin-bottom: 10px;
 	padding-bottom: 0;
 	padding-right: 0;
 	min-width: 60%;
@@ -294,11 +294,15 @@ input#pass1, input#pass2, input#passwordbutton {
 
 #groups {
 	overflow-wrap: break-word;
-	max-width: 75%;
-	display: block;;
+	width: 125px;
+	display: block;
 	clear: both;
 }
 
+#groups-groups {
+	padding-top: 5px;
+}
+
 .clientsbox img {
 	height: 60px;
 }

settings/templates/personal.php

@@ -252,16 +252,21 @@
 	</div>
 	<?php } ?>
 </div>
-<div class="profile-settings-container">
+
+<div class="clear"></div>
+
+<div id="personal-settings-group-container">
 	<div class="personal-settings-setting-box personal-settings-group-box">
 		<div id="groups" class="section">
 			<h2><?php p($l->t('Groups')); ?></h2>
 			<p><?php p($l->t('You are member of the following groups:')); ?></p>
-			<p>
+			<p id="groups-groups">
 			<strong><?php p(implode(', ', $_['groups'])); ?></strong>
 			</p>
 		</div>
 	</div>
+</div>
+<div class="profile-settings-container">
 	<div class="personal-settings-setting-box personal-settings-language-box">
 		<?php if (isset($_['activelanguage'])) { ?>
 		<form id="language" class="section">