CODEWITHSUNDEEP
css
Brian Huether
Brian Huether

Reputation: 179

Placing div over image - how to control float behavior

I have followed the instructions at floating-div-over-an-image, and while things are working ok, I am trying to better control the behavior of the search box and the button. You can see the page I am working on here

There is a search box on the header image towards the upper right. The CSS for the search box div as follows

.search-box{
    z-index: 500;
    width: 50%;
    border: 0px none;
    top: 0px;
    float: right;
    left: 40%;
    position: absolute !important;
}

You'll see that there is a search button to the right of the search box. When the browser window is made narrower, that search button jumps below, even when there is space to the right. I am trying to force that button to stay to the right.

Any tips on how you would achieve the behavior I described? I have tried variations of the float property in the CSS above, but that is not getting me what I need. Maybe I am not applying the correct CSS selector?

Regards

Upvotes: 2

Views: 120

Answers (4)

Ravi Bhati
Ravi Bhati

Reputation: 15

In class (.search-box) the width was 40% so it was not getting enough room for the search box and button to display in line. You Just need to replace the below css and it will work in all resolution.

.search-box{


    border: 0 none;
     position: absolute !important;
     text-align: right;
     width: 100%;
     z-index: 500;

}

Upvotes: 1

Lukáš Gibo Vaic
Lukáš Gibo Vaic

Reputation: 4420

this is happening because .search-box has its width in % give it minimal width, and position it to the right instead of left, and you should be just fine.

.search-box {
min-width:XXpx;
right: 0;
left: auto;
}

Upvotes: 0

Rajesh kannan
Rajesh kannan

Reputation: 634

Just change your .search-box css for property width:100%

It is WORKING

.search-box {
width:100%;
}

let me know if it is helpful

Upvotes: 1

lagboy
lagboy

Reputation: 94

The #k2ModuleBox125 div has a 40% width which is causing the search button to wrap to the next line when the search bar increases in size.

You can easily fix this by looking into the style rules of the #k2ModuleBox125 div.

Upvotes: 0

Related Questions