I have been trying to figure this out for some time but I cant seem to understand whats happening.
So basically I have a max width on my body tag of 900px. I would like a footer div inside the body to be 100% of the browser window. I have tried the using width:100vw but it behaves unexpectedly and the div starts from the left border of the body (not browser window). So then I positioned the div absolutely to left:0 and right 0. The problem arises when I try to center the content within the div with margin:0 auto. It does not get centered.
The result that Im trying to achieve is to have a footer menu with multiple columns of links that expands to fit the full width of the window.
<body class="minwidth900">
<footer>
<div class="full_browser_width">
<div class="width100% margin0auto">
<ul class="floatleft">
<li>link1</li>
<li>link2</li>
</ul>
<ul class="floatleft">
<li>link1</li>
<li>link2</li>
</ul>
</div>
</div>
</footer>
</body>
I have tried my best to figure this out and searched a lot for an answer on the net. So please be kind if this is an easy fix.
Thanks for your time and any help will be greatly appreciated.
Related
I'm using Materialize to create a navbar like the code below shows. After that, I render a div element to hold my application but the topmost part of it gets hidden by NAV element.
<div class="navbar-fixed">
<nav class="nav-extended deep-purple">
<div class="nav-wrapper">
...
<ul id="nav-mobile" class="application right hide-on-med-and-down">
<li>...</li>
...
<li>...</li>
</ul>
</div>
</nav>
</div>
<div id="application">Shazoo</div>
My current workaround is to simply add a top margin to the DIV named application but it's hardly something I want to see in a printed book as a best practice. I'm guessing there's a specific hack for Materialize that I haven't found. The documentation seems a bit Spartan on the website.
To avoid adding the margin or an extra div, just add top padding to your body like this:
body {
padding-top: ABCpx;
}
Where ABCpx is the height of your fixed navbar.
If the navbar is positioned using "fixed" then I adding margin-top to the following div would, in my opinion, be the correct method, or else adding padding.
I am working on a site that uses the 960 grid system. It has an issue with the navigation. Rather then try to explain, I'll show you a picture of what I'm going for
I figured the best way to do this would be to have a DIV called navHolder that stretches the whole way across the screen. Inside navHolder is a div with a class of container the hold it in the 960 system. I would give navHolder a top and bottom border to achieve the effect.
Here is the HTML
<div id="navHolder">
<div class="container_12">
<div class="grid_4" id="leftNav">
<ul class="leftNav">
<li>About Us</li>
<li>ABG Way</li>
</ul>
</div>
<div class="grid_4" id="logo">
<img src="images/abg_website_logo_2014.jpg" alt="abgLogo" id="mainLogo"/>
</div>
<div class="grid_4" id="rightNav">
<ul class="rightNav">
<li>Portfolio</li>
<li>Media</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
The issue is that the image forces navHolder to become large, so the top and bottom border lose the desired effect.
Here is a screenshot of the image making it too large
Screenshot
I attempted to give the image an
position:absolute
to stop it from resizing the div. This works, however, this causes the navigation options to collapse behind it.
Here is a screenshot
I attempted to create a fiddle to recreate this scenario
Fiddle
But its not quite the same.
My question is then, is there a way to set this image so that it doesnt resize its containing DIV AND still holds its place with the navigation so its on both sides of the image? Is there a better way to go about this then what I am currently doing?
I'd give the container <div> desired size and set the image as it's background without repeat instead of using an <img>, and apply background-size: 100%;
Look into more CSS Background Properties # MDN
I would go about this by overriding the gird (only for nav).
so it would be
#navHolder .grid_4
{
float:none;
display:inline-block;
vertical-align:middle;
}
You would also need to offset the random white space display:inline-block gives so set the font size of the parent wrapper in this case #navHolder font-size:0;
#navHolder
{
font-size:0px;
}
here is your fiddle with my changes
http://jsfiddle.net/bCzK5/4/
I got the white background (.big-content) to be 100% height by using position:absolute, but now it's making my footer float! How can I fix this? wolvesofys.weebly.com
Here's my CSS: http://wolvesofys.weebly.com/files/main_style.css?1374887463
Here's my HTML: view-source:http://wolvesofys.weebly.com/
I think the wrappers are the issues.
<div class="wrapper">
<div id="wrap">
<div class="big-content">
<div class="content">
<div class="container">
<p>Text here</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
And the footer stuff:
<footer>
<div id="wrap">
<div id="page_footer">
<ul>
<li></li>
<li>Terms and Conditions</li>
<li>/li>
<li>Contact</li>
<li></li>
<li>Help</li>
<li></li>
</ul>
<div id="copyright">Content © 2013 FeraLupus.com</div>
</div>
</div>
</footer>
By using height: 100%, all does it tell the class .big-content to fully expand itself to the height of the parent element that it is within. This does not take into consideration any margin or padding settings that you have (so it could go outside of the parent element or look obscure).
The way absolute positioning works is that it removes it from the "flow" of the page. Your footer isn't technically floating, you are disrupting the flow of it by making the previous element absolute. Without seeing the actual pages code though, it is difficult to tell you how to fix the problem.
Is not good to use absolute that way, so I delete it.
Instead, I removed the auto height from your .wrapper class. And added the fixed position to your footer (in this case, is an acceptable use of that)
Here the live demo: http://plnkr.co/edit/UYKfJrxbnqYlSiEaitNW?p=preview
You have a problem of width, but thats another issue.
I have been working on a site lately. I am attempting to get a border that surrounds all my content and is at least as tall as the page is. My #Container is the div that should expand to fill the full page. I am attempting to use the min-height:100%; in my css, but for some reason it isn't expanding the border down the whole page. This is my website. The home page is a basic html setup.
<div id="Container">
<div id="header">
<div id="menu">
<ul id="navbar">
<li><a id="nav1" class="nav-text" href="http://usedatcollege.com/">Home</a></li>
<li><a id="nav2" class="nav-text" href="http://usedatcollege.com/bookdb.php">Books</a></li>
<li><a id="nav3" class="add-text" href="http://usedatcollege.com/bookdbform.php">+</a></li>
<li><a id="nav4" class="nav-text" href="http://usedatcollege.com/wanteddb.php">Wanted</a></li>
<li><a id="nav5" class="add-text" href="http://usedatcollege.com/wanteddbform.php">+</a></li>
<li><a id="nav6" class="nav-text" href="#">Info</a></li>
<li><a id="nav7" class="nav-text" href="#">About</a></li>
<li><div id="nav8"><a href=loginform.php class=linktext>Login</a><a class=slashtext>/</a><a href=register.php class=usertext>Register</a></div></li>
</ul>
</div>
</div>
<div id="content">
<h3>Home Page</h3>
</div>
<div id="footer">
<div id="footertext">Copyright © UsedAtCollege.com</div>
</div>
</div>
My CSS is fairly simple too. I have a CSS reset, that I don't think is affecting it because I took it out and it still had the problem.
* {
margin: 0;
padding: 0;
}
#Container {
width:980px;
min-height:100%;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border-style:solid;
border-width:1px;
border-color:rgb(154,154,154);
}
So that's the CSS control for the div wrapping my entire page in.
I just want to know if anyone knows why the min-height is not getting the border down all the way to the bottom of the screen?
Add this to your CSS
html, body {
height: 100%;
}
Something like Firebug or DOM-Inspector would come in handy in such cases. If you fire up Firebug, and see the content of your page in Firebug, you will notice that your body itself doesn't expand through the entire page, it expands only upto around half the page length, the same position where the bottom border is showing. This is because the body will expand only as per its content, the content being minimal here, the body expands only as much, and so does the min-height: 100%.
You can get around this by wrapping the entire page content inside an absolutely positioned wrapper div, setting its top and left values to 0px, and height and width to 100%. Then the border would expand upto the bottom of the page. Of course Firebug would still show the body expanding upto half page only, for absolutely placed elements don't contribute to the natural dimensions. For that, you will have to use relative positioning, and adjust margin-top to the requisite value in order to have the effect.
I have the following code:
<div style="height:500px">
<ul style="height: 1000px">
....
</ul>
</div>
I am using the UL as Jquery carousel.
My problem is that the div won't act as a 500px window above that UL carousel,
and it seems like its streching the DIV so it will also fit the 1000px.
How can this be solved?
thanks
try <div style="height:500px; overflow: hidden">
Its hard to tell whats happening aside those two code lines but you would also need to set in the css that the div should have overflow hidden so that no content will flow over the height