CODEWITHSUNDEEP
htmlcsscss-float
Flake
Flake

Reputation: 1406

Float in CSS causing element to move down

<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.

Upvotes: 2

Views: 6599

Answers (4)

Marc Audet
Marc Audet

Reputation: 46775

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>

Upvotes: 1

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

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
}

Upvotes: 0

user3386779
user3386779

Reputation: 7175

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

Upvotes: 0

Jazib Bashir
Jazib Bashir

Reputation: 503

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

Upvotes: 0

Related Questions