Side Bar Layout
Last updated
Was this helpful?
Last updated
Was this helpful?
The Side Bar Layout is one of the most common CSS layouts used extensively in apps such as Spotify, Facebook, YouTube and many more.
In the video below, we show you the correct want to create the Side Bar Layout using div blocks, percentage widths and flex-box.
On a clean page add a Div Block to your Body Element and set its height to 100vh (100 vertical height) and turn this Div Block into a Horizontal Flex-Container with a top align and left justify.
Next, nest three Div Blocks inside your Body Element. These will fall side by side, since you have a Horizontal Flex-Container set.
Set the width of your first nested Div Block to 25%, set its height to 100% of its container element and set make this a vertical Flex-Container with align top and justify left.
Next, select the second nested Div Block and, using the Flex-Child option, set option to grow this Div Block into the available space.
Finally, select the final nested Div Block and, set it's width to 25%, it's height to 100% of the parent container and turn it into a vertical Flex-Container with align top and justify left.
You can then add elements into your layout and style these however you like.