CODEWITHSUNDEEP
css
tesicg
tesicg

Reputation: 4053

How to prevent div section to move below?

I have а search page and want to prevent "top20" div section on the right to move below the section rounded by rectangle when I change the size of browser window.

CSS:

#search_parameters_border {
    border: 1px outset gray;
    float: left;
    padding: 10px;    
}

#searchBox {
    background-color: white;
    color: black;
    text-align: left;
    margin-bottom: 15px;
}

#categories {
    line-height: 20px;
    height: 420px;
    width: 250px;
    float: left;
    padding: 10px;        
    margin: 5px 5px 5px 5px;
}

#additionalFilters {
    width: 700px;
    float: left;
    padding: 10px;       
    margin: 5px 5px 5px 5px;
}

#top20 {
    width: 650px;
    padding: 5px;        
    margin: 5px 5px 5px 50px;
    float: left;
}

The screen shot:

enter image description here

Upvotes: 0

Views: 74

Answers (2)

tommydevs
tommydevs

Reputation: 147

Since you don't have a containing element for your floats, the phone is allowing your last float to get pushed down below where you're not wanting it to go. It's generally a good idea to use a "container" or "wrapper" div as you'll see them referenced to at times with your site's maximum allowed width to surround your builds (or min-width if you want to get a little fancier.) It will solve your issue as well as help you stay organized. As well, like in this situation, if you run into problems, sometimes it can be faster to just set a property in your "container" div to "position:relative;" and then position the div you're having trouble with absolutely via "position:absolute; top:100px; left:50px;" or something similar for spacing. If you have any questions about anything above or in the other comments let me know and I can explain in more detail.

Upvotes: 1

Marcus Rommel
Marcus Rommel

Reputation: 1294

As you're using absolute values for all widths you need to give a min-width to the surrounding container. Than you're top20 div will not move. But you should consider making you're style more fluid.

Upvotes: 0

Related Questions