CODEWITHSUNDEEP
htmlcss
kenj
kenj

Reputation: 23

extending width of floated div

Given two floated divs whose width takes 50% of their container when aligned side by side, is it possible to have their width extend all the way to 100% when the screen is shrunk to the point where the second div has to be pushed one row down?

Take the following codepen for example, and shrink the window horizontally until the green div and its container move below the red one. Is it possible to have the width of #wrap1 and #wrap2 extend all the way to the right of #container, so that #one and #two are centered with respect to #container? i.e. so it would look like this.

Upvotes: 2

Views: 58

Answers (4)

Paracetamol
Paracetamol

Reputation: 342

If you're not working with dynamic widths, you can add a media query to change the container behaviour on the wrap position.

Otherwise you need to refer to flexbox bevhaviour – this guide by Dimitar Stojanov has some examples on wrapping.

[Edit:] fixed link.

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 114980

flexbox solution..no media query required as such.

#container {
  background: rgba(0, 0, 0, .1);
  display: flex;
  flex-wrap: wrap;
}
[class^="wrap"] {
  flex-grow: 1;
  flex-shrink: none;
}
.wrap1 {
  background: rgba(100, 10, 10, .2);
}
.wrap2 {
  background: rgba(10, 100, 10, .2);
 height: 100px;
}
#one {
  width: 200px;
  height: 200px;
  background: rgba(100, 100, 0, .1);
  margin: 0 auto;
}
#two {
  width: 300px;
  height: 100px;
  background: rgba(100, 100, 0, .1);
  margin: 0 auto
}
<div id="container">

  <div class="wrap1">
    <div id="one">
    </div>
  </div>

  <div class="wrap2">
    <div id="two">

    </div>
  </div>

</div>

Codepen Demo

Upvotes: 0

SteveB
SteveB

Reputation: 924

You can do this using Bootstrap CSS. You'll want to create a fluid container, and then create two inner div's. The inner divs will have class col-md-6 which will be 50% for large screens and col-xs-12 for xtra small screens. This will auto resize with the browser. 

<div class="container-fluid">
  <div class="col-md-6 col-xs-12">Div 1</div>
  <div class="col-md-6 col-xs-12">Div 2</div>
</div>

Upvotes: 0

KmeCnin
KmeCnin

Reputation: 527

You should use flexbox. Here is your Pen edited

CSS:

#container{
  background: rgba(0,0,0,.1);
  width:100%;
  height:auto;
  position: relative;
  overflow: hidden;
  display: flex;
}

@media screen and (max-width: 800px) {
  #container{
    flex-direction: column;
  }
}

.wrap1{
  background: rgba(100,10,10,.2);
  flex-grow: 1;
}
.wrap2{
  background: rgba(10,100,10,.2);
  height: 100px;
  flex-grow: 1;
}

Upvotes: 1

Related Questions