I'm new to Tailwind CSS and have been trying to make a simple portfolio page with available code samples in Tailwind's documentation.
While the container class is wrapping all content on page with some margin, if I set the footer to fixed position, the footer is overflowing to the right. The issue seems to be with the fixed or absolute class as without this class, the footer takes the container's width.
What can I do to make the footer wrap within the container with the fixed class applied? A CSS approach would do but ideally I'm looking for the reason why Tailwind CSS wouldn't wrap the footer to parent's width.
Code and Demo: https://codesandbox.io/s/tailwind-portfolio-s1r1g
Trying to achieve this:
I have updated the HTML for your code and everything works fine. Here is the updated code : Sandbox link
Updates made was -
1. Removed class container mx-auto from body and added as a separate container div.
2. This new div will hold your nav and other contents, except footer.
What was happening earlier -
By default footer was aligning to the left from its parent which was body and as the body was aligning to the center it was displayed as if the footer is right aligned.
If you want to do it from your existing code, you can add one line in css -
footer { left: 0}
Related
I'm working on a static site that has a side nav on some pages and the nav is meant to stick to the bottom of the screen while scrolling. How can I get the nav to stop sticking at the bottom of the parent container? The nav should stay inside the parent.
Right now it continues to stick even after the container is out of view and eventually overlaps the footer.
Here's the demo site:
https://blissful-kare-3ae082.netlify.app/checklist.html
Your element has the attribute "fixed-bottom" as one of its classes. This will affix the y-axis placement of your navigational element to the bottom of the screen, not to the bottom of the parent container.
There are a couple of things you can do to clean this up. If you just want it not to overlap, you can add padding to the bottom of your element; I found that padding it with 100px worked cleanly as in the picture below.
You may also look to affix it to the actual parent container with usage of the "relative" tag, the solution of which is discussed in various other posts on this site:
Fixed position but relative to container
Here is a JS Fiddle of the problem for reference:
https://jsfiddle.net/ncoughlin/1fjxy230/4/
I am having an issue where I am trying to get a vertical bootstrap nav menu to inherit the width of it's parent element, which is a CSS Grid column. For the sake of troubleshooting I have put the background of the grid column to red. So I am essentially trying to get the dark gray vertical nav on the left hand side to match the width of the red Grid column.
The bootstrap nav has id #settings-nav
I have tried the basic stuff like adding the bootstrap class w-100 to the nav ul or in the stylesheet adding width: 100%; however both of these make the menu stretch over the entire viewport instead of the parent element, which is the Grid column. It's behaving like the Grid column is not it's parent element, but using inspector I know that it is...
Please let me know where I am going wrong here. Thank you.
The problem ended up being that the #settings-nav was set to position:absolute, which makes it so that it ignores the dimensions of the parent element. Changed to position:relative and it works perfectly.
I am creating an Angular application with Bootstrap and i stumbled on a problem. I am trying to size one of my divs in the page where the height is fullscreen, however i have a navigation bar and one other element above this div (i am also using padding from the above element). I want my div to be exactly right height to fit from the last element to the bottom of the page.
Now the problem is, when I set style of my div to 100vh the site doesn't fit and i get a slider to scroll through the whole page. Is this because vh doesn't take the navigation and the other element into account and just set my div to default screen size? And how to correctly repair this problem that it will work the same across any screen?
There are several approaches to get your div the height you're looking for.
Use the calc css function. It should be something like this:
div {
height: calc(100vh - 60px);
}
Replace the 60px with the pixel size of your navigation element.
[Alternate solution] Use flexbox css styles. You'll need to use a column flexbox setup and flex: 1 on the element you'd like to take up the remaining height.
You can have a container div of 100vh. And inside it your nav bar will be sticky-top in a child div. And your other child div is the parent of your content.
I have a div (id="main") that is not stretching to accommodate the dynamically created (i.e. height-variable) content inside of it; the 'main' div is only coming down to the bottom of 'user-info'.
The basic structural layout of this page is that the 'user-info' and 'stream' divs sit next to each other inside of the 'main' div which sits inside of 'container'; the 'meal-category-box' divs are just lists of content inside 'stream'. Here's the HTML and CSS (I am also using Bootstrap CSS 2).
http://jsfiddle.net/7yvSj/1/
I'd also love a sticky footer fix, because none of the ones I've looked at integrate with what I've got.
Please help!
Matt
Well, since #stream has position:absolute, it doesn't partake in the calculation of the outer div's height.
Try to do something with paddings or margins instead of using position:absolute.
i'm trying to create a flow layout and i'm having some trouble using float:left property in css.
I have one parent container which has 100% width and 100% height. It contains three containers:
The header, the menu container, and the content container.
The menu is a vertical menu,not a horizontal menu. It comes below the header and then the content container floats left on the menu container.
Now the problem is i want to make it flowlayout. When i reduce the resolution,the floating content container comes below the menu container. I want the content to float with a flowlayout without coming below the menu container.Please provide a solution to this.
Thanks!
Here is the link to the code.
http://jsfiddle.net/VdE7Y/
Remove the width and float from the #content css.
Set the background color of #wrapper to be whatever color you want the background of #content to be.
add display: inline-block; to the #content css.
Updated fiddle ----> HERE
The problem is the min-width you have for #menu-cont
The layout you are trying to have is very hard to maintain.