I'm setting up a very simple fixed-liquid layout. The header is set to 100%, the sidebar is set at a fixed width and floated to the left, and the width of the content area is not defined (so that it fills the remaining space).
It works well in every browser except IE, where approximately 3 pixels of white space is added between the sidebar and the content area.
I can't reproduce the problem in JSFiddle (even when I copy and paste my exact code), so I've attached images instead. The first image was rendered in Chrome and the second was rendered in IE9.
CSS (styles.css)
body {
margin: 0px;
}
#header {
width: 100%;
height: 150px;
background: #F00;
}
#sidebar {
float: left;
width: 280px;
height: 1000px;
background: #0F0;
}
#content {
height: 1000px;
background: #00F;
}
HTML
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
</body>
Have you tried adding a doctype declaration?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
</body>
</html>
Related
I don't understand why this is happening
I am a beginner and hardly know anything so please do make it simple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.main{
background color: yellow;
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>
Actually, this is background-color: yellow; no background color: yellow;
You missed the - between background and color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style media="screen">
.main{
background-color: yellow;
}
</style>
</head>
<body>
<div class="main">this is test</div>
</body>
</html>
Two issues
Your background color definition is wrong. You should use background-color instead of background color.
In order for the div to get displayd inside the dom, you should have some content inside the div or you should define the dimension (width and height) of the div.
.main-1 {
background-color: yellow;
}
.main-2 {
background-color: yellow;
height: 25px;
width: 25px
}
<div class="main-1">
You need to have some contents inside the div,
or you should have defined the dimension of the div
just as below
</div>
<div class="main-2"></div>
I'm trying to add an image to my "welcome" ID but the image wont display.
Here is my CSS and HTML:
body {
margin: 0;
width: 100%;
height: 100%;
font-family: Helvetica;
}
.header {
width: 100%;
height: 35px;
background-color: rgba(0, 0, 0, 0.3);
}
#welcome {
background-image: url(../images/Welcome.jpg);
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<link rel="stylesheet" href="design.css">
<link rel="stylesheet" type="text/css" href="simplegrid.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="header">
<div class="grid grid-pad">
<div class="col-1-3">
<h1>Logo</h1>
</div>
<div class="col-2-3">
About
What we do
Who we are
Our Work
Contact Us
</div>
</div>
</div>
<section id="welcome">
</section>
</body>
</html>
I've tried both single and double quotes inside the url box. I have also added the image to the body using tags and it displayed that way, but for some reason it wont display through the style sheet. I have also tried embedded and inline css, neither has worked.
Any help would be appreciated.
The section will just take a 0px width and height since it doesnt have any content. Either add come content, which will then force it to expand to its height, or gives fixed heights, like below. That should ideally work.
body {
margin: 0;
width: 100%;
height: 100%;
font-family: Helvetica;
}
.header {
width: 100%;
height: 35px;
background-color: rgba(0, 0, 0, 0.3);
}
#welcome {
background-image: url(data:image/jpeg;base64,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);
width: 400px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<link rel="stylesheet" href="design.css">
<link rel="stylesheet" type="text/css" href="simplegrid.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="header">
<div class="grid grid-pad">
<div class="col-1-3">
<h1>Logo</h1>
</div>
<div class="col-2-3">
About
What we do
Who we are
Our Work
Contact Us
</div>
</div>
</div>
<section id="welcome">
</section>
</body>
</html>
The reason it won't display is because you applied height: 100% to #welcome, however, the browser doesn't actually know what that size is because percentage values are relative to the immediate parent. In this case the immediate parent is the body tag which you've also set to height: 100%, but yet again the browser can't calculate that either. This time it's because you have not defined the height of the body tag's parent, which is the html tag. So because the html tag's height is undefined and it is the parent of the body tag, the browser has no reference value to calculate 100% height from. So both the body tag and #welcome's heights are 0.
You can set your CSS like so.
html {
min-height: 100%; // this will reference the viewport but could become bigger than viewport depending on your content
}
body {
height: 100%;
}
#welcome {
height: 100%;
}
Another option would be to set #welcome to be 100% of the viewport like so:
#welcome {
height: 100vh;
}
Hope this helps.
I have an index.html markup as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<iframe id="pagecontent" src="content.html"></iframe>
<footer>...</footer>
</body>
</html>
To apply styles, I use main.css whose content is as follows:
#pagecontent {
border: none;
height: 100%;
width: 100%;
}
The width of the iframe is assigned correctly. That is, when I resize the browser window, the width of the iframe is adjusted accordingly. However, the height is always the same. It is about 300px and does not expand to the height of the browser window. I tried this in FF 45 and IE 11.
Question: What is the reason for the height not being adjusted in the same way as the width when applied to the iframe?
You have height set to 100% but 100% of what? It's always the parent of that element so what is the parent's height set to? If it's not set to anything then the browser has nothing to reference.
So you have to give height in px here
#pagecontent {
border: none;
height: 400px;
width: 100%;
}
working example : https://jsfiddle.net/uxq4pzc1/
#pagecontent {
border: none;
height: 100vh;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<iframe id="pagecontent" src="content.html"></iframe>
<footer>...</footer>
</body>
</html>
iframes by default are inline so try line-height instead or use display: block Also 100% of what? 100% of whatever contains the iframe so you should wrap iframe in an element and set a height explicitly.
Whenever I use an iframe, I wrap it in a block level element and set position: relative. Then I place position: absolute top:0; bottom:0; right: 0; left: 0; on the iframe. Whenever you want control over the iframe, use it's parent instead.
See this post for details
#pagecontent {
border: none;
height: 100%;
width: 100%;
display: block;
}
.box {
height: 20em;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<div class="box">
<iframe id="pagecontent" src="http://example.com"></iframe>
</div>
<footer>...</footer>
</body>
</html>
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!
Today I came across this code. It works as I would expect in Chrome, but it is adding a margin on a wrong element with Firefox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Site Title</title>
<style type="text/css" media="screen">
body {
background-color: #aaa;
margin: 0;
}
#header {
background-color: #fff;
}
#logo {
float: left;
}
#menu {
float: right;
}
.container {
width: 960px;
margin: 0 auto;
}
.main {
margin-top: 36px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
<div class="container main">
Content
</div>
</body>
</html>
Firefox seems to add the margin in the .main rule to the content div, which was expected, and to the header div too.
If I add some text inside the header it would work as expected and the header won't have that margin:
<div id="header"> Some text here
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
</div>
I can also add some text after the header block and it would also do the trick for Firefox.
I can't figure out why is Firefox adding that margin to the header element.
Very strange problem, I don't see why this happens.
It however seems to help when you add a padding of at least 1px to .container.
Also check this demo.
The problem has something to do with the container with automatic height and floating children...
Adding display:inline-block; to the #header will make it works in every browser (well except old IE), will include in the white box the right-floated div too (that now is not), and will continue to adjust the height automatically.
Fiddle: http://jsfiddle.net/AndreaLigios/VfAq7/1/