Xootie
0
I'm developing my first full website and I'm having an issue aligning a "notice board" (used for urgent notices) and the "main frame" (used for general messages on page). I've already got my hero banner and navigation bar to be responsive and generally worked out, but I can't get the "notice board" & "main frame" worked out properly to align like the attached image and remain responsive.
example of page layout I'm looking for
Why not try using a grid? https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout If you had two divs you could tell it to use the following css on the container div:
display: grid;
grid-template-columns: 1fr 2fr;
And it should align perfectly to how your picture looks.
If you want an older way of doing it: check out flexbox. This would need a flex display on the outer container, then you can set values for how much each div inside it would take and how to wrap items, ect. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If you need an even older way of doing it, just take the notices and float that div to the left. https://www.digitalocean.com/community/tutorials/how-to-use-float-and-columns-to-lay-out-content-with-css