How can I put a div block below another lined up vertically when they are touch and are on the same line?


Tags: javascript,jquery,html,css,twitter-bootstrap

Problem :

Here is the html and css code:

HTML:

<body>
  <div id="box1"></div>
  <div id="box2"></div>
</body>

CSS:

#box1 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
display: block;
float: left;
margin-left: 100px;
}

#box2 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
display: block;
float: right;
margin-right: 100px;
}

So this shows two blocks on the same horizontal line. When I minimize the browser window by dragging the window to the left, it gets to the point where the two divs touch.

Once they touch, the one on the right goes UNDER the one on the left, but not vertically aligned. Like this: right after touch

My question is, how can I make it so that when the boxes touch, the right div goes DIRECTLY underneath the left div and stays until I arrange the window width big enough. I want it to stay like this when they touch: want

I couldn't find a bootstrap doc for this. I want to use the two boxes to contain a dropdown select menu (I already know how to do this). Let me know if you know of a bootstrap class that can suit my needs or a way to fix the code that I provided. I'm open to suggestions in jQuery and Js. Let me know if my question wasn't clear and I will be responding. Thank you.



Solution :

This is a good time to use display: flex see fiddle https://jsfiddle.net/cvnrwo13/5/

<body>
  <div class="wrapper">
    <div id="box1"></div>
    <div id="box2"></div>
  </div>
</body>

CSS

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0 100px 0 100px
}

#box1, #box2  {
  width: 500px;
  height: 250px;
  background-color: #75A9F9;
  margin-top: 100px;
  border-radius: 5px;
}

    CSS Howto..

    how to style a symfony2 form button

    How to vertically center dynamically 1 or 2 lines of text with CSS? [duplicate]

    How to get the real font name of a div on a web page when it set css font-family?

    How to flip background image using CSS?

    How to remove the css class

    How to style this with css? [closed]

    Multiple buttons in CSS + Button with an image not showing properly

    How can I make all table cell sizes the same width in css?

    why is .show() making the target div appear at top of page?

    Mapbox GeoJSON loaded via local URL: icons not showing popup properties

    How to mask an SVG within a div?

    How to specify another font size for IE7 and IE8

    How does a CSS rule override another CSS rule?

    How to resize trapezoid in CSS when browser window resize

    How to underline gaps created with CSS columns property?

    How to override a css !important property using jQuery with transitions

    How to set fixed base to calculate vh unit in css on mobile?

    How to use the float:left property in CSS without having the trouble I have?

    How to center an image .logo via css? [duplicate]

    How to display a child div BEFORE the parent div?

    How to avoid background image stretched horizontally with CSS?

    layout - show the latter coded div at top without absolute positioning

    how to easily develop print css?

    How to make responsive text that isn't too large or too small

    How to create a wrapper with different angles in CSS

    How to make headers glossy in IE7,8,9 using CSS

    How to use the CSS :not selector for classes further up the DOM tree

    How does CORS (Access-Control-Allow-Origin header) increase security?

    css transition effects on show/hide element using css3 [duplicate]

    css - how to determine why a particular css rule is being overwritten