CODEWITHSUNDEEP
htmlcss
Crystal Carter
Crystal Carter

Reputation: 1

How to get divs next to one another to stack when screen gets small

My apologies for the likely redundant nature of my question, but I am new to this so making sense of other people's posts was confusing!

I have two divs that I have floating inside a wrapper that are next to each other, but when it gets to tablet or phone size I want them to stack instead. Here's what I have so far for the css of these two divs and their wrapper:

#story-wrapper {
    width: auto;
    margin: auto;
    overflow: auto; /* add this to contain floated children */
}
#story-one {
    width: 40%;
    float: left;
}
#story-two {
    width: 40%;
    float: right;
}

And this is what's in my HTML:

<div id="story-wrapper">
    <div id="story-one">
        <h2>Story #1</h2>
        <img class="small-story-image" src="images/sample-1.jpg">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus, nisl id molestie cursus, mauris ipsum consectetur nibh, vel sagittis nisi est eleifend magna.</p>
        <p><a class="button" href="#" target="_blank">Button Text</a></p>
    </div>
    <div id="story-two">
        <h2>Story #2</h2>
        <img class="small-story-image" src="images/sample-2.jpg">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus, nisl id molestie cursus, mauris ipsum consectetur nibh, vel sagittis nisi est eleifend magna.</p>
        <p><a class="button" href="#" target="_blank">Button Text</a></p>
    </div>
</div>

Could you please help me before I pull my hair out? I won't look cute bald.

Upvotes: 0

Views: 108

Answers (5)

Anwar
Anwar

Reputation: 4246

If you do not want to use @media queries, but you know what would be the minimum and acceptable width for your blocs, you can use min-width CSS property to get what you need.

Also, do not forget to think about display : inline-block, else you would not have this stack effect because your divs behaves as display : inline which prevent this element from stacking with others.

See the example below :

Editable JSFiddle

HTML

<div id="story-wrapper">
<div id="story-one">
<h2>Story #1</h2>
<img class="small-story-image" src="images/sample-1.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus, nisl id molestie cursus, mauris ipsum consectetur nibh, vel sagittis nisi est eleifend magna.</p>
<p><a class="button" href="#" target="_blank">Button Text</a></p>
</div>
<div id="story-two">
<h2>Story #2</h2>
<img class="small-story-image" src="images/sample-2.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus, nisl id molestie cursus, mauris ipsum consectetur nibh, vel sagittis nisi est eleifend magna.</p>
<p><a class="button" href="#" target="_blank">Button Text</a></p>
</div>
</div>

CSS

#story-wrapper {
    width: auto;
    margin: auto;
    overflow: auto; /* add this to contain floated children */
}
#story-one {
    width: 40%;
    min-width : 200px;
    float: left;
    display : inline-block;
}
#story-two {
    width: 40%;
    min-width : 200px;
    float: right;
    display : inline-block;
}

Upvotes: 0

David Barker
David Barker

Reputation: 14620

You want to use media queries. With something like this you can modify your CSS for different window widths. This example will stack the two elements one on top of the other when the window is 790px wide or less.

#story-wrapper {
  width: auto;
  margin: auto;
  overflow: auto; /* add this to contain floated children */
}
#story-one {
  width: 40%;
  float: left;
}
#story-two {
  width: 40%;
  float: right;
}

@media(max-width:790px) {
  #story-one, #story-two {
    float:none;
    display:block;
    width:100%;
  }
}
<div id="story-wrapper">
  <div id="story-one">
    <h2>Story #1</h2>
    <img class="small-story-image" src="images/sample-1.jpg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus, nisl id molestie cursus, mauris ipsum consectetur nibh, vel sagittis nisi est eleifend magna.</p>
    <p><a class="button" href="#" target="_blank">Button Text</a></p>
  </div>

  <div id="story-two">
    <h2>Story #2</h2>
    <img class="small-story-image" src="images/sample-2.jpg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus, nisl id molestie cursus, mauris ipsum consectetur nibh, vel sagittis nisi est eleifend magna.</p>
    <p><a class="button" href="#" target="_blank">Button Text</a></p>
  </div>
</div>

Alternatively you can have completely seperate stylesheets for different window widths.

<link rel="stylesheet" media="(max-width: 800px)" href="tablet.css" />

Upvotes: 1

Bart. K
Bart. K

Reputation: 63

I'd use min-width.

#story-wrapper {
    width: auto;
    margin: auto;
    overflow: auto; /* add this to contain floated children */
}
#story-one {
    width: 100%;
}
#story-two {
    width: 100%;
}
@media screen and (min-width: 720px) {
	#story-one {
      width: 40%;
      float: left;
	}
	#story-two {
	    width: 40%;
	    float: right;
	}
}

Upvotes: 0

Francisco Romero
Francisco Romero

Reputation: 13189

You can just add this media query to your code:

@media screen and (max-width:500px) {
 #story-one, #story-two{
   width: 100%;
 }
}

So when the screen will be smaller than 500px both divs will be equals to the 100% of the width of the screen and will be one above the other.

#story-wrapper {
    width: auto;
    margin: auto;
    overflow: auto; /* add this to contain floated children */
}
#story-one {
    width: 40%;
    float: left;
}
#story-two {
    width: 40%;
    float: right;
}

@media screen and (max-width:500px) {
  
 #story-one, #story-two{
   width: 100%;
 }
}
<div id="story-wrapper">
<div id="story-one">
<h2>Story #1</h2>
<img class="small-story-image" src="images/sample-1.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus, nisl id molestie cursus, mauris ipsum consectetur nibh, vel sagittis nisi est eleifend magna.</p>
<p><a class="button" href="#" target="_blank">Button Text</a></p>
</div>
<div id="story-two">
<h2>Story #2</h2>
<img class="small-story-image" src="images/sample-2.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus, nisl id molestie cursus, mauris ipsum consectetur nibh, vel sagittis nisi est eleifend magna.</p>
<p><a class="button" href="#" target="_blank">Button Text</a></p>
</div>
</div>

Upvotes: 0

andrescpacheco
andrescpacheco

Reputation: 696

You can easily achieve this by using media queries:

@media only screen and (max-width: 500px) {
   #story-two, #story-one {
           float: none;
           clear:both;}
            }
}

(Examle for a device with max width of 500px)

I would advice you to use more media queries to adequate the behavior or to use bootstrap or skeleton.

André

Upvotes: 0

Related Questions