Hi,
This is my first post here. Thank you in advance for any advice.
I’m trying to create a layout like Twitter, with a leftside window and a sidebar on right. What’s different from Twitter is that I want the leftside window to be a flexible width and the right sidebar to be a fixed width.
Here’s a description of what I’m trying to create:
-
Right Sidebar is a fixed width of 400px. The sidebar takes up the full height of the browser window and does not scroll (height=100%).
-
The main content (leftside window) has a flexible width between 600-1000px. As more content is added to the main area it should grow vertically indefinitely.
-
Neither set of content ever overlaps the other. With the browser window < 1000px wide a horizontal scroll bar should appear.
Approaches I’ve tried so far:
A) Fix position the sidebar with right=0. Downside is at a small browser window, content will overlap main content (or vice versa depending on z-index).
B) Use flex box model. Content will not overlap, but either the whole container has a height of 100% or neither section does.
C) Use flex box model but having a fake main area. Have a second container which contains the real main content and have a margin-right of 400px. The layout worked, but the text wasn’t selectable
Anyone have suggestions? Or can anyone point me to an example online for reference?
Thanks for any help.