# Displaced user-card, need some help with CSS
**URL:** https://meta.discourse.org/t/displaced-user-card-need-some-help-with-css/95006
**Category:** Support
**Created:** [August 17, 2018, 4:01pm UTC](https://meta.discourse.org/t/displaced-user-card-need-some-help-with-css/95006 "2018-08-17T16:01:44Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@Pravi](https://meta.discourse.org/u/Pravi)
#### Post date: [August 17, 2018, 4:01pm UTC](https://meta.discourse.org/t/displaced-user-card-need-some-help-with-css/95006/1 "2018-08-17T16:01:44Z")
Hello guys,
The user-card on my site is displaced very badly in such a way that it is not visible entirely. I have made a lot of CSS changes on my site, previously. I don’t how to fix it, need some help from CSS experts.
> **[BG大游·(中国集团)官网](https://engineersasylum.com/)**
>
> 官方权威认可 ☀️可信指数高 ✅绿色安全标准
---
### Author:  [@gege](https://meta.discourse.org/u/gege)
#### Post date: [August 17, 2018, 6:07pm UTC](https://meta.discourse.org/t/displaced-user-card-need-some-help-with-css/95006/2 "2018-08-17T18:07:05Z")
Hello Pravi,
i think your user-card style is good. Instead of fixing user-card i prefer to fix the `#main-outlet` of your site.
For example:
```plaintext
#main {
// width: 1110px;
// background-color: #ffffff;
margin: 0 auto;
padding: 0 25px 25px;
}
#main-outlet {
padding-top: 70px;
padding-left: 25px;
padding-right: 25px;
background-color: whitesmoke;
}
```
you can give it a try. I hope that this tiny code can help you out. 👨🔧
---
### Author:  [@Pravi](https://meta.discourse.org/u/Pravi)
#### Post date: [August 18, 2018, 11:12am UTC](https://meta.discourse.org/t/displaced-user-card-need-some-help-with-css/95006/3 "2018-08-18T11:12:15Z")
Thanks for the replay. I made the following changes as mentioned, but it didn’t get as well as expected. See the below images after making the above mentioned change.
**See the current custom CSS without making any new change.**
```
@import url('https://fonts.googleapis.com/css?family=Redressed');
@import url('https://fonts.googleapis.com/css?family=Philosopher');
header #site-text-logo {
font-size: 26px;
//font-style: italic;
font-family: 'Redressed', cursive;
color: #2471a3; //#5c998b;
position: relative;
top: -5px;
left: 25px;
filter: drop-shadow(1px 1px 1px #fff) drop-shadow(-1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff);
}
.d-header {
padding: 0;
height: 0;
background-color: #323433; // Header Background color
width: 100%;
padding-top: 0;
height: 48px;
box-shadow: none;
}
.d-header .wrap {
background-color: #fff;
max-width: 1144px;
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
}
#main-outlet {
padding-top: 70px;
}
/* lt. gray container around main content area */
#main {
width: 1110px;
background-color: #ffffff;
margin: 0 auto;
padding: 0 25px 25px;
}
.title-wrapper {
padding-bottom: 1px;
}
.extra-info-wrapper .topic-link {
font-family: 'Philosopher', sans-serif;
}
.extra-info-wrapper .badge-wrapper.bullet span.badge-category {
font-family: 'Philosopher', sans-serif;
font-size: 13px;
}
#topic-title h1 a {
font-family: 'Philosopher', sans-serif;
}
.badge-wrapper.bullet span.badge-category {
font-family: 'Philosopher', sans-serif;
}
.d-header-icons .badge-notification {
margin: 5px 0;
//background: #00AEEF;
}
.d-header .contents {
margin: 2px 0;
}
/* dark gray background in body */
body {
background-color: #323433;
//height: 100%;
}
html {
background-color: #323433;
}
/* set fixed container sizes */
div.full-width {
width: 1110px;
}
div.container {
width: 1110px;
}
.admin-content {
width: 1110px;
}
#user-menu {
width: 1110px;
}
.modal-outer-container {
width: 1110px;
}
/* keep reply control left justified */
#reply-control {
left: 0;
z-index: 999;
}
/* login button color tweak for consistency */
.btn-primary {
background-image: linear-gradient(to bottom, #00AEEF, #009EDA);
}
/* top nav & admin button colors */
.nav-pills li>a:hover { /* inactive button hover (lt. blue) */
color: #009EDA;
background-color: #CADCEF;
border-color: #BDBDBD;
}
.nav-pills li.active>a, .nav-pills li>a.active { /* active button static (dk. blue) */
border-color: #16617d;
background-color:#00AEEF;
background-image: linear-gradient(to bottom, #00AEEF, #009EDA);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.33);
}
.nav-pills li.active>a:hover, .nav-pills li>a.active:hover { /* active button hover (dk. blue) */
border-color: #16617d;
background-color:#00AEEF;
background-image:linear-gradient(to bottom, #00AEEF, #00B0F0);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.33),inset 0 -1px 2px rgba(0,0,0,0.2);
color: white;
}
/* side nav button colors (profile pages, etc) */
.nav-stacked li.active a, .nav-stacked li.active a:hover { /* active button static */
background-color: #CADCEF;
color: #333;
}
.nav-stacked .active .icon-chevron-right, .nav-stacked .active:hover .icon-chevron-right { /* arrow bg */
color: #333;
background-color: transparent;
text-shadow: none;
}
.nav-stacked li:hover .icon-chevron-right { /* button arrow hover */
color: #333;
}
/* topic list table styling */
#topic-list tbody tr:nth-child(even) {
background-color:#F0F0F0;
}
#main #topic-list th {
background-color:#E6E6E6;
}
```
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [August 18, 2018, 12:11pm UTC](https://meta.discourse.org/t/displaced-user-card-need-some-help-with-css/95006/4 "2018-08-18T12:11:09Z")
There’s a bit of a long story behind why this is happening in your theme and it is not only effecting user-cards but I’ll spare you the details unless you’re really interested.
The short version is that you need to add
```plaintext
#main {
position: static;
}
```
to your theme.
---
### Author:  [@Pravi](https://meta.discourse.org/u/Pravi)
#### Post date: [August 18, 2018, 12:35pm UTC](https://meta.discourse.org/t/displaced-user-card-need-some-help-with-css/95006/5 "2018-08-18T12:35:47Z")
Thanks, Joe. Now everything is fine.
> [@Johani](#):
>
> There’s a bit of a long story behind why this is happening in your theme and it is not only effecting user-cards but I’ll spare you the details unless you’re really interested.
I don’t have any background in CSS. I am not sure if I am going to understand in depth CSS, but anyway I am interested.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [August 18, 2018, 1:26pm UTC](https://meta.discourse.org/t/displaced-user-card-need-some-help-with-css/95006/6 "2018-08-18T13:26:02Z")
First a bit about `position: absolute`
> The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block). Its final position is determined by the values of `top` , `right` , `bottom` , and `left` .
[read more](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute)
User-cards, group-cards and a few other elements in Discourse have `position: absolute` with the nearest positioned ancestor for them - in the case of native Discourse UI - being `#main` which by default has
```plaintext
#main {
position: relative
}
```
One key difference about them is that the `top` and `left` values are set dynamically with JS - so that they show up where they are supposed to show up.
Examples:
Your user-card has these values
and the user-card for the avatar right below yours has these values
Note the higher `top` value since the second one is lower.
As I mentioned above, these value are relative to the nearest positioned ancestor - `#main`
So in the case of your use-card it would be
~341px from the top of `#main` and ~1490px from its left side.
The `#main` element in Discourse extends the full width of the screen.
Your theme changes that to add a visual effect. But you also use `margin: 0 auto` on it to centre it.
Something like this
```plaintext
#main {
width: 1110px;
}
```
Which creates this
and you fixed it by using
```plaintext
#main {
margin: 0 auto;
}
```
which creates this
however, this fix is not registered by the JS that calculates the `top` and `left` values for user-cards, group-cards etc. It assumes the `#main` element starts here
and so the values are based on that… and so going back to your use-card
`left: 1490px`
is based on that, however, it is still relative to `#main` and so when you pushed `#main` to the center with
```plaintext
#main {
margin: 0 auto;
}
```
You’re also pushing user-cards and other similar elements by the same amount because the JS that calculates their position is not aware of your change.
And so you get this
The CSS in my post above
```plaintext
#main {
position: static;
}
```
Makes it so that `#main` is no longer positioned. So going back to the `position: absolute`
> otherwise, it is placed relative to the initial [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block).
The containing block here is the `body` element and its left side is here
and so the JS values for `top` and `left` are accurate again and order is restored to the universe.
---
### Author:  [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [August 18, 2018, 2:47pm UTC](https://meta.discourse.org/t/displaced-user-card-need-some-help-with-css/95006/8 "2018-08-18T14:47:24Z")
😍
Your reply is better than everything else I’ve read online about CSS positioning 👏
---
### Author:  [@Pravi](https://meta.discourse.org/u/Pravi)
#### Post date: [August 18, 2018, 3:08pm UTC](https://meta.discourse.org/t/displaced-user-card-need-some-help-with-css/95006/9 "2018-08-18T15:08:36Z")
Thank you so much Joe!! You explaination is excellent.