CODEWITHSUNDEEP
htmlcss
user3365404
user3365404

Reputation: 61

Element move down when text is added

I have an issue with elements. When I type any text in any place inside search_groups_wrapper, the right colum fall to the bottom. If there is no text, it is displayed as should be. What is the problem?

Here is jsfiddle - http://jsfiddle.net/csYU8/ with problem. Remove 'Here is some text' and element will move top.

Upvotes: 1

Views: 328

Answers (3)

Kheema Pandey
Kheema Pandey

Reputation: 10265

instead of using display:inline-block you should use float:left property. and to clear the float you can use clear:left on parent div.

or you want to still use the display: inline-block.

#search_groups_wrapper
{
display:inline-block;
height:100%;
margin:0;
padding:0;
border:0;
width:70%;
position:relative;
top:0;
vertical-align:top; /*I've just added this line*/
}

Here is the another working Demo . http://jsfiddle.net/kheema/csYU8/7/

#search_groups_wrapper {
    border: 0 none;
    display: inline-block; /*Better Remove this line and add float left*/
    float: left;
    height: 100%;
    margin: 0;
    position: relative;
    top: 0;
    width: 70%;
}

#existing_groups_wrapper {
    border: 0 none;
    display: inline-block; /*Better Remove this line and add float left*/
    float: left;
    height: 100%;
    margin: 0;
    width: 30%;
}

Here is a Demo. http://jsfiddle.net/csYU8/

Upvotes: 1

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

I can't find what causes this but I found a solution:

Just add the styles below to your #search_wrapper

top:0;
position:absolute;

CSS

#search_wrapper
{
    height:50px;
    width:100%;
    top:0;
    position:absolute;
}

DEMO

Upvotes: 3

Fr0zenFyr
Fr0zenFyr

Reputation: 1929

Add align: left to your search_groups_wrapper and existing_groups_wrapper.

FIDDLE DEMO

Upvotes: 1

Related Questions