I'm trying to create a website that would have a navigation panel on the left side of the page with a width of 300px. The rest of the page (on the right of the navigation panel) would fill up the remaining space. I've tried using rows, columns, containers, etc., but I can't create the effect I want. Here is an example of what I'm trying to accomplish as the general layout:
http://flatfull.com/themes/angulr/html/index.html
Anyone want to give a RSD newbie a tip or two?
Left Side Navigation Help
Take a look at using absolute positioning.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
I don't know if you can do this in RSD – might have to tweak the code after upload...
For the left panel:
Position it absolute at top 0, left 0.
Set its width at 300px, but for the height, make it 100VH.
Give it a high z-index to keep it on top, something like 5000 would do it.
When the screen gets too narrow for it, set your breakpoint and reset the specs.
Make it 100% width, set the height in px, rems, whatever. Of course, you'll be adjusting your menu/links for the new configuration.
For the main content, you'll need to give it some padding to keep it from sliding under the left panel. If your left panel is 300px, you could try it around 332px to keep a bit of space between content/panel.
Same for when it goes to the top of the screen. At that breakpoint, you can adjust the left padding and add some top padding to keep the content in view.
For the left panel:
Position it absolute at top 0, left 0.
Set its width at 300px, but for the height, make it 100VH.
Give it a high z-index to keep it on top, something like 5000 would do it.
When the screen gets too narrow for it, set your breakpoint and reset the specs.
Make it 100% width, set the height in px, rems, whatever. Of course, you'll be adjusting your menu/links for the new configuration.
For the main content, you'll need to give it some padding to keep it from sliding under the left panel. If your left panel is 300px, you could try it around 332px to keep a bit of space between content/panel.
Same for when it goes to the top of the screen. At that breakpoint, you can adjust the left padding and add some top padding to keep the content in view.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.