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}
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 am using core-animated-pages. Some of the the content on the pages will need to be scrolled. I want to set the background color for the pages and I want the background color to cover the scrolled area and not just the current viewport. How do I accomplish this?
More specifically I have:
<core-animated-pages flex transitions="cross-fade-all">
<div>Some small content</div>
<div>Some long text that will need to be scrolled</div>
<div>Another page</div>
</core-animated-pages>
So how do I style so that the background color will cover the scrolled text?
#jeff provides a large part of the answer in specifying relative on the div. Additionally I used the following CSS to position the element clear of title bar above and to ensure the background covers the reminder of the page.
#instructions {
background: #FFF59D;
min-height: calc(100vh - 200px);
top:+30px;
padding:10px;
width:calc(100% - 24px);
}
The pixels subtracted from the % values and the top:+ allow for a menu bar at the top and the padding on the body -- these will need to be adjust depending on the height of the menu bar and the padding.
Now I would like to wrap the divs in paper-shadow but I find when I do this I lose the background. How can I apply a paper-shadow effect to the divs?
The <content> within <core-animated-pages> is styled with position: absolute + top/right/bottom/left: 0. You're not providing the rest of your HTML structure and any other styles that you have defined, but I'm assuming that's what's causing what you're seeing.
Try styling the DOM element that represents the page to use position: relative (you can do this by assigning it the Polymer-shorthand relative attribute):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer core-animated-pages Demo</title>
<style>
core-animated-pages > div {
background-color: orange;
}
</style>
</head>
<body>
<script src="//www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="//www.polymer-project.org/components/core-animated-pages/core-animated-pages.html">
<core-animated-pages selected="1" transitions="cross-fade-all">
<div>Some small content</div>
<div relative>
<h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1>
</div>
<div>Another page</div>
</core-animated-pages>
</body>
</html>
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.
When I shrink the browser width I expect the header div to shrink along with the browser and take up the entire width of the page. Instead the div stops at the browser width and then there is blank space to the right and a horizontal scroll bar. This seems to be a problem with the way I'm using bootstrap but I can't figure it out. Any help appreciated
I'm using the latest minified bootstrap css in my project and have completely simplified my layout below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<div class="row">
<div class="header">
<div class="container">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</body>
</html>
css:
body {
background-color: #CDE0E4;
width: 100%;
}
.header {
position: relative;
height:120px;
background-color:#CDE0E4;
box-shadow: 0 0px 15px #272727;
}
Thanks
What you need is fluid layout (see the docs). This term means that your content takes most available width and is resized when browser window is resized. In this case you should use .container-fluid and .row-fluid instead of their unsuffixed versions.
But you are misusing some of Bootstrap's classes.
.row
Is used when you want to create a multi-column layout. For this you have .span* classes to use inside it (see the docs for examples).
.container
Is used when you want your content to have a white space on the sides (it will be 20px for .container-fluid and maximum available for .container).
.header
If you are using HTML5 (which you do by declaring <!doctype html>), why not to use <header> instead of <div class="header">?
<div class="container">
should come at the top. Row is nested inside container and finally the column is nested inside row. You have reversed the order. That is one problem with your code.
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>