display: block css is not working in div element?

Question

here is my code:

I build search bar with some company brand name and few button on right, and search bar is in the middle.

I want that as we reduce to 786px width (of screen) then search bar (from "search by:" up to button "Go!" ) to move on to next line. but my code not working as expected. what is wrong?

Thank you in advance!

HTML

<!DOCTYPE html>
<html>
<head>
 <title>test5</title>
 <link rel="stylesheet" type="text/css" href="test5.css">
</head>
<body>

 <div class="center">
 <div class="qwert" id="abc1">
    <a id="Home" href="www.bookavanue.com"><b>Brand</b></a>
 </div>
 <div class="qwert" id="abc3">
    <button id="Register" type="button">Register</button>
    <button id="Login" type="button">Log In</button>
    <button id="Cart" type="button">Cart</button>
 </div>
 <div class="qwert" id="abc2">
    <div id="abcd1">
        <label for="Search">Search by:</label>
            <select value="Title">
                <option>option1</option>
                <option>option2</option>
                <option>option3</option>
            </select>
            <select value="All Books">
                <option>option1</option>
                <option>option2</option>
                <option>option3</option>
            </select> 
    </div>
    <div id="abcd2">
        <input id="Search" type="text" name="Search your book" 
        placeholder="Search Your Books...">
    </div>
    <div id="abcd3">
        <button id="Go" type="Search">Go!</button>
    </div>
</div>
</div>
</body>
</html>

css

#abc1{
 float: left;
 width: 110px;
}
#abc3{
 float: right;
 width: 185px;
 text-align: right;
}
#abc2{
 display: block;
 width: auto;
}
#abcd1{
 float: left;
 width: 220px;
}
#abcd3{
 float: right;
 width: 40px;
 text-align: right;
}
#abcd2{
 width: calc(100% - 270px);
 display: inline-block;
}
input{
 width: 100%;
}
@media screen and (min-width: 786px){
 #abc2{
    width: calc(100% - 295px);
    display: inline-block;
 }
}

Then change min-width: 786px to max-width: 768px before anything else. — Sleek Geek
– Sleek Geek, Commented Jun 27, 2017 at 18:08

Renzo Calla · Accepted Answer · 2017-06-27 18:09:20Z

1

add clear:both property ... on your abc2 element fiddle

  #abc2.qwert{
    clear:both;
  }

answered Jun 27, 2017 at 18:09

Renzo Calla

7,7362 gold badges25 silver badges39 bronze badges

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

2 Comments

user5473002 Over a year ago

Even without that, it appears to be working when you reduce to far less than 786px, but if you reduce right about 786px than it is not working the "search by" with two drop down not moving to next line at that time.!

Renzo Calla Over a year ago

Hi sure, the clear:both property prevents floating elements on the left or the right side of a specified element, that is why your element will move a to a new line if it reach some left or right floating element....

Collectives™ on Stack Overflow

display: block css is not working in div element?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related