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
Related
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;
}
My main content div does not fit the height of my wrapper.
I have the html, body and wrapper set to a height of 100%.
I also have the height of my main content to 100% however it seems to add more to the bottom of the wrapper causing it to sit outside of the body!
The CSS:
html,body {
margin:0;
font-family:asap!important;
background-color:#FFD400!important;
height:100%;
min-height:100%;
}
#wrapper {
width:100%;
min-height:100%;
position:relative;
height:auto;
overflow-x:hidden
}
.contentwrap {
background:lightblue;
position:relative;
padding-top:50px;
height: 100%;
}
The HTML:
<div id="wrapper">
<div class="headerwrap">
<div id="logo">
<img src=#">
</div>
<div class="headercontact">
<img src="#">
</div>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>
Manage My Website
<ul class="sub-menu">
<li>Make Website Changes</li>
<li>Renew My Website Package</li>
</ul>
</li>
<li>Clothing</li>
<li>My Details</li>
<li>Help Center</li>
</ul>
</div>
<div class="contentwrap">
<div class="row clearfix">
<div class="col-md-6 column">
<div class="textcontainer">
<p class="maintext">Hello Alicia,</p>
<p class="maintext smalltext whitetext">Welcome to Your Account!</p>
</div>
</div>
<div class="col-md-6 column">
<div class="circle circle-solid">
<div class="circle-inner">
<div class="score-text">
home page marketing
</div>
</div>
</div>
</div>
</div>
</div>
<div class="folk">
<img src="/Images/ST-Folk-Dec.png">
</div>
</div>
Any Ideas?
Use for height 100% position:absoulte style
<div style="border:1px red solid; height:100%; position:absolute; width:100%">
Height 100% width 100%
</div>
100% on the html/body means 100% of your screen. So actually your body has a static height which is equal to your screen height.
Get rid of the height:100% on both your html and your body
change
html,body {
margin:0;
font-family:asap!important;
background-color:#FFD400!important;
height:100%;
min-height:100%;
}
to
html,body {
margin:0;
font-family:asap!important;
background-color:#FFD400!important;
height:100vh;
min-height:100vh;
}
After pulling my code apart i found a solution and thought i would post in case someone else has this issue!
As I had two divs within my wrapper, the header div and content div, i needed to account for both of their heights within the wrapper.
If you see my code above i moved the navigation into the headerwrap and set a height of 23%, i then set a height of 77% on the content wrapper.
You may want to add a min-height to both to stop any content being cut on smaller screens.
I've put two divs (with one image in each) in one principal div. How can I make the CSS to autoresize both divs (with images) to fit size browser but keep the row formation?
The issue with my code is that, the images autoresize but divs will turn in column formation.
fiddle
HTML :
<div id="test">
<div style="display:inline-block">
<img src="a.jpg" width="100px" height="100px">
</div>
<div style="display:inline-block">
<img src="b.jpg" width="100px" height="100px">
</div>
</div>
CSS :
#test{ width:100%; height:100%;}
You may do this :
DEMO
HTML :
<div id="test">
<div>
<img src="http://lorempixel.com/output/fashion-q-c-640-480-1.jpg"/>
</div>
<div>
<img src="http://lorempixel.com/output/fashion-q-c-640-480-10.jpg"/>
</div>
</div>
CSS :
#test div{
width:50%;
float:left;
}
#test div img{
width:100%;
height:auto;
}
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.
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).