CODEWITHSUNDEEP
htmlcss
Dane Cameron
Dane Cameron

Reputation: 423

Flexbox float div to right

I need the yellow div to float beside the the purple square. Orange on top, pink on the bottom and yellow to the left of the square. It worked when I took off the flex-wrap:wrap; from the right div but then all three divs went to the left. Is there anyway to just have the yellow div float to the right of the purple square to take up the remainder of the green area while the other two stay in their current spots?

html, body{
  margin:0;
  height:100%;
  width:100%;
}

#container{
  background-color:pink;
  height:91%;
  width:100%;
  display:flex;
}

#left{
  width:50%;
  background-color:lightblue;
  display:flex;
  position:relative;
}

#right{
  width:50%;
  background-color:lightgreen;
  display: flex;
  flex-direction: column;
}

#right>* {
        flex: 1;
}

#logo {
  width: 100%;
  margin:auto;
  max-width:calc(80vh - 25px);
  background-color:purple;
  margin-left:0;
}
#logo:before {
  content:"";
  display:flex;
  padding-top: 100%;
}

#rightsidetop{
  background-color:orange;
}

#rightsideright{
  background-color:yellow;
}

#rightsidebottom{
  background-color:pink;
}
<div id="container">
  <div id="left"></div>
  <div id="right">
    <div id="rightsidetop"></div>
    <div id="logo"></div>
    <div id="rightsideright"></div>
    <div id="rightsidebottom"></div>
  </div>
</div>

Upvotes: 1

Views: 57

Answers (2)

soimon
soimon

Reputation: 2570

This should work as intended.

html, body{
  margin:0;
  height:100%;
  width:100%;
}

#container{
  background-color:pink;
  height:91%;
  width:100%;
  display:flex;
}

#left{
  width:50%;
  background-color:lightblue;
  display:flex;
  position:relative;
}

#right{
  width:50%;
  background-color:lightgreen;
  display: flex;
  flex-direction: column;
}

#right>* {
        flex: 1;
}

#logo {
  width: 100%;
  max-width:calc(80vh - 25px);
  background-color:purple;
}
#logo:before {
  content:"";
  display:flex;
  padding-top: 100%;
}

#rightsidetop{
  background-color:orange;
}

#rightsideright{
  background-color:yellow;
  flex: 1;
}

#rightsidebottom{
  background-color:pink;
}

.wrapper {
  display: flex;
}
<div id="container">
  <div id="left"></div>
  <div id="right">
    <div id="rightsidetop"></div>
    <div class="wrapper">
      <div id="logo"></div>
      <div id="rightsideright"></div>
    </div>
    <div id="rightsidebottom"></div>
  </div>
</div>

Edit: To make this answer a bit more universal, here is how the principle works: if you want div A to grow up to a max size, and div B to fill the remaining space, you have to make sure that:

  • The container is display: flex
  • A has width: 100% and has a max-width
  • B has flex: 1

Take note that if A would have flex: 1 as well, its greedy 100% would be overruled by the more generous flexing rule. Therefore the most minimal working example is:

.container {
  display: flex;
}

.up-to-max {
  width: 100%;
  max-width: 100px;
  background: red;
}

.filler {
  flex: 1;
  background: green;
}
<div class="container">
  <div class="up-to-max">A</div>
  <div class="filler">B</div>
</div>

(Watch in full page to resize the window)

Upvotes: 3

mttetc
mttetc

Reputation: 745

You have to modify your html a bit and to adapt the css. On a side note, you shouldn't use that much id, use classes. Also, use flex-basis to give flex children a width.

html, body{
  margin:0;
  height:100%;
  width:100%;
}

#container{
  background-color:pink;
  height:91%;
  width:100%;
  display:flex;
}

#left{
  width:50%;
  background-color:lightblue;
  display:flex;
  position:relative;
}

#right{
  width:50%;
  background-color:lightgreen;
  display: flex;
  flex-direction: column;
}

#right>*,
#right>* > *{
        flex: 1;
}

#logo {
  width: 100%;
  margin:auto;
  max-width:calc(80vh - 25px);
  background-color:purple;
  margin-left:0;
}
#logo:before {
  content:"";
  display:flex;
  padding-top: 100%;
}

#rightsidetop{
  background-color:orange;
}

#rightsideright{
  background-color:yellow;
}

#rightsidebottom{
  background-color:pink;
}


.wrapper {
display: flex;
}
<div id="container">
  <div id="left"></div>
  <div id="right">
    <div id="rightsidetop"></div>
    <div class="wrapper">
      <div id="logo"></div>
      <div id="rightsideright"></div>
    </div>
    <div id="rightsidebottom"></div>
  </div>
</div>

Upvotes: 1

Related Questions