I have the following situation, presented in the picture. Grey div is the parent of magenta and blue divs. Magenta div scales vertically with the content. I would like to have blue div always scale to the bottom of the containing grey, div. I've searched and tried various combinations, but all to nil effect.
edit:
Problem solved! Container needs an overflow: hidden, and the div that I want to stretch to the bottom (blue) needs padding-bottom: 1000px; margin-bottom: -1000; (or larger if you need)
I got this to work (in Chrome anyway) by setting the parent's div:
position: absolute;
and the child's div:
height: 100%;
If you need support from IE6 and up, the answer is: You can´t in css only.
There are different solutions to really scale the div or just have it appear like that:
You can use a background-image for the grey div (if all you need is the background to stretch all the way down)
You can use javascript to calculate the height of the grey div and apply it to the blue div
There is a ccs option using a very big padding and an equally big negative margin, but I don´t remember if it works for all browsers and I can't find the article right now.
Edit: The big padding / negative margin css solution:
The article is talking about Firefox 1.5 and Safari 2 so I don't know if it still works, but here it is.
In my experience setting the height of the blue DIV to 100% doesn't work. The only time that I have wanted this was to have the blue DIV with it's own background, to solve this you need to just have the background of the gray DIV include the blue background of the other DIV.
The JavaScript to do it would be...
<div id="yourDiv" style="background-color: Blue; width: 150px;">
Hello
</div>
<script type="text/javascript">
var div = document.getElementById('yourDiv');
div.style.height = document.body.clientHeight + 'px';
</script>
Edit:
Check this link for getting clientHeight in different browsers...
Inside of your parent div, if you set "float:right" on your blue div and play around with your height in percent (height:100%;), I think you should achieve what you're asking.
Since the blue div is a child of your grey div, the maximum height of your blue div shouldn't exceed your parent div. Unless I'm missing something here...
Also, if you are floating your blue div on the right, be sure to place it before the magenta div in your markup.
Acorn
Another way to set height 100% in html objects is use styles:
<html>
<head>
<style>
html, body {
height: 100%;
}
#mydiv {
height: 100%;
background-color:red;
}
</style>
</head>
<body>
<div id="mydiv">aaa</div>
</body>
</html>
The key is to have a set height on the parent container. Then the height:100% works
<!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>Divs</title>
<style type="text/css" media="all">
#main {
height:30em;
width:30em;
background-color:#999999;
padding:1em 1em 0px 1em;
}
.inner {
width:5em;
}
#blue {
float:right;
background-color:#0000FF;
height:100%;
}
#magenta {
float:left;
background-color:magenta;
}
</style>
</head>
<body>
<div id="main">
<div class="inner" id="blue">
1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10
</div>
<div class="inner" id="magenta">
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>
</div>
</body>
</html>
Related
here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
div.img1 {
display:block;
float: left;
margin:0px;
padding: 0px;
border-color: #384b5d;
border-style: solid;
text-align: center;
}
</style>
</head>
<body>
<div class="img1">
<img src="http://www.hotelseaviewdiu.co.in/wp-content/uploads/2014/10/Business-Meeting.jpg" width=50% height=50%>
</div>
</body>
The problem that is occurring, is that the border around my image is wider, maybe by 50px on each side, whereas the height of the border rests just fine on the image. I am new to CSS, and not really sure why this is happening.
This is all within google site's HTML box as well.
I adjusted the width and height to create a smaller image with an adjusted ratio. When I eliminate these ratio %'s, the border fits perfectly, both height and width, so I assume the problem is somewhere within my image adjustment within the
<img src>
tag.
Thank for any and all help. I really appreciate it.
Regards,
Just apply the border to div.img1 img instead and keep the text-align property of the div:
http://codepen.io/cavanflynn/pen/NGKWyE
I have a navigation div anchored at the top of my page. The div is entirely text, and works fine, however when scrolling over an image or text, it cannot be seen clearly. I tried to remedy this by adding a background color to the div tag, but for some reason, the background color changes the color of the entire page, covering everything.
Is this due to the div being anchored to the top? Is there a way to clear it?
Apologies for lack of code before. Here is a essentially what I am doing:
<html>
<head>
<title>stack overflow</title>
<style type="text/css">
#nav {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: #0000FF;
}
</style>
<link href="yotb.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav"><center>HEADER</center></div>
<div id="container">
<div id="content">
PAGE CONTENT
</div>
</div>
</div>
EDIT: Karim's answer fixed it. Thank you for your help, everyone.
What you've done here is that you set position:fixed; to the element and you declare it's boundaries to top:0 bottom:0 so it's gonna spread from top to bottom, AND left:0 right:0 so it's gonna spread from left to right, simply remove right and bottom (you really don't need those bro).
Check out this FIDDLE.
<style type="text/css">
.anchored-top
{
float:left;
position:relative; /* Highlight only text in the div by wrapping objects in a span */
}
.anchored-top span
{
background-color: blue;
}
.clear
{
clear:both; /* use an empty div with a class of clear to clear the floats */
}
</style>
<div class="anchored-top">
<span>Stuff in Here</span>
</div>
<div class="clear" />
It is quite hard to provide a question without seeing what you have already, but I would recommend firstly the below. (Firstly let me apologies if you are already familiar with HTML)
Check that the div has been closed
Set a width and height to the div
Make sure you are only changing the background-color of that div and not another element
I hope this helps!
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'm having difficulty getting a 100% page height including contained divs. What seems to happen is that the inner div expands to 100% the height of the entire parent element, and not just to the bottom, even if it's been displaced by an element above it, so the child overflows the parent.
<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="en">
<head>
<title>Home</title>
<style type="text/css">
html, body, #container, #content
{
height: 100%;
min-height: 100%;
}
html { border: 1px solid red; }
#content { border: 1px solid blue; }
</style>
</head>
<body>
<div id="container">
<h2>Test</h2>
<div id="content">
<p>Testing</p>
</div>
</div>
</body>
</html>
I'm beginning to believe that simply this is simply the correct behaviour and just doesn't work, but I figured I'd ask the collective intelligence first before overhauling the approach.
Yeah, you can use overflow: hidden; or start playing with floats and clears.
I don't think God intended for pages to just be exactly one screen high. :-)
Or is a vertical scrollbar allowed?
If so, then you might check out: http://matthewjamestaylor.com/blog/perfect-full-page.htm
I'm not exactly sure what you're trying to accomplish, but this:
html, body
{
height: 100%;
min-height: 100%;
}
Doesn't make sense. You can't control the height of the body element, as it contains everything else regardless, and the html element isn't even "displayed" in the same way div and span elements are.
The behaviour you describe is, indeed, what is expected to happen. Whenever you set an element's height/width to 100%, it means 100% of the parent element (with some possible exceptions where the element is absolutely positioned).
ur css is just behaving exactly as intended...
there is no exact way to do this with just css, without what brock said, very complicated float <-- and by the definition, floats need to know the fixed height and width, and is not dynamic. (In practice most browser will try to guess)
It is much easier if you use a little java script to find out the height of the screen, and first inner div, then set the second inner div to be the difference.
<div id="container">
<div id=content-top">
<h2>Test</h2>
</div>
<div id="content">
<p>Testing</p>
</div>
</div>
I've got a really frustrating problem with a web application I work on (I didn't originally write it). It uses frames for the layout scarily enough. The problem I'm having is that all elements with a background colour and border set via CSS default to 100% width. I've just tested div elements, paragraph elements etc.
I removed the stylesheet completely and then tested it and I had the same problem, so it's not the stylesheet causing the problem.
I wrote a quick test to make sure it wasn't conflicting code and used the same doctype and xmlns as ours - I get the same problem. Here's the example code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#test {
border:1px solid #ccc;
background-color:#ddd;
}
</style>
</head>
<body>
<div id="test">
Test information!
</div>
</body>
</html>
Any ideas?
I think this is required by HTML/CSS. Block elements extend the full width unless there is something to stop them.
(FF has the same behaviour.)
It's not because the element has a background or a border that it expands to the full with of the parent, it's because it's a block element. The background or border just makes you see how large the element really is.
The default width is actually not "100%", but "auto". The practical difference is that the element including borders uses 100% of the width, instead of the width excluding the borders becoming 100% of the width (making the width including borders wider than it's parent).
If you don't want the element to use the available width you can make it a floating element. Then it will adjust itself to it's content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
#test1 {
float: left;
border:1px solid #ccc;
background-color: #ddd;
}
#test2 {
float: left;
clear: both;
border:1px solid #000;
background-color: #ccf;
}
</style>
</head>
<body>
<div id="test1">
Test information!
</div>
<div id="test2">
Test information!
</div>
</body>
</html>
As Richard and BeefTurkey say, divs are block elements and will fill the width of the browser.
You can either use an inline element, such as a span
<span id="test">
Test information!
</span>
or add some style to your div to force it to be inline
div#test { display: inline; }
Don't divs default to 100% (of parents size) because they're blocks? You could always try changing display to inline: #test {display:inline;}