How to Have Responsive Div's That Get Wider as the Navbar Closes
How to Have Responsive Div's That Get Wider as the Navbar Closes
So I am working on a portal and I found a good calendar to throw into my web page. Right now, the css has it set up so that the first div has the attribute "left:250px" and then the "width:200px" and then my second div is set to "left:450". The problem is when I close my side navbar the divs stay stationary. I want them to be responsive and slide over the area where the navbar once was but I haven't figured out how to do that. I've tried using but it wasn't seeming to work very well. Below are pictures of my problems for you guys to see,
Before:
After:
Here is my code, both the css and html. A lot of html, js and css has been left out but I think the code I linked is where the problem is going wrong. If you think the problem might be elsewhere please let me know and I can link it. Thanks for the help friends!!
#lnb {
position: absolute;
left: 250px;
width: 200px;
top: 49px;
bottom: 0;
border-right: 1px solid #d5d5d5;
padding: 14px 10px;
background: #fafafa;
}
#right {
position: absolute;
left: 450px;
top: 49px;
right: 0;
bottom: 0;
}
Here's how the logic has been defined in the CSS: And since the table has its position set to absolute, it stays there despite the nav bar shortening it. I'm not exactly sure what would fix this issue, but here's a couple of things you can try:
New schedule
View all
</div>
</div>
</div>
</div>
Sorry I had forgotten to add it. Should be there now
– Chris
Jul 2 at 18:44
Would be significantly easier to figure this out with the complete code (or just link it if you have to since it's probably a lot). The small section of code your provided doesn't give us the full picture to compare.
– abney317
Jul 2 at 19:24
Yeah sure, do you have an idea of where I could post all my code? I don't want to over clutter this page because there is quite a few lines of code. Thanks for responding the help is greatly appreciated!
– Chris
Jul 3 at 12:45
1 Answer
1
#lnb {
position: absolute;
left: 250px;
width: 200px;
top: 49px;
bottom: 0;
border-right: 1px solid #d5d5d5;
padding: 14px 10px;
background: #fafafa;
}
#right {
position: absolute;
left: 450px;
top: 49px;
right: 0;
bottom: 0;
} Nav bar's left padding + Nav bar's width = Table's left padding
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Please add your CSS also.
– Andrzej Ziółek
Jul 2 at 18:40