Two Divs next to each other, that then stack with responsive change

by

You can use CSS3 media query for this. Write like this:

CSS

.wrapper { 
  border : 2px solid #000; 
  overflow:hidden;
}

.wrapper div {
   min-height: 200px;
   padding: 10px;
}
#one {
  background-color: gray;
  float:left; 
  margin-right:20px;
  width:140px;
  border-right:2px solid #000;
}
#two { 
  background-color: white;
  overflow:hidden;
  margin:10px;
  border:2px dashed #ccc;
  min-height:170px;
}

@media screen and (max-width: 400px) {
   #one { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
    border-bottom:2px solid #000;    
  }
}

HTML

<div class="wrapper">
    <div id="one">one</div>
    <div id="two">two</div>
</div>

Check this for more http://jsfiddle.net/cUCvY/1/

More Related Contents:

  1. Animate text for landing page
  2. CSS – Equal Height Columns?
  3. How do you easily horizontally center a using CSS? [duplicate]
  4. CSS Floating Divs At Variable Heights [duplicate]
  5. Margin-Top not working for span element?
  6. Footer at bottom of page or content, whichever is lower
  7. Is there a way to make a child DIV’s width wider than the parent DIV using CSS?
  8. 2 column div layout: right column with fixed width, left fluid
  9. Is float for layout bad? What should be used in its place?
  10. Font Awesome not working, icons showing as squares
  11. How to create equal height columns in pure CSS [duplicate]
  12. How do I right align div elements?
  13. Right to Left support for Twitter Bootstrap 3
  14. What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
  15. How does object-fit work with canvas element?
  16. How to make a element expand or contract to its parent container?
  17. scale HTML5 Video and break aspect ratio to fill whole site
  18. Disable zoom on a div, but allow zoom on the page (an alternate div)
  19. element not working in Internet Explorer 11
  20. CSS text ellipsis when using variable width divs
  21. why is my content showing outside the div?
  22. How to get these two divs side-by-side?
  23. Why use an HTML5 semantic tag instead of div? [duplicate]
  24. How to display and hide a div with CSS?
  25. How to make responsive table [closed]
  26. Why adds extra top margin?
  27. There is a 4px gap below canvas/video/audio elements in HTML5
  28. How can I align 3 divs side by side?
  29. Canvas is stretched when using CSS but normal with `width` & `height` attributes
  30. using a div to blur an image behind it? [duplicate]

Leave a Comment