Such a code:
<html>
<head>
<style type="text/css">
html, body {height:100px; width:200px}
body {margin:0}
</style>
</head>
<body>
<div style="background:red; height:100%">
<div style="background:green; height:100%; width:50px;">
</div>
<div style="background:yellow; height:100%;">
</div>
</div>
</body>
</html>
makes the second nested DIV appear outside of parent DIV in all browsers:
where I am expecting all the nested DIVs appear inside of parent DIV:
I want the yellow DIV to fill the rest of width regardless of parent DIV size.
Note that html, body {height:100px; width:200px} is made only to make a screenshot of a decent size. It should be html, body {height:100%; width:200%}
Update
a code with display: inline-block:
<div style="background:red; height:100%">
<div style="background:green; height:100%; width:50px; display:inline-block;">
</div>
<div style="background:yellow; height:100%; display:inline-block;">
lalala
</div>
</div>
produces
Use position property of css
<div style="background:red; position:relative; height:100%">
<div style="background:green; height:100%;position:absolute; top:0px;left:0px; width:50px;">
</div>
<div style="background:yellow;position:absolute;left:50px;top:0px; height:100%;width:100%;">
</div>
</div>
DEMO
OR
Use float property of CSS
<div style="background:red; height:100%">
<div style="background:green; height:100%;float:left;width:50px;">
</div>
<div style="background:yellow; height:100%;">
</div>
</div>
DEMO
You can use either position:absolute or float:left in this case.
An example for position:absolute has been answered by Ankit above
You can use float left for the green div:
<body>
<div style="background:red; height:100%">
<div style="background:green; height:100%; width:50px; display:inline-block; float:left"></div>
<div style="background:yellow; height:100%;"></div>
</div>
</body>
You can change the width of html/body or the red container div and the yellow div will grow/shrink appropriately:
http://jsfiddle.net/RapKB/1/
Edit:
Whoops, you don't need inline-block.
Related
<div style="border-style:solid; margin:auto;">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
I'm trying to put a div over the image, how let the floating div to occupy the space, so the footer div will be pushed accordingly.
I'm not sure what you're asking. Do you wish to have the yellow div take up only the amount of space of the div behind it (with the Google Doodle)? Or do you want the reverse, that is, you want the footer height to automatically adjust to the yellow div height?
I am not sure I completely understand. Do you mean to make the div containing the image to have a minimum height? You can use the min-height property then as follows:
<div style="border-style:solid; margin:auto;min-height:80%">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
-- Edit: If you are looking for some kind of a background-image in a div container you can control you can do something like this:
<html>
<head>
</head>
<body>
<div style="border-style:solid; margin:auto">
<div div style="background-image:url('https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg'); background-repeat: no-repeat;" >
<div style="border-style:dotted; height:400px; width:600px">
</div>
</div>
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
</body>
</html>
I have a table with height 100% and three rows, the first and last ones have a fixed height, and the one in the middle has no specific height so it stretches to the necessary height.
The problem is that if you fill that row with too many items, the table will be too big and it will exceeds the 100%.
<div id="wrapper">
<div id="first" class="row">
<div>
first
</div>
</div>
<div id="second" class="row">
<div>
<div style="height:50px">
cont0
</div>
<div style="height:50px">
cont1
</div>
<div style="height:50px">
cont2
</div>
<div style="height:50px">
cont3
</div>
<div style="height:50px">
cont4
</div>
<div style="height:50px">
cont5
</div>
</div>
</div>
<div id="first" class="row">
<div>
last
</div>
</div>
html, body {height:100%; margin:0; padding:0;}
#wrapper{
width:300px;
height:100%;
display:table;
}
.row
{
display:table-row;
}
#first
{
height:50px;
margin-bottom:5px;
background-color:#F5DEB3;
}
#second{
background-color:#9ACD32;
}
#second > div{
height:100%;
border: 1px solid red;
overflow-y: auto;
}
It's difficult to explain, but this fiddle demonstrates it: http://jsfiddle.net/3EjX8/127/
Resize the table with your mouse in chrome and it will behave nice (scrollbar appears inside the table).
But resize it in firefox and it will have this unexpected behavior.
Maybe I'm wrong and I'm taking good part of a chrome's bug.
I'm just wondering if there is a possibility to make this behave in firefox as it does on chrome.
Thanks.
I made it work on both firefox, chrome.
Don't use display: table for this, not necessary
You had the id "first" two times.
You don't need divs inside divs
Use 'calc' it's a life saver.
http://jsfiddle.net/foreyez/p3rcyofk/
<div id="wrapper">
<div id="first" class="row">
first
</div>
<div id="second" class="row">
<div>
<div style="height:50px">
cont0
</div>
<div style="height:50px">
cont1
</div>
<div style="height:50px">
cont2
</div>
<div style="height:50px">
cont3
</div>
<div style="height:50px">
cont4
</div>
<div style="height:50px">
cont5
</div>
</div>
</div>
<div id="last" class="row">
last
</div>
</div>
html, body {height:100%; margin:0; padding:0;}
#wrapper
{
width:300px;
height:100%;
}
#first,#last
{
height:50px;
background-color:#F5DEB3;
}
#second{
background-color:#9ACD32;
}
#second {
height:calc(100% - 100px);
border: 1px solid red;
overflow-y: auto;
}
In the code below, B1 contains an image and B2 includes an iframe.
The height of B and container is equal to the height of B1, but B2 is overflowing the container, which I don't want. How do I fix this?
<div id="container">
</div>
<div id="B">
<div id="B1">
<img src="example.jpg" />
</div>
<div id="B2">
<iframe src="example.htm">
Your browser doesn't support iframes.
</iframe>
</div>
</div>
</div>
give container value display:inline-block
and B2, overflow:auto
That should help!!
EDIT
Assuming you container is closed incorrectly, this should be your html markup :
<div id="container">
<div id="B">
<div id="B1">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
</div>
<div id="B2">
<iframe src=""></iframe>
</div>
</div>
</div>
and CSS
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
#container {
width:100%;
height:100%;
}
#B {
width:100%;
height:100%;
}
#B1,#B2,iframe,img{
width:100%;
height:auto; /*to mainatin height as per requirement */
}
basic demo
I have a "container" DIV which has 2 floating DIV's with different height inside, and when I apply the background property on the "container" DIV it doesnt work.
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
http://jsfiddle.net/arthurg/XUmsU/
How can I show the background on the container (using CSS)?
Add overflow:hidden; to the container. Like this:
#container{
height:100%;
background:red;
overflow:hidden;
}
http://jsfiddle.net/XUmsU/1/
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
#container{
height:100%;
background:red;
overflow:hidden;
}
#left{
width:100px;
background:green;
height:30px;
float:left;
}
You need to clear floats.
Add this <br style="clear: both"/> after those two floating divs.
HTML:
<div id="container">
<div id="left"></div>
<div id="right"></div>
<br style="clear: both"/>
</div>
http://jsfiddle.net/XUmsU/3/
There is other (new) methods for clearfix (with pseudo-classes :before and :after).
I've a background image for body and a background color for wrapper div.
I haven't set any height for body and I'm using a min-height:1000px for wrapper.
But if wrapper height extends 1000px;, the background color of wrapper is as body background image.
HTML Code:
<body>
<div id="wrapper">
<div id="header">
<div id="headercontainer">
<div id="company"></div>
<div id="tagline"></div>
<div id="navigation"></div>
</div>
</div>
<div id="pagecontainer1"></div>
<div id="footer1"></div>
</div>
Here is the css:
body{
background:#E8EDF0;
margin:0;
width:100%;
background-image: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png);
background-repeat: repeat-x;
background-position: 0px -2335px;}
#wrapper{
background-color:#FFF;
min-height:1000px;
width:1008px;
margin:auto;
position:relative;
overflow:visible;
}
How can i fix this background color issue for wrapper.
As the way you coded your page, you can't get the wrapper to cover the full height. So the best way to do it is to make a background image for your full body like this:
grey area##-----white area: 1008px-----###grey area
make it 2000px wide (or more), 1px high, and repeat vertically:
background:#E8EDF0 url(new-background-path.jpg) top center repeat-y;
simply add <div style="clear:both"></div> in pagecontainer1 div. coz i think there are some float div so to clear float use float clear or you can use overflow:hidden; rather than overflow:visible;
<div id="wrapper">
<div id="header">
<div id="headercontainer">
<div id="company"></div>
<div id="tagline"></div>
<div id="navigation"></div>
</div>
</div>
<div id="pagecontainer1">
<div style="clear:both"></div>
</div>
<div id="footer1"></div>
<div style="clear:both"></div>
</div>