BuddyPress.org

@recruitbk

The problem you’re having is with inappropriate css. Using negative `top` values for every individual element simply pulls the element upwards, out of its designated “space”, while leaving that space blank. For example: `edit-profile-right-column-vertical` has a negative top value of -1019px which leaves 1019px blank below it (where the element would normally appear had it not a negative top value).

A better layout would be to first remove all `position:relative` and `top` values from individual elements in your css. In your html, wrap each group of elements you want to display on the same line in a wrapper div (ex: div#name-wrap). Next, apply `display:inline-block` to each element within the wrapper div. To finish, simply adjust width, padding and margins to get everything nicely aligned. Example below:
`
#name-wrap {
width:100%;
}
#name-wrap #edit-profile-right-column-firstname, #name-wrap #edit-profile-right-column-middlename, #name-wrap #edit-profile-right-column-lastname {
display:inline-block;
width:30%;
margin-right:2%;
}
`

Hope this helps!