Float in CSS causing element to move down

Question

<html>
<head>
    <title>My Play Store</title>
    <style type="text/css">
    body{
    margin:0;
    }

    #container{
    min-width:1080px;
    }

    #upperbar{
    background-color:#F1F1F1;
    height:60px;
    width:100%;
    }

    #logobardiv{
    margin:10px 20px 10px 30px;
    float:LEFT;
    }

    #logo{
    height:39px;
    width:183px;
    }

    #searchbardiv{
    float:left;
    padding:15px 0px 15px 10px;
    }

    #searchbar{
    height:28px;
    width:545px;
    font-size:1em;
    }

    </style>
</head>
<body>
    <div class="container">
        <div id="upperbar">
            <div id="logobardiv">
                <img id="logo" src="images/logo.png"/>
            </div>
            <div id="searchbardiv">
                <input id="searchbar" type="text" placeholder="Search"/>
            </div>
        </div>
    </div>
</body>

In the above page that I am trying to make,the "searchbardiv" tends to move below "logobardiv" when I reduce the size of the browser window.

I just want want the two divs to be in the same line.I tried using "float:left",but it is not giving the required result.

I wanted the size of searchbar to be the same,no matter what screen size. — Flake
– Flake, Commented Apr 1, 2015 at 11:29

Marc Audet · Accepted Answer · 2015-04-01 10:55:04Z

1

Instead of using floats, try using display: inline-block for the two child elements and white-space: nowrap to keep them both on the same line.

Apply display: inline-block to both #logobardiv and #searchbardiv and apply vertical-align: middle (or other value as needed) to #logobardiv to take care of any vertical alignment issues.

Finally, apply white-space: nowrap to the #upperbar to keep the two child elements on the same line.

Note that for smaller enough screens, you could get horizontal scrolling. To fix this, you need to make a design decision to handle the situation. You could make the search input width smaller or the logo smaller or both, perhaps by using % widths instead to make them responsive. You have a few options available to solve the problem.

body {
  margin: 0;
}
#container {
  min-width: 1080px;
}
#upperbar {
  background-color: #F1F1F1;
  height: 60px;
  width: 100%;
  white-space: nowrap;
}
#logobardiv {
  margin: 10px 20px 10px 30px;
  display: inline-block;
  vertical-align: middle;
}
#logo {
  height: 39px;
  width: 183px;
}
#searchbardiv {
  display: inline-block;
  padding: 15px 0px 15px 10px;
}
#searchbar {
  height: 28px;
  width: 545px;
  font-size: 1em;
}

<div class="container">
  <div id="upperbar">
    <div id="logobardiv">
      <img id="logo" src="http://placehold.it/183/39" />
    </div>
    <div id="searchbardiv">
      <input id="searchbar" type="text" placeholder="Search" />
    </div>
  </div>
</div>

edited Apr 1, 2015 at 10:55

answered Apr 1, 2015 at 10:49

Marc Audet

47k11 gold badges68 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Flake Over a year ago

I was trying to create a replica of play store for practice.And it seems your solution is perfect one.Just the way I wanted.

Jazib Bashir · Accepted Answer · 2015-04-01 10:42:27Z

0

You Give your search bar width 545px try to reduce this when on small screen use media query: e.g

@media(max-width:768px) {
     #searchbar{
      width:200px;
    }

Hope this helps

answered Apr 1, 2015 at 10:42

Jazib Bashir

5035 silver badges19 bronze badges

Comments

user3386779 · Accepted Answer · 2015-04-01 10:44:36Z

0

search bar size is too long enough so it is displayed in next line.Set the logo size and search bar width in %.

  width:70%;

Fiddle

answered Apr 1, 2015 at 10:44

user3386779

7,26321 gold badges73 silver badges143 bronze badges

Comments

Ali Sheikhpour · Accepted Answer · 2015-04-01 10:49:43Z

0

solution 1: use % instead of pixel for width if you want divs to be flexible e.g:

  #searchbar{
    height:28px;
    width:80%;
    font-size:1em;
    }

solution 2: if you don't want the divs to be resized with screen, set them as table cell:

  #upperbar{
/* your current styles here */
display:table;
    }

  #logobardiv{
/* your current styles here */
display:table-cell
    }


#searchbardiv{
/* your current styles here */
display:table-cell
}

answered Apr 1, 2015 at 10:49

Ali Sheikhpour

11.4k5 gold badges53 silver badges100 bronze badges

Collectives™ on Stack Overflow

Float in CSS causing element to move down

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related