How to achive this design CSS - html

Question

Logo Here. | -- 3 Column -- |
Error Message here | |
____________________________________________ || W:232.5px |
| - - 1 Column -- | -- 2nd Column -- || |
| W:232.5px | W:465px || |
|_________________|__________________________||_________________|
Max W: 930px.
Hey, could anyone explain to me how I can achieve this CSS.
3 columns, all has 100% height depending how much contents in the column, e.g. column 1 might be
bigger than column 2 and/or 3.
I've also struggled to keep its structure when minimizing the browser, e.g column 3 is going under column 1.
so if possible I'd like to know how to keep its structure on minimizing.

Answer 1

Something like this maybe...
body {
border:0
}
#logo {
position: fixed;
top: 0px;
left: 0px;
width: 200px;
height: 64px;
background-color: blue;
}
#error-msg {
position: fixed;
top: 0px;
left: 200px;
width: 497px;
height: 64px;
background-color: green;
}
#column1 {
position: fixed;
top: 64px;
left: 0px;
width: 232px;
height: 100%;
background-color: #efefaa;
}
#column2 {
position: fixed;
top: 64px;
left: 233px;
width: 465px;
height: 100%;
background-color: #aaefef;
}
#column3 {
position: fixed;
top: 0px;
left: 698px;
width: 232px;
height: 100%;
background-color: #efaaef;
}
<div id="logo"></div>
<div id="error-msg"></div>
<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>

Answer 2

To prevent column 3 go under column 1 either wrap everything inside a container with fixed width or use % as unit for the columns

Answer 3

I would go with a Flexbox with align-items: flex-end;
That will align the items to the bottom of the container and respect their variable height and width.
Here is a great reference for flexboxes

Answer 4

What you're looking for is pretty straight forward, you just need to add a wrapper to the first two columns and use that as the 'main' column.
In terms of responsiveness the best method is converting your pixels to percentage values, then using breakpoints when the widths start to become too tight/too wide.
|________________________________________________| | --Side Column-- |
| - - Main Column - - | | |
| W: 75% | | |
|________________________________________________| | |
| Logo Here. | | |
|________________________________________________| | |
| Error Message here | | |
|________________________________________________| | |
| ______________________________________________ | | W:25% |
| | - - 1 Column -- | -- 2nd Column -- | | | |
| | W:33.3% | W:66.6% | | | |
| |_________________|__________________________| | |_________________|
| |
------------------------------------------------