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;}
Related
I'm having an issue with my code and it seems easy but I can't get my head around it.
I'm trying to make the main div full vh so the content auto height should be 100vh - the height of the title box.
However, I keep getting the scroll bar for the length of the title box. Any fix?
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
.maindiv {
min-height: 500px;
height: 100vh;
background: red;
}
.maindiv-inner {
position: relative;
height: 100%;
width: 100%;
background: blue;
}
.maindiv-inner-content {
position: relative;
height: 100%;
width: 100%;
background: yellow;
}
.titlediv {
height: 200px;
}
</style>
<div class="maindiv">
<div class="maindiv-inner">
<div class="titlediv">
Title 1
</div>
<div class="maindiv-inner-content">
</div>
</div>
</div>
</body>
</html>
You can easily solve this issue by changing some of the CSS classes like this.
body{
padding:0;
margin:0;
}
.maindiv
{
/*min-height:500px;*/
height: 100vh;
background:red;
position: relative;
}
.maindiv-inner
{
position: relative;
background:blue;
}
.maindiv-inner-content
{
position:fixed;
background:yellow;
height:100%;
width:100%;
}
.titlediv
{
height:200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="maindiv">
<div class="maindiv-inner">
<div class="titlediv">
Title 1
</div>
<div class="maindiv-inner-content">
<div>Something in Content</div>
</div>
</div>
</div>
</body>
</html>
does the following provide what you want?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
body {
margin: 0;
}
.maindiv
{
min-height:500px;
height:100vh;
background:red;
width:100%;
background:blue;
}
.maindiv-inner-content
{
height: calc( 100% - 200px );
width:100%;
background:yellow;
}
.titlediv
{
height:200px;
}
</style>
<div class="maindiv">
<div class="titlediv">
Title 1
</div>
<div class="maindiv-inner-content">
</div>
</div>
</body>
</html>
Basically you need to remove the margin from the body, otherwise if you set the div to 100vh you will get a scrollbar.
Then you can use calc to make the height of the div you want too be 100% - height-of-titlediv.
I removed the maindiv-inner as I did not understand what it was there for, so I just thought it was unnecessary.
Also the relative positioning seemed unnecessary so I removed that as well.
simple way to achieve the bahavior is the use of either flexbox or CSS-Grid. With CSS-Grid you declared the grid as 2 rows by display: grid; grid-template-rows: min-content auto;. The title row will have the hieght min-content means that it will only take up as much height as needed or declared. The 2nd row with the hight of auto will take up all remaining height by default.
body {
margin: 0;
}
.maindiv {
background: red;
}
.maindiv-inner {
box-sizing: border-box;
height: 100vh;
display: grid;
grid-template-rows: min-content auto;
background: blue;
}
.maindiv-inner-content {
background: yellow;
}
.titlediv {
height: 100px; /* changed for demo */
}
<div class="maindiv">
<div class="maindiv-inner">
<div class="titlediv">
Title 1
</div>
<div class="maindiv-inner-content">
</div>
</div>
</div>
I'm building a website that I want to have a minimum height of 100%, so if there's not too much content on the page, the footer will be at the bottom of the page.
If there's more content, it will simply expand.
I used a website that has this as an example, and changed it to my needs.
At first it seemed to work great, but now it's showing two problems:
- The site always seems to be a bit more than 100% height; a small part extends beyond the screen.
- The footer isn't displayed at the bottom, but rather somewhere in the middle, despite having set the Bottom property.
This is the markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Master Language="VB" CodeFile="Site.Master.vb" Inherits="Site" %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site (bèta)</title>
</head>
<body>
<form id="form1" runat="server" autocomplete="off" class="formCss">
<ajax:ToolkitScriptManager ID="Toolscriptmanager1" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true">
<Scripts>
<asp:ScriptReference Path="~/js/jquery-1.8.2.min.js" />
<asp:ScriptReference Path="~/js/jquery.curvycorners.packed.js" />
<asp:ScriptReference Path="~/js/Site.jquery.js" />
<asp:ScriptReference Path="~/js/jquery.colorize-1.3.1.js" />
</Scripts>
</ajax:ToolkitScriptManager>
<asp:Label ID="ContentTitle" runat="server" CssClass="content_title"></asp:Label>
<div id="container">
<div id="headerContainer">
<div id="header">
<telerik:RadMenu ID="HoofdMenu" EnableEmbeddedSkins="false" Height="20px" EnableImageSprites="false" Font-Size="11px" runat="server" CollapseDelay="0" ExpandDelay="0" ClickToOpen="true" ExpandAnimation-Type="None" CollapseAnimation-Type="None" CausesValidation="false"></telerik:RadMenu>
</div>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="Content" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="footer">
This is the footer
</div>
</div>
</form>
</body>
</html>
This is the CSS:
html,body
{
margin:5px;
padding:0;
height:100%; /* needed for container min-height */
font-family:tahoma;
font-size:11px;
color:#000000;
background-color: #8FB1B1;
/*background-image: url(../../Images/Afbeelding1.jpg);*/
}
.formCss
{
height:100%;
min-height: 100%;
}
div#container
{
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:100%;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
background-color: #FFFFFF;
}
div#headerContainer
{
background-color: #8FB1B1;
}
div#header
{
padding-left:5px;
padding-top: 12px;
height: 30px;
background-color: #1C2948; /*#833D62;*/
z-index: 100;
}
div#content
{
padding-left: 10px;
padding-right: 10px;
padding-top:10px;
background-color: #FFFFFF; /* #E0E5D7; #FFFFFF;*/
padding-bottom:25px; /* bottom padding for footer */
/*filter:alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80; */
}
div#footer
{
position:absolute;
height: 25px;
bottom:0; /* stick to bottom */
background:#FFFFFF;
padding-left: 10px;
}
I have put the code in a Fiddle: http://jsfiddle.net/7uuD6/1
(It contains ASP.NET code that JSFiddle can't handle, unfortunately)
What am I doing wrong?
Cheers,
CJ
There are two methods you could use to maintain a sticky footer, they depend on your browser support though.
If you do not care about IE7 or Firefox versions earlier than 17 you can use this approach which uses the box-model border-box property.
Border-box Version
For this you will only need two elements.
HTML
<div class="page">
</div>
<div class="page-footer">
</div>
CSS
*, *:before, *:after {
/* Fix the box model to include padding */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
position: relative;
}
.page {
min-height: 100%;
position: relative;
margin-bottom: -150px;
padding-bottom: 150px;
}
.page-footer {
height: 150px;
position: relative;
z-index: 1;
}
If you need to support older browsers then you will need to use an extra div to push the footer down.
Legacy Version
The code you will need for this version is as follows.
HTML
<div class="page">
<div class="page-push">
<!--
This div just pushes the footer down so content does not overflow it
-->
</div>
</div>
<div class="page-footer">
</div>
CSS
html, body {
height: 100%;
margin: 0;
position: relative;
}
.page {
min-height: 100%;
position: relative;
margin-bottom: -150px;
}
.page-push,
.page-footer{
height:150px;
}
.page-footer {
position: relative;
z-index: 1;
}
For that I recommend this: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
div#container {
min-height:100%;
position:relative;
}
div#header {
background:#ff0;
padding:10px;
}
div#content {
padding-bottom:___px; /* Height of the footer */
}
div#footer {
position:absolute;
bottom:0;
width:100%;
height:___px; /* Height of the footer */
background:#6cf;
}
if you apply and adjust to your html/css it wil lwork fine.
//NOTE//
It is a risk to use a absolute footer!
Try this jquery
Sticky Footer jquery
In a nutshell, i want a right div float to extend vertically 100%
but it only works when i don't include <doctype> on my html
in today's standard, do i really have to add <doctype>?
This is the result in Internet Explorer:
this is just simple html
<html>
<head>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#left {
background:yellow;
float:left;
width:70%;
min-height:100%;
}
#right {
background:pink;
float:right;
width:30%;
min-height:100%;
}
</style>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
in today's standard, do i really have to add <doctype>?
You don't have to do anything, but the absence of the DOCTYPE is essentially asserting that you conform (in the loosest sense of the term) to an unknown/inconsistent "quirks" standard.
I imagine the solution is as simple as setting the height of the parent container to 100% or to a specific pixel height.
ensure that height is set on the HTML and BODY elements.
ensure that height is set on any parent containers.
Working example: http://jsfiddle.net/7xxFj/
<div id="one">
First column
</div>
<div id="two">
second column
</div>
HTML, BODY { height: 100%; }
#one { height: 100%; width: 30%; float: left; background-color: red; }
#two { height: 100%; width: 70%; float: left; background-color: blue; }
As #BoltClock pointed out in the comments, you probably want a layout that can extend beyond 100%. This requires a little more effort (but still works well within the standard).
This article shows several methods for accomplishing layouts with equal column heights. More methods here.
If you are thinking of considering IE (any version for that matter, lets not digress to this topic), then you are better of specifying the DOCTYPE. I have seen many pages which do not do this properly through IE into the famous Quirks mode.
Use this Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
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>
Sorry if I can't explain with code, I'm newbie with CSS. How can I do this?:
HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS DIV issue</title>
</head>
<body>
<div id="div1">
<img src="image-800x216.gif" />
</div>
<div id="div2">
<img src="image-567x43.gif" />
</div>
</body>
</html>
Is intended to work with IE (all), Opera, Safari, Chrome and FF. Is possible or I'm dreamer?
http://jsfiddle.net/XTkA2/30/
#div1 {
position: absolute;
top: 38%;
right: 1em;
width: 62%;
max-width: 50em;
outline:#999 solid 1px;
}
#div2 {
position: absolute;
bottom: 0.63em;
right: 1em;
width: 46%;
max-width: 35.44em;
outline:#999 solid 1px;
}
I've added outline for you to make divs visible. You may delete them.
Uhm...i don't understand what is your intention...but...do you want to align two images, one above another on the page center or one beside another or both images on right-bottom?
If you want to align elements in page, try this:
/* Both images aligned side-by-side at page center */
div.div1, div.div2
{
float: left;
margin: 0 auto;
}
/* One images at right, another at left */
div.div1
{
float: left;
}
div.div2
{
float: right;
}
Page bottom alignment is not possible...i guess.
Put you can use margin-top css property to do the trick.
Hope it helps.
After applying and mixing your all helpful answers and hours and hours of reading and trying css/html code from different sites... I have what I want; well, almost in 95% due to browsers compatibility. Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS DIVs alignment issue</title>
<style type="text/css">
#div1 {
width:62%;
min-width:16em;
max-width:50em;
right:1em;
top:38%;
margin-right:1em;
height:auto;
z-index:0;
position:absolute;
}
#div2 {
width:46%;
min-width:10em;
max-width:35.44em;
right:1em;
bottom:6%;
margin-right:1em;
height:auto;
z-index:0;
position:absolute;
}
.stretch {
width:100%;
height:auto;
min-width:10em;
}
</style>
</head>
<body>
<div id="div1">
<img src="http://placekitten.com/800/216" class="stretch" />
</div>
<div id="div2">
<img src="http://placekitten.com/567/43" class="stretch" />
</div>
</body>
</html>
By the way, although I prefer placehold.it to placekitten.com I use the last because the images must resize while screen does too.
You can check the result here. (Thanks to ted)