I'm looking for suggestions how to set a div to min-height:100% when it has a 15px margin-top? What I want is for the div to touch the bottom of the screen (without triggering scrollbars), however when the content is too large to fit, it automatically expands below the screen limit, triggering scrollbars. Here's what Ive got so far:
<!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>
<style type="text/css">
body, html{height:100%; margin:0;}
body{background:#AAA}
#main{position:relative; width:970px; margin:0 auto; border:solid 1px #666; background:#FFF; margin-top:15px; min-height:100%;}
</style>
</head>
<body>
<div id="main">
try duplicating this content until it does not fit in the box
</div>
</body>
</html>
You can use the following css to fix the div to the bottom
#main{position:fixed; bottom : 0px; width:970px; margin:0 auto; border:solid 1px #666; background:#FFF; margin-top:15px; min-height:100%;}
I found a solution: Use the new CSS3 box-sizing rule on body and set it to padding-top:15px; remove the margin-top on #main and it works exactly as described above in all new browsers.
Related
I have simple task with two div. I need that both have colored borders and inner div must use all space. Here my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
.d1{ width:150px;height:150px;border:solid 10px black;background:red;}
.d2{ height:100%; width:100%; border:solid 20px blue; background:green;}
</style>
</head>
<body>
<div class=d1>
<div class=d2>some text</div>
</div>
</body>
</html>
But browser (IE, Chrome) do not catch that I set borders and 'divs' to show with artifacts.
Anybody catch this bug?
Do this instead:
<style type='text/css'>
.d1{ width:110px;height:110px;border:solid 10px black;background:blue; padding: 20px;}
.d2{ height:100%; width:100%; background:green;}
</style>
I think that gives you the effect you're after, basically replacing the border on .d2 by using a background colour on .d1, adding padding to .d1 to act as a border of sorts.
If you add any margin or padding to .d2 it's going to add to the 100% height and width values which means they'll overflow.
Hope that makes sense.
edit: note how I've compensated for a padding of 20px by reducing the height and width by 40px (because it will add padding on both left and right and also top and bottom, making for 40px additional width and height)
If you know width and height of parent div, you can set correct styles for the children, without percentage, so this jsFiddle may do a work for you.
Borders aren't included in your width/height, then your 150x150 will "become" a 170x170 with a 10px border.
Two solutions :
Take borders in account, increasing your div width/height
Use more divs, and forgot borders
Here is a Jsfiddle to show you both solutions
Because you specified borders thickness the height and width will not take that into account to show nested inside the borders. A solution for your problem if I understand it correctly you can achieve as follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
.d1{ width:150px;height:150px;overflow:auto;border: solid 10px black;background:red;}
.d2{ height:73%; width:73%;border: solid 20px blue; background:green;}
</style>
</head>
<body>
<div class="d1">
<div class="d2">some text</div>
</div>
</body>
</html>
Basically you are having issues with the Html box model.
you can either figure out the maths your self or depending on which browsers you have to support there is the new "box-sizing" css style which changes how the box model works.
here is a fiddle showing how it can be used:
http://jsfiddle.net/EHUab/
I have plans to create carousel with a background that spans the width of the browser.
To do this I set margin:0; padding:0; in the body and set my div that spans the background to width:100%. I chose this because it contains another div that has a left, and right margin:auto; making the second div centred within the div spanning the browser.
I encountered a problem trying to add the background image to the div that spans the width of the browser. When I use background-repeat:repeat-x; it is still just a 550x1 px sliver on the far left of the browser. It does not repeat. I have figured this is due to the 100% width. If I let go of the 100% width I encounter a problem of the inner div being forced to the right or left, depending on the resolution of the monitor being used. I do not want this to happen.
Does anyone know of a way I can achieve/simulate 100% width and still use background-repeat:repeat-x;?
EDIT, i use 2 divs because i am applying silverlight, and would like to place it kindof artistically on the screen. here is my code, it might make more sence what i am doing then. and if you still believe 1 div is better than 2, tell me that im wrong, but here is the code. it is very simple because much will be done in silverlight, or at least i thought it would be somewhat simple, but that's how it goes.
HTML
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="imd_data_Home" %>
<!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 runat="server">
<title>Home</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id=NavContainer>
<div id="Navigation">
<img src="img_data/dem_Logo.png" id="Logo"/>
</div>
</div>
<div id="Carousel">
<div id="SilverlightContainer">
</div>
</div>
</body>
</html>
CSS
body
{
margin:0;
padding:0;
background-color:#000061;
}
#NavContainer
{
width:900px;
margin-left:auto;
margin-right:auto;
}
#Navigation
{
height:75px;
width:100%;
}
#Logo
{
float:left;
}
#Carousel
{
height:550px;
width:100%;
background-image:url('img_data/carousel_bar_01.png');
background-repeat:repeat-x;
}
#SilverlightContainer
{
height:550px;
width:900px;
margin-left:auto;
margin-right:auto;
}
You don't have to take two div's to achieve what you want.
Just take your background image in the body like
body{ background:url(image path here) repeat-x}
and give your div
certain width and give it a style like
div#yourID{margin:auto}
This will work for you just fine.
You simply need only one div, the one you want in the middle.
<div class="centered"></div>
You set the background on the body:
body {
min-height: 550px;
background: url(path/image.png) repeat-x;
background-size: 1px 550px;
}
And then you have the centered div:
.centered {
min-height: 150px; /* whatever values you wish for height and width */
width: 300px;
margin: 75px auto; /* whatever values you wish for top/ bottom margin */
}
You can see it live at http://dabblet.com/gist/2774626
Try this:
body {
width:100%;
height:100%;
background:url(your-image.jpg) repeat-x;
position:absolute;
}
Solved! The problem was that I was not putting in the right location for the image carousel_bar_01.png.
I am making a website thats 960px wide but I want images on both sides of the header that you can see if you have a bigger screen.
because I want to keep the site 960px wide I need these extra side images to not be counted by the browser, I can get it to work on the left
see here:
http://www.wireframebox.com/test/sideimages/index_leftworks.html
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">
body { margin: 0; padding: 0; border: 0; background-color:#096 }
img { border: 0; }
#main {
width:960px;
height:216px;
background-image:url(main.jpg);
position:relative;
top:0; margin: 0 auto;
}
#left {
width:170px;
height:216px;
background-image:url(left.jpg);
float:left;
left:-170px;
position:relative;
}
#right {
width:170px;
height:216px;
background-image:url(right.jpg);
float:right;
left:170px;
position:relative;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
if you make your window thinner the left red image disappears off the site without causing the browser window to get a bottom scroll bar, however when I try and do the same thing to the right side it doesn't work
see here
http://www.wireframebox.com/test/sideimages/
Code is equal, only <div id="right"></div> is missing
the css is in the source.
you can also see it being used on this site to show the date sticking out the left of the page, without impacting the overall sites width
http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/
why does this work on the left but not the right?
See the below fiddle for output...
Fiddle: http://jsfiddle.net/C2j6G/4/
Demo: http://jsfiddle.net/C2j6G/4/embedded/result/
see below image -
It's better if you can combine those two images & give in the background of body. like this:
HTML
<div id="main"></div>
CSS
body {
margin: 0;
padding: 0;
background:#096 url(http://imgur.com/JHXDv.png) no-repeat top center;
}
#main {
width:960px;
height:216px;
background-image:url(http://www.wireframebox.com/test/sideimages/main.jpg);
margin:0 auto;
}
Check this http://jsfiddle.net/PVWzA/1/
If you want your website page to be 960px wide, then you should change your width of the main image to 960 - 170(left) - 170(right). Changing the width of main.jpg to 620px should fix your issue.
HTH
Put the image in a div or image tag that is larger than your center div and make it the child of the center content div. Also make sure that it's positioning will take it out of the flow(\absolute). If you then add a negative margin you can pull the image outside of the content div without disrupting its placement.
#center div.top{
width:1200px;
height:170px;
margin: 0px -170px;
position:absolute;
background:url("randombackground.png") no-repeat;
}
The html will be kinda like this:
<div id="center">
<div class="top"></div>
Content content content
</div>
I have the following HTML code with CSS:
<!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>
<style type="text/css">
div.scroll
{
background-color:#00FFFF;
position:absolute;
top:0%;
left:0%;
width:10%;
height:100%;
}
div.hidden
{
background-color:#00FF00;
position:absolute;
top:0%;
left:50%;
width:20%;
height:100%;
}
div.menu
{
position:absolute;
top:70%;
left:20%;
width:80%;
}
</style>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>
<div class="menu">
<div class="scroll">Scroll: You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
<div class="hidden">Hidden: You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</div>
</body>
As you can see I want two of the divisions to have color - they don't and I can't figure out why. The file has an html extension and I have used both IE7 and FF 3.0.3 to test.
What perplexes me the most is that it is almost a verbatim copy of an example from W3C schools that does show color! Link to example: W3C example.
The problem is height:100%; . It means that the element use all the height of its parent, in this case the <div class="menu">, which is 0px because all its content is positioned with absolute.
You can either remove it if you want each div of have the size of its text, or set a height in pixel if you want to apply the same height to the both divs.
Remove height: 100%; from your div.scroll and div.hidden CSS classes.
Mark Up
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Zuhaib.test" %>
<!-- Put IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="css/general.css" rel="stylesheet" type="text/css" />
<link href="css/outbound.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server" class="wrapper">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="left">
</div>
<div id="right">
</div>
</form>
</body>
</html>
CSS
html, body
{
margin:0;
padding:0;
border:0;
overflow:hidden;
width:100%;
height:100%;
}
* html body
{
height:100%;
width:100%;
}
*{
margin:0;
padding:0;
}
.wrapper
{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
height:100%;
width:100%;
}
* html .wrapper
{
width:100%;
height:100%;
}
#left{
float:left;
height:100%;
width:100px;
overflow:hidden;
background-color:Blue;
}
* html #left{
height:100%;
width:100px;
}
#right{
margin-left:100px;
height:100%;
background-color:Red;
}
* html #right{
height:100%;
}
Result in IE && FF
Resutls in IE & FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
The result is same with both IE 6 & 7. How can I remove the gap between the divs?
Udate
I have two divs each with 100% height. the left div is a fixed width floating div. Even after giving correct margin-left to the right div, there remains a gap (3px) between the two divs. Where as in firefox it renders correctly.
The reason I have used quirk mode is to able to get 100% height for the divs
Can this gap be eliminated? Or is there a better way to do two column 100% height layout with pure css?
As already said, your code is full of hacks. Please remove especially the unnecessary definitions. If a browser does not support cascading style sheets, it will not support CSS anyway.
That being said, why not use position: absolute; for #right?
As in
#right{
position: absolute;
left: 100px;
padding-left: -100px;
width: 100%;
...
}
Remove the comment on top of the page
The "Put IE into quirks mode" thing
You are using a lot of 'hacks'. By that I mean the CSS selectors that begin with * html
I'm not saying that is the cause of the problem, but it is not good practice and is error prone.
1) try using conditional comments for the browser that has the gap problem instead of using those hacks
2) try editing your question by providing information about the version of IE you're testing against (my guess is IE 6 or even lower).
To be honest, if you're filling up the whole body with these divs, then you're better off giving one of them a transparent background and setting the background color of the body to the desired color, masking the problem.
Especially if, in trying to solve the IE issue, you're introducing a plague of CSS hacks into what should be nice and clean code considering the simple layout you're shooting for.
The actual problem is the whitespace between the closing div tag and the next opening div tag. If you put them together on the same line with no space between them, or fill in the white space with a comment, the whitespace will be gone.
<div id="left">
</div><div id="right">
</div>
or
<div id="left">
</div><!-- IE doesn't ignore whitespace between divs
--><div id="right">
</div>