I need to make my footer stay on the bottom but also have it not interfere with my content. As seen in the jfiddle, the blue box interferes with the footer. After looking through all the current threads and trying to fix my CSS and HTML, I could not find my solution. I tried changing the position to fixed, adding some padding, etc. Below is my code:
http://jsfiddle.net/9A2gL/8/
Basically I have:
<html><div id="wrapper"><header></header>
<body></body>
<footer></footer></div></html>
I do have floating divs but I used clearfix so clear: both;
Also, please read this: I do have a valid HTML structure but jsfiddle doesn't recommend the tags to be placed. Please focus on the floating aspect as when I take float:right;in the CSS off of the .news it is working. When I remove the code to make the footer stick at the bottom of the page, it also works.
Your HTML Mark is Messed Please first of all W3C Stabdards, and correct your HTML Markup some thing like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header></header>
<footer></footer>
</body>
</html>
Sencond for your footer please apply clearfix class there after proper markup or just
.Clear{
clear:both;
}
You are good to go (y).
I understand it was a fiddle (THANK YOU!), but your HTML tags are out of place. That being said, the image I see from your fiddle is as follows
<div id="wrapper">
<div id="container">
<!-- REMOVED body HTML tag-->
<div id="content">...</div>
<aside>
<div class="advert">..</div>
<div class="news">..</div>
</aside>
<!-- End Container -->
</div>
<div class="clearfix">..</div>
<footer>..</footer>
<!--End Wrapper-->
</div>
edit
Add bottom margin to your aside.
The clearfix div should be added before the end div of container.
Related
Has anyone had a problem with Material UI dropdown Select and Modals shift the content to the left? I tried to give it position: absolute I also tried to give the MenuItems position: absolute but the content was still shifted.
You can find information about this here: https://github.com/mui-org/material-ui/issues/10000
There are a number of related issues referenced there as well. There are different ways of fixing it depending on how the main window elements under the modal are being positioned.
In my React app, this worked for me.
<body style="overflow-y: scroll;">
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="overflow-y: scroll;">
<noscript>
</noscript>
<div id="root"></div>
<script></script>
</body>
</html>
I'm very new to the html5/css universe.
I'm trying to do something very basic and cannot comprehend why I'm getting the results I am. I would like to add a sidebar to the side of my content. I'm doing this by adding a 310px margin to my content and putting floating my side-content there. Easy!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.sidebar{float:left;width:300px;padding:0;background-color:yellow;}
div.content{margin-left:310px;background-color:green;}
</style>
</head>
<body>
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="content">
<h1>Content</h1>
</div>
</body>
</html>
But something odd is happening, there seems to be a 1em padding above and below the sidebar (yellow), but not the content (green). As a consequence the titles "Sidebar" and "Content" are not aligned. I'm just wondering why the float:left automatically added what seems to be padding? And can this padding be removed? padding:0; seems to have no effect.
try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body,html{margin:0;padding:0px}
div.sidebar{display:inline-block;float:left;width:300px;padding:0;background-color:yellow;}
div.content{margin-left:10px;display:inline-block;float:left;background-color:green;}
</style>
</head>
<body>
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="content">
<h1>Content</h1>
</div>
</body>
</html>
Every browser has its own default ‘user agent’ stylesheet, that it uses to make elements appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. The padding your are having is because of default browser setting. Try a global reset for elements.
eg: * {margin:0;padding:0}
I'm making an ASP.NET MVC5 web app. The default template uses bootstrap, which is fine for almost all of the pages. However I need one page to have width: 100%.
The view I would like to use this is a partial view, so it will be rendered in the .container (see code below), as well as the other partial views.
<div class="container">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
All of them are fine to be fluid, but I need this one to be 100% width. What is an elegant way to do it?
In your partial view, you can use jQuery to modify the CSS of the container div. This would change the width whenever that view is rendered, but would no effect on other pages.
EDIT: As the OP pointed out, Bootstrap's JS will reset the width on window resize. So we have to do the same:
$(document).ready(function(){
setWidthOfContainer();
$(window).resize(setWidthOfContainer);
});
function setWidthOfContainer(){
console.log("Setting width of container to 100%.");
$('div.container').css('width','100%');
}
See the fiddle here: http://jsfiddle.net/GqRd7/
I had a similar problem, where the container was used in the Layout and fine for most pages, but I wanted an odd full width element within that container.
As of Bootstrap 3, you can use the .container-fluid class for 100% width content. However, using this within .container does nothing, as it is limited by the .container width. Here are a few options/workarounds I've come across:
Use sections
If the 100% width content is always used at the beginning or end of the container content, you could define sections in the layout page, and insert the 100% width element in there.
Layout:
<div class="container-fluid">
#RenderSection("containerFluid", required: false)
</div>
<div class="container">
#RenderBody()
</div>
View:
#section containerFluid
{
<div>Full width content.</div>
}
<div>Other content</div>
In your case, if you had no other content on that one page, you could just put the whole page in the section.
Use another layout page
If it's a whole page that needs to be full width, you could just get it to use a different layout. Use partials for the common code and change the .container element to .container-fluid.
Normal layout:
<!DOCTYPE html>
<html lang="en">
#Html.Partial("_LayoutHead")
<body>
#Html.Partial("_Navbar")
<div class="container">
#RenderBody()
</div>
#Html.Partial("Footer")
</body>
</html>
Alternative layout
<!DOCTYPE html>
<html lang="en">
#Html.Partial("_LayoutHead")
<body>
#Html.Partial("_Navbar")
<div class="container-fluid">
#RenderBody()
</div>
#Html.Partial("Footer")
</body>
</html>
Manually close the container and reopen later
I wouldn't really recommend this one, as it's very hacky, and will show up errors, but it does compile and work. This can be used if you have an element somewhere in the middle of the content that you want to be full width for whatever reason.
View:
<div>Some normal content here.</div>
</div> <!--This shows an error for missing a starting tag. The actual starting tag is on the layout page.-->
<div class="container-fluid">
<div>Full width div</div>
</div>
<div class="container"> <!--This shows an error for missing an ending tag. It actually gets closed using the end tag in the layout page-->
<div>Back to normal</div>
I managed to solve it by making the position of the rendered content absolute and left: 0, but <footer> is hidden behind it, so I have to take care of that one separatelly (or remove it altogether). Not the elegant solution I was wishing for, but works.
You can use the razor code to change the page's style in _Layout.cshtml file.
<div class="container" style="#(ViewData["Title"] == "Page1" ? "max-width: 100%;" : "")">
Replace "Page1" with your real page title.
I am trying to create two column layout with header and footer so that left bar, header and footer remains fixed and horizontal and vertical scroll should appear on main content on auto what i have achieved so for is
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
.header{width:100%;}
.left_panel{float:left; width:15%; height:500px; overflow:auto;background-color:#99CCFF;}
.right_panel{float:left; width:85%; height:500px; overflow:auto;background-color:#FFFFCC;}
.footer:{width:100%;margin-top:5px;}
</style>
</head>
<body>
<div class="header">
<h3>HEADER!</h3>
</div>
<div class="left_panel">Left Panel</div>
<div class="right_panel">
<p class="grey">
Main content
</p>
</div>
<div style=""></div>
<div class="footer"><h3 align="center">Footer!</h3></div>
</body>
</html>
Before the footer add in the empty div clear: both in the styling.
In this case you really won't need the clear: both because both the left nav and the main content have the same height, but mind you that the left nav also has overflow: auto and it will also show the scroll for that block (if you have a lot of content there).
The main content already has the scrolls, it depends on the amount of content.
I made this example http://jsfiddle.net/jackJoe/pADyc/, reducing the height of the main content so that you can see the effect.
EDIT: Just so you don't be confused, I changed the main content so that it has the original height, and with a lot of content, it obviously shows the vertical scrolls: http://jsfiddle.net/jackJoe/pADyc/1/
And now you may ask about the horizontal scrolls... Well, it will just show them if the content overflows horizontally, which only happens with block elements (div with a wider width, images, text that cannot be wrapped, you get the picture).
Hi all I'm trying to build a layout using CSS and I'm coming up against a strange problem. Well strange for me. I have 3 divs a Header, a Footer and a MainContent area. Header and Footer must remain at a constant width of 100% while the MainContent area must be fixed centrally at 996px; This is all fine however when I resize the browser window to a width lower than 996px and then scroll the content of the window right the 100% header and footer seem to be truncated and are no longer 100%. I've knocked up a little bare-bones script to illustrate the issue (styles inline to keep it compact). I know I can add overflow:hidden to each of the containers in order to turn off the scrollbars when to window is resized. I've also written a small piece of jQuery to force the div's back to
the width, if the width drops below a certain width. However my question is around the CSS, is there a better pure CSS fix for this issue? Or can anybody explain why this happens?
Thankyou in advance!
DotsC
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div width test</title>
</head>
<body style="border:none; margin:0; padding:0; height:100%; width:100%">
<div id="header-content" style="width:100%; margin:0; padding:0; background-color:#0000ff; height:50px"></div>
<div id="main-content" style="width:996px; margin:0; padding:0; background-color:#ff00ff; height:250px; margin:auto">
<div id="inner-content">
CONTENT OF THE PAGE HERE
</div>
</div>
<div id="footer-content" style="width:100%; margin:0; padding:0; background-color:#00ffff; height:70px"></div>
</body>
I'm not completely clear on your issue, but you can set min-width:996px; on the header and footer to keep them at least as wide as the content.
Try this, and please use HTML5's doctype.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body{margin:0;text-align:center;}
.header,.content,.footer{text-align:left;clear:both;margin:0 auto;}
.header,.footer{width:100%;background-color:blue;height:128px;min-width:996px;}
.content{width:996px;height:512px;background-color:red;}
</style>
<title>Index</title>
</head>
<body>
<div class="header">
Header stuff here
</div>
<div class="content">
Page content stuff here
</div>
<div class="footer">
and your footer...
</div>
</body>
</html>