CODEWITHSUNDEEP
htmlcssflexbox
Ada
Ada

Reputation: 127

Flex Layout, aspect ratio, fixed width and dynamic width columns

I have very specific requirements for a page layout, which I can't seem to get 100% right.

My layout is like this and I added numbers to each section to make it easier to explain:

enter image description here

And my current attempt on it: https://jsfiddle.net/metheria/sxxbqtnb/71/embedded/result/

My attempt on it initially followed padding a dummy div to create aspect ratio, but that was leaving a lot of empty space under the divs. I need this layout to not go above 100% width and height, which currently is happening.

My current attempt uses the flex layout, but I haven't yet been able to even incorporate 5 in it because I can't even see text in 3, 4 and 6. I'm aware it is most likely caused by the "padding-bottom: 18%", but without that padding, I don't even see the divs, let alone probably keep the aspect ratio attempt...

Is there anyway to incorporate those aspect ratio requirements and the full layout?

Also, in (1), I want to split in 4 sections: - an image - space in the middle to separate image and two buttons - two buttons aligned to the left

And that brings me to my final question. Do I need all the divs to be "display: flex;" to make this layout work or can navbar not be flex? And map as well.

The html code:

<div id="navbar">navbar</div>
<div id="map">mapa</div>
<div id="infos">
    <div class="test">
        <div class="test-wrap">
            <div id="multimedia"></div>
            <div id="ambassador"></div>
            <div id="next"></div>
        </div>
    </div>
    <div id="footer"> text </div>
</div>

And the css code:

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

*, *:before, *:after {
  /* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
  -webkit-box-sizing: border-box; 

  /* Firefox (desktop or Android) 28- */
  -moz-box-sizing: border-box;

  /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
  box-sizing: border-box;
}

#navbar {
    display: flex;
    background-color: pink;
    height: 54px;
    flex: 0 0 54px;
    width: 100%;
}

#map {
    width: 100%;
    height: 70%;
    background-color: blue;
}

#infos {
    height: 30%;
}

.test {
    position: relative;
    height: auto;
    background-color: transparent;
    display: flex;
}
.test-wrap {
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 0;
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
}
#next {
    position: relative;
    height: 100%;
    width: 15%;
    display: inline-flex;
    padding-bottom: 18%;
    background-color: #666;
}
#multimedia {
    position: relative;
    height: 100%;
    width: 25%;
    display: inline-flex;
    padding-bottom: 18%;
    background-color: #111;
}
#ambassador {
    position: relative;
    height: 100%;
    width: 60%;
    display: inline-flex;
    padding-bottom: 18%;
    background-color: #b92b2e;
}

#footer {
    display: inline-block;
    position: relative;
    height: 15px;
    flex: 0 0 15px;
    width: 100%;
    background-color: tomato;
}

Upvotes: 1

Views: 3586

Answers (1)

Paulie_D
Paulie_D

Reputation: 115288

Since the whole thing is to fill the screen we can make use of viewport units for the elements that are to have a set ratio.

Then we can use flex:l on the elements that are to take up remaining space.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  height: 100vh;
  background: #c0ffee;
}

header {
  height: 54px;
  background: yellow;
}

main {
  flex: 1;
  background: blue;
}

aside {
  height: 30vh;
  background: #000;
  display: flex;
}

.left.image {
  /* 1:1 */
  
  height: 30vh;
  width: 30vh;
  background: plum;
}

.left.video {
  /* 16:9 */
  
  height: 30vh;
  width: calc(30vh *16 / 9);
  background: red;
}

.mid {
  flex: 1;
  background: green;
  display: flex;
  align-items: flex-start;
}

.asidefooter {
  height: 25px;
  background: #bada55;
  align-self: flex-end;
  width: 100%;
}

.right {
  height: 30vh;
  width: 15vh;
  background: grey;
}

footer {
  height: 15px;
  background: pink;

}
<header></header>
<main></main>
<aside>
  <div class="left video"></div>
  <div class="mid">  
    <div class="asidefooter"></div>
  </div>
  <div class="right"></div>
</aside><footer></footer>

Codepen Demo

Upvotes: 1

Related Questions