I know this is a question that is asked a lot, but I couldn't find any solution at all to what should be a simple thing.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!--CSS STYLING-->
<link rel="stylesheet" href="../cssReset.css" />
<style>
html, body {
height: 100%;
}
#menu {
height: 100px;
background-color: red;
}
#center {
height: 250px;
background-color: green;
}
#main {
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div id='menu'>
</div>
<div id='center'>
</div>
<div id='main'>
</div>
</body>
</html>
Prety simple, but I just can't make the last div extend to the bottom of the page. If I use "auto" it will not display anything, as there's no content. If I use 100%, it will use my browser height and create unecessary scrollbars.
What can I do?
Thanks.
You could always take the easy way out and use JavaScript. Here's a simple example.
<style>
DIV { margin: 0; }
</style>
<script>
function fixMain() {
var menu = document.getElementById("menu");
var center = document.getElementById("center");
var main = document.getElementById("main");
var height = document.body.offsetHeight - (menu.offsetHeight + center.offsetHeight);
main.style.height = height + 'px';
}
window.addEventListener("load", fixMain, false);
window.addEventListener("resize", fixMain, false);
</script>
may be the following markup code would be what you are looking for just add a "overflow:hidden" in your css style sheet will fix your problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!--CSS STYLING-->
<style>
*{margin:0;padding:0}
html, body {
height: 100%;
overflow: hidden;
}
#menu {
height: 100px;
background-color: red;
}
#center {
height: 250px;
background-color: green;
}
#main {
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div id='menu'>
</div>
<div id='center'>
</div>
<div id='main'>
</div>
</body>
I tested your markup, it shows the last div 'main' extend to the bottom of the page.... what is being displayed for you? And what styling info is there in the referred cssReset.css ( although this would be overridden by the style on the page html
Maybe the following is what you are looking for:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!--CSS STYLING-->
<style>
*{margin:0;padding:0}
html, body {
height: 100%;
}
#menu {
height: 10%;
background-color: red;
}
#center {
height: 25%;
background-color: green;
}
#main {
height: 75%;
background-color: blue;
}
</style>
</head>
<body>
<div id='menu'>
</div>
<div id='center'>
</div>
<div id='main'>
</div>
</body>
</html>
Related
I'm trying to create an animation with 2 div tags, but the child is not appearing in the parent. How do I get the child to show up with background color?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Rotate</title>
</head>
<body>
<style>
.parent {
width: 400px;
height: 400px;
background-color: hsla(200,100%,20%);
};
.child {
width: 50%;
height: 50%;
background-color: red;
z-index: 2;
};
</style>
<div class = "parent">
<div class = "child"></div>
</div>
</body>
</html>
The main culprit is the use of a semicolon after the .parent css class declaration. That semicolon causes subsequent declarations (.child in this case) to be ignored:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Rotate</title>
</head>
<body>
<style>
.parent {
width: 400px;
height: 400px;
background-color: hsla(200,100%,20%);
} /* <------ Removed semicolon */
.child {
width: 50%;
height: 50%;
background-color: red;
}
</style>
<div class = "parent">
<div class = "child"></div>
</div>
</body>
</html>
I also removed z-index: 2; from .child since it is not needed in this example.
On other tags, using BFC can clear the float, why the body is not available.
As expected, add overflow: hidden on the body to form a BFC, which can achieve the effect of clearing the float, but this is not the case?
div.f {
float: left;
width: 100px;
height: 100px;
background: red;
margin-right: 1px;
}
body {
overflow: hidden;
border: 1px dashed skyblue;
}
.p {
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <div class="p">
<div class="f"></div>
<div class="f"></div>
</div> -->
<div class="f"></div>
<div class="f"></div>
</body>
</html>
because overflow has a special behavior when applied to body element and it get propagated to html element instead. You need to add overflow:auto to html to avoid this:
div.f {
float: left;
width: 100px;
height: 100px;
background: red;
margin-right: 1px;
}
body {
overflow: hidden;
border: 1px dashed skyblue;
}
html {
overflow: auto;
}
<div class="f"></div>
<div class="f"></div>
UAs must apply the overflow-* values set on the root element to the viewport. However, when the root element is an [HTML] html element (including XML syntax for HTML) whose overflow value is visible (in both axes), and that element has a body element as a child, user agents must instead apply the overflow-* values of the first such child element to the viewport. The element from which the value is propagated must then have a used overflow value of visible. ref
So you body element will have again overflow:visible after the propagation
To have it working on the body, you can use display:flow-root, I believe this is have to do with how the width of the content affects the body display/render, and by adding display:flow-root it will clear floated tag inside it.
div.f {
float: left;
width: 100px;
height: 100px;
background: red;
margin-right: 1px;
}
body {
display: flow-root;
border: 1px dashed skyblue;
}
.p {
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--<div class="p">
<div class="f">AAAA</div>
<div class="">test</div>-->
</div>
<div class="f"></div>
<div class="f"></div>
</body>
</html>
I have created a lightbox link which contains a Div. Inside the Div element there is a form, however the div isn't expanding to 100% of the page body. Does anyone know why?
Here's the code:
CSS:
<!DOCTYPE html>
<html>
<head>
<style>
#import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);
body {
background-color: #C13E18;
width: 750px;
overflow:scroll;
overflow-x:hidden;
}
.form {
width: 100%;
float: left;
}
</style>
</head>
HTML:
<body>
<div id=bookingpage>
<div id="form"> <object type="text/html" data="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=nb3dui</div>" style="overflow:auto;">
</object></div></div>
</body>
</html>
You're applying the style to a class called "form".
Your actual div doesn't have the class it has an ID of form. The hash tag is the ID selector.
Current
.form {
width: 100%;
float: left;
}
Should be
#form {
width: 100%;
float: left;
}
You might also have to specify 100% width for the object also:
#form, #form object{
width: 100%;
float: left;
}
#form {
width: 100%;
float: left;
}
On css, any item start with dot is class, start with # is id.
Your body script is incorrect.
<!DOCTYPE html>
<html>
<head>
<style>
#import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);
body {
background-color: #C13E18;
width: 750px;
overflow:scroll;
overflow-x:hidden;
}
#form {
width: 100%;
float: left;
}
</style>
</head>
<body>
<div id=bookingpage>
<div id="form">
<object type="text/html" data="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=nb3dui" style="overflow:auto;">
</object>
</div>
</div>
</body>
</html>
You placed closing div inside data url.
Say I have 2 divs next to each other in a container of fixed width. Horizontally next to each other that is. Then say one div is removed, how can i get the other div to fill up the space next to it where the other div was? As in it should expand its width.
Here's a way to do it without Javascript.
I don't think this will work in IE... I've tested it in Chrome, Firefox and Safari, but this might work for you.
Here is a fiddle for it.
CSS:
#container {
width: 400px;
}
#left {
width: 200px;
height: 200px;
background: #ddd;
float: left;
}
#right {
width:100%;
float: right;
height: 200px;
position: relative;
background: #CCC;
}
#left + #right {
width: 200px;
}
Javascript:
function removeElement(divNum) {
var d = document.getElementById('container');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
HTML:
<div id="container">
<div id="left"></div>
<div id="right"></div>
<input onclick="removeElement('left')" type="button" value="X"/>
</div>
You can use jQuery to manipulate the CSS properties and visibility. In this example I alter the widths.
You can do it with display: table; but it won't work in IE 7 and below. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test div</title>
<style type="text/css">
#container {
width: 400px;
display: table;
}
#row-container {
display: table-row;
}
#left, #right {
display: table-cell;
height: 200px;
}
#left {
background-color: red;
}
#right {
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="row-container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
</html>
My html page is:
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
My css file is:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
display: block;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
But the content div is not centered properly.
I am using IE7 to view this page.
You should add a <!doctype> to the beginning of your document, also remove the display: block; from your div selector, a div is by default a block level element so this declaration has no meaning. (this won't break the layout, it just makes no sense to tell an already block level element to be block again.)
Other than that, your CSS is perfectly fine :)
HTML:
<!doctype html>
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
CSS:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
http://jsfiddle.net/u5w8F/
For IE 7 quirksmode (and IE 6) you can add
html, body{
text-align: center;
}
div#content{
text-align: left;
}
to center the div... (old skool)