I've been trying to add a header to my website, but I cannot get the container to fit the full width of the screen, despite the width being set to 100% or auto. It always has about a ~5px margin on both the left and right, even with margin and padding both set to 0.
HTML:
<div id="header">
<h7>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</h7>
</div>
CSS:
body div#header{
width: 100%;
margin: 0;
padding: 0;
background-color: #c0c0c0;
}
Add
body, html{
margin:0;
padding:0;
}
to your CSS.
Browsers put default margins and/or paddings when rendering websites. With this you can avoid that.
body, html {
margin: 0;
padding: 0;
}
div { width: 100%;
margin: 0;
padding: 0;
background-color: #c0c0c0;
}
OR
html, body, div {
margin:0;
padding:0;
border:0;
outline:0;
background:transparent;
}
This is because it's being padded by it's parent. Do you have it contained in another div? Or maybe you have a padding/margin property set on the document's body? Please supply your full CSS. If you don't it's because the browser is adding it for you, so explicity set it using:
body {
margin: 0;
padding: 0;
}
put a zero margin on your body/html tags in your CSS. See if that helps.
You'll need to add a reset such as:
html, body, div {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
All browsers have a default stylesheet. You need to override it with a reset.
Try this, i hope this helps:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Header & Footer</title>
<style type="text/css">
/* Global */
* {
margin: 0;
}
html, body {
height: 99%;
}
/* Header */
.container{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
width:100%;
font-family:Segoe UI;
color:#fff;
}
.container-header{
padding-top:5px;
padding-left:20px;
}
/* Footer */
.footer{
background-color:#333030;
width:100%;
font-family:Segoe UI;
color:#fff;
}
.footer img{
padding-left:15px;
}
/* Page Content */
.content{
height: auto !important;
}
.container p{
font-size:12pt;
font-weight:bold;
}
</style>
</head>
<body>
<!-- Header Div -->
<div class="container">
<table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px">
<tr></tr>
<tr>
<td></td>
<td>
<div style="padding-left:100px;font-size:36px;">Header</div>
</td>
</tr>
<tr></tr>
</table>
<!-- Page Content Div -->
<div class="content">
Blah Blah
</div>
</div>
<!-- Footer Div -->
<div class="footer">
<table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px">
<tr></tr>
<tr>
<td></td>
<td>
<div style="padding-left:100px;font-size:36px;">Footer</div>
</td>
</tr>
<tr></tr>
</table>
</div>
</body>
</html>
Try out the following code:
<!DOCTYPE html>
<html>
<head>
<style>
body, html{
margin:0;
}
</style>
</head>
Related
I am beginner in this field.I want the logo(image used) to appear on the strip itself but when I use this code it appears below that strip.Basically, I want a strip with background colour black and a heading/title in the centre with a logo at the rightmost corner of that coloured strip.
Here's my code:-
<html>
<head>
<title>MIT PULSE-Home</title>
<style>
.topbar{
color:white;
background-color:black;
height:125px;
width=100%;
text-align: cente
border-bottom:solid 2px red;
}
#Shift{
margin-top:10px;
font-size:100px;
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="topbar">
<p align="center" style="font-size:100px">MIT Pulse</p>
<img src="logo.jpg" align="right" height="75">
</div>
</body>
</html>
Are you looking for something like this? I corrected a few mistakes in your CSS code, added position: relative; to your class .topbar and created a new class .logo which I added to the <img>-Tag.
Also, keep in mind the comment from ThisGuyHasTwoThumbs, you shouldn't use inline CSS
For further reading on relative/absolute positioning, I recommend the MDN articles: https://developer.mozilla.org/en-US/docs/Web/CSS/position
<html>
<head>
<title>MIT PULSE-Home</title>
<style>
.topbar{
color:white;
background-color:black;
height:125px;
width: 100%;
text-align: center;
border-bottom:solid 2px red;
/* Position the element relative */
position: relative;
}
#Shift{
margin-top:10px;
font-size:100px;
}
.logo {
/* Absolute position for this element */
position: absolute;
/* Distance from the right side */
right: 0;
/* Center image vertically */
top: 50%;
transform: translateY(-50%);
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="topbar">
<p align="center" style="font-size:100px">MIT Pulse</p>
<img class="logo" src="http://via.placeholder.com/75x75" align="right" height="75">
</div>
</body>
</html>
The logo is appearing below the title because <p> is a block-level element -- that is, it will force the next element to appear on the next line.
By making the title a span with inline-block display you can achieve something like this snippet. (As with other replies I've fixed some typos and removed unused CSS. Also, I second the comment regarding inline CSS.)
EDIT: more on layouts & block vs. inline at this MDN tutorial
<html>
<head>
<title>MIT PULSE-Home</title>
<style>
.topbar{
color:white;
background-color:black;
height:125px;
width:100%;
text-align: center;
border-bottom:solid 2px red;
}
.right {
float: right;
}
.title {
font-size: 100px;
display:inline-block;
margin: 0 auto;
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="topbar">
<span class="title">MIT Pulse</span>
<img src="logo.jpg" class="right" height="75" >
</div>
</body>
</html>
I want a frame-like behavior, where I have a header (non-scrolling), footer stays at the bottom (non-scrolling), and in the middle to have two vertical divs. If content in these divs is too long for a window, they should show their own scrollbars - that is- no scrollbars in the body itself. I can't figure out how to make the div's width be: current-window-size - (footer + header). Is there a way to do it with CSS alone? (browser support needed IE9+)
HTML
<body>
<header>
<p>Header here</p>
</header>
<div> Something else here</div>
<main>
<div id="pane-1" style="background-color:#eee;">
Have your own scrollbar
</div>
<div id="pane-2" style="background-color:#ccc;">
Have your own scrollbar too
</div>
</main>
<footer style="background-color: #FFC;"> Footer here - should not scroll</footer>
</body>
CSS
html,
body {
overflow: hidden;
margin:0;
}
#pane-1,
#pane-2 {
display: inline-block;
vertical-align: top;
overflow: auto;
width: 49%;
}
footer {
height: 70px;
width:100%;
position: absolute;
bottom: 0;
}
Here is my code
http://codepen.io/anon/pen/tyvAe
Why not use the magic of semantic HTML and absolute positioning (note, background colors are used below to clearly show the various sections)
HTML
<header></header>
<section></section>
<section></section>
<footer></footer>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
header, footer, section {
position:absolute;
width:100%;
}
header, footer {
height:50px;
background:red;
}
footer {
bottom:0;
}
section {
width:50%;
overflow:auto;
background:blue;
top:50px;
bottom:50px;
}
section:last-of-type {
background:yellow;
left:50%;
}
I don't know a realy good way to do this without Javascript, but here's mine with as little Javascript as possible (you'll need JQuery for this one):
http://jsfiddle.net/g13ogq2u/2/
Basically it's for the CSS:
html {
height:100%;
width:100%;
}
body {
width:100%;
height:100%;
margin: 0px;
padding: 0px;
background-color: #ffffff;
}
.header {
width:100%;
height: 50px;
min-height:50px;
padding:0px;
background-color:#CCAA00;
}
.page {
min-height: 100%;
height: auto !important;
/*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -70px;
/*Allow for footer height*/
vertical-align:bottom;
}
.content {
height:100%;
width:100%;
margin:0;
position:relative;
overflow:hidden;
}
.subContent {
height:100%;
width:50%;
min-height:100%;
margin:0;
float:left;
overflow:auto;
}
#subContentA {
background-color:#EEEEEE;
}
#subContentB {
background-color:#CCCCCC;
}
.pushFooter {
height: 70px;
/*Push must be same height as Footer (including its paddings) */
min-height:70px;
}
.footer {
height: 70px;
/*Push must be same height as Footer */
min-height:70px;
width:100%;
padding:0px;
margin:0px;
background-color:#FFFFCC;
position:relative;
overflow:hidden;
}
The little JQuery code is:
$.fn.doFitSize = function () {
var dHeight = $(window).height();
var hHeight = $(this).prevAll().outerHeight();
var fHeight = $(this).nextAll().outerHeight();
var cHeight = dHeight - hHeight - fHeight;
$(this).height(cHeight);
}
$(document).ready(function () {
$('.content').doFitSize();
});
$(window).resize(function () {
$('.content').doFitSize();
});
And the HTML would be:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
/* add mentioned style here */
</style>
<script src="jquery-1.9.1.js" type="text/javascript" ></script>
<script type="text/javascript">
/* add mentioned script here */
</script>
</head>
<body>
<div class="page">
<div class="header">
<span>this is the header</span>
</div>
<div class="content">
<div id="subContentA" class="subContent">
<span>This is the left content.</span>
</div>
<div id="subContentB" class="subContent">
<span>This is the right content</span>
</div>
</div>
<div class="pushFooter"></div>
</div>
<div class="footer">
<span>And this is the footer</span>
</div>
</body>
</html>
Hope it helps ;)
You can do this with css...
#pane-1, #pane-2 {
width: 200px;
height: 200px;
overflow: scroll;
}
Depending on what you need, you may also like to play with css property: max-height in place of height.
I have a header div which is absolute so I want to make it fixed, but if I do that the contents inside starts changing position on resizing window. What trick can I use to achieve a fixed header div which do not move contents on window resize ?
Below is my code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Client </title>
<style type="text/css">
.heading {position:fixed; visibility:show; width:100%; left: 0px; top: 0px; z-index:3;
border-bottom:5px solid #ccc; }
header{
position:absolute;
width: 100%;
height: 60px !important;
z-index:7;
top: 0px;
}
/*My div position*/
.positioning-container{position:relative;
width:1000px; margin:0 auto 0 auto;
black solid; padding:0px;
padding:60px 0 30px 0;
border-bottom:0px; padding:0px;
background:#eee;}
.inner-container{position:relative;
background:#fff; padding:0px;
padding:60px 0 30px 0; }
/*My div position*/
</style>
</head>
<body>
<div class="positioning-container">
<div class="inner-container" align = "center">
<header>
<div class= "heading" style="width:100% ; height:50px; background-color:#00A5C6">
<table id ="headertable" align="left"><tr><td>
<h2 class= "logo">Client Review</h2><td> </td></td><td>
<label>Search</label><input typ= "text"></td>
<td>search</td>
<td>Login</td>
<td>Add Client</td>
<td>Logout</td>
<td align="left" class="profile"><img src="bhubezi/images/logos/nopic.png" width="50"
height="40"></td>
</tr>
</table>
</div>
</header>
<div class="content">
content
</div>
</div>
</div>
you can give your .heading class a minimum width.
so on your css add something like
min-width:700px;
on your .heading styles
I need a div to expand to the whole page width of the HTML document depending on its content.
Here is the scenario:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Traditional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>testing</title>
<style type="text/css">
body
{
background-color:pink;
padding:0;
margin:0;
}
#testDiv
{
background-color:red;
}
</style>
</head>
<body>
<div id="testDiv">
<table width="2000px">
<tr>
<td>
test
</td>
</tr>
</table>
</div>
</body>
</html>
testDiv will only stretch to the size of browser window, but not the whole page itself. I have gotten this behaviour to work with a table layout, but I would prefer if someone could provide a CSS solution. I also need the solution to work for IE 7.
To stretch to the size of content inside of the <div> just set the display rule to inline-block, For IE7 you will have to include a couple hacks as well.
Example
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
<style type="text/css">
body
{
background-color:pink;
padding:0;
margin:0;
}
#testDiv
{
background-color:red;
display: inline-block;
/* IE 7- hacks */
zoom: 1;
*display: inline;
}
</style>
</head>
<body>
<div id="testDiv">
test
<div style="width: 2000px"></div>
</div>
</body>
</html>
try with this. :)
html {width: 100%; height: 100%; padding: 0; margin: 0;}
body {width: 100%; height: 100%; position: relative; padding: 0; margin: 0;}
#testDiv {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
I have an outer element that is a fixed size with a footer immediately below it. Inside the element are two sections; the first should be a fixed height and the second should expand to fill the other element but not overflow it.
Let me show you.
How do I do this? setting height: 100% on the second element causes it to oveflow the outer element and overrun the footer. The only other alternative I see is to se the height explicitly in pixels which seems like it would be a mess.
What's the right way to do this?
Edit: setting overflow-y: hidden will work in this very limited example, but its not actually limiting section.inner2 and will look weird if for example I want to give section.inner2 a border-radius
The simplest solution that I can think of (and I don't think very much) is just using position: absolute;: http://jsfiddle.net/WLZmT/3/.
HTML:
<div id="outer">
<div id="fixed">
Fixed.
</div>
<div id="fluid">
Fluid.
</div>
</div>
CSS:
#outer {
position: relative;
background: rgb(255, 200, 200);
padding: 10px;
height: 400px;
}
#fixed {
height: 100px;
padding: 10px;
background: rgb(200, 255, 200);
}
#fluid {
padding: 10px;
background: rgb(200, 200, 255);
position: absolute;
top: 100px;
bottom: 10px;
left: 10px;
right: 10px;
}
like this?
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
left:50%;
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
head
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
footer
<!-- Footer end -->
</div>
</div>
</body>
</html>