How to make CSS float left not bend around when browser width is shrunk


Tags: css,css-float

Problem :

I have 2 div boxes. It's all working fine but when the browser is shrunk to less than 800 pixels or so, the second div moves underneath the first div. How can I force it to always stay to the right of it?

#testbox1 {
background-color: #0000ff;
min-width: 300px;
width: 30%;
height: 200px;
position: relative;
float: left;
}

#testbox2 {
background-color: #00ffff;
width: 500px;
height: 200px;
position: relative;
float: left;
}


Solution :

Give the parent element a min-width: 800px;.


    CSS Howto..

    How can I determine the background image URL of a div via JavaScript?

    How to divide 3 divs(CSS + MVC)

    How can i put this SVG ‘Sidebar Menu’ in the right side?

    How to remove the extra space between two span elements?

    How to make a number of breaks in CSS? [closed]

    How do you set a JavaScript onclick event to a class with css

    How to keep an element fixed top within another element?

    How to make image 3D using CSS

    Any Idea how this web site acheives a fluid/liquid layout [closed]

    How to reduce div size in CSS using twitter bootstrap?

    How to center align text over CSS shape?

    I want to apply an existing CSS style to all labels on a page. How?

    jQuery - how to “reset” a .css() rotated icon?

    How to display line items in twos?

    How to change CSS style of nested list items?

    How to check if CSS is on an element? [closed]

    How to apply CSS styles to links that appear in table headers?

    How to reserve a DIV width with “left:100%” CSS rule

    how to make a child div visible when clicking its parent div in pure css

    Bootstrap tooltip showing behind modal window

    Please help me understand how to make my first jquery slider

    How Can i Make a column to fill all the way to the sides in bootstrap

    How to swap two button elements using float in CSS

    how to create a half bordered circle(only css, not js or even svg)?

    How to generate ABBAABBA… sequence with PHP and CSS nth-child

    How to construct multilevel menu using CSS only?

    How do I customise the style of the Auth0 lock control?

    How do I get my tabs to line up properly using CSS?

    How to write page specific CSS in backbone js

    How make a page fit on any screen with any orientation [closed]