a content inside div exceeding the fixed size which is decided by css.
<style>
#fixeddiv {
position: fixed;
margin: auto;
max-height: 300px;
max-width: 700px;
}
</style>
<div id="fixeddiv">
<div id="M775568ScriptRootC1273665"></div>
<script src="https://jsc.adskeeper.co.uk/c/r/creditkarma.gq.1253664.js" async>
</script>
</div>
The content inside fixeddiv should be fixed between 300px height and 700px width but it exceeding it and position of the content displaying outside of fixed size.
Edited: Child DIV contain responsive native ad and i am trying to fix the position with parent DIV because i do not make modification inside the ad copy due to advertising network policy.
<style>
#fixeddiv {
position: fixed;
margin: auto;
max-height: 300px;
max-width: 700px;
width:100%;
height:100%;
}
#someotherdiv {
height:100%;
}
</style>
<div id="fixeddiv">
<div id="someotherdiv"> contents </div>
</div>
#fixeddiv > div{
display: block;
max-width: 100%;
height: auto;
vertical-align: top;
}
It really depends on the content inside the fixed div. You can also add overflow:hidden so the child content wont overflow the fixed div boundaries
Apply width/height values to image not container.
#fixeddiv {
position: fixed;
margin: auto;
border: 20px solid;
}
img {
max-height: 300px;
max-width: 500px;
}
<div id="fixeddiv">
<img src="https://pixy.org/src/20/201310.jpg">
</div>
Related
for clarity, see codepen: http://codepen.io/anon/pen/QyaLPb
I want to create an image with an overlay. The overlay should be the same size as the image, however because of the width: 100% and height: auto for both the .imagecontainer and img, they don't have the exact same height. The overlay now has a few pixels more height than the img. You can see the .imagecontainer has more height than the img inside (red background showing at the bottom). I need the imagecontainer and img to be responsive, so setting a fixed height is not really an option. How do I solve this?
HTML:
<div class="wrapper">
<div class="imagecontainer">
<img src="http://www.kleinewolf.nl/uploads/fancybox/8f5b7a59-32b7-4582-868b- e2ff1f3e41a2/2835832130.jpg">
<div class="overlay">
</div>
</div>
</div>
CSS:
.wrapper{
width: 400px;
padding: 40px;
}
.imagecontainer {
width: 100%;
height: auto;
overflow: hidden;
background: red;
position: relative;
}
.imagecontainer img {
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.8);
display:none;
}
.imagecontainer:hover .overlay {
display:block;
}
If you're speaking of the red border below the image.
Add to your .imagecontainer img: display: block. That should solve the problem...
http://codepen.io/anon/pen/QyaWNE
Added line-height:0; to your container div. Images contained by parent divs usually tend to take margins from other elements, and line-height and font-size are usually a problem. Good luck!
This is my Three divs.
<div class="header">
<div>#ViewBag.Title</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
This is my CSS.
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.header
{
height: 10%;
width: 100%;
background-color: whitesmoke;
text-align: center;
}
.content
{
height: 80%;
width: 100%;
background-color: white;
}
.footer
{
height: 10%;
width: 100%;
background-color: whitesmoke;
}
</style>
Now I want that the child div inside my parent Header div will be flexible. Whenever i change my browser size the child div inside the parent header div will also get resized according to my browser size. And will stay inside the header div. Please help.
.header div
{
height: 100%;
width: 100%;
}
Use this for child div.
If set a child div's width is 50%. It filled in 50% of it's parent.
Do not set a height for the header element!
When dealing with responsive design, I try to avoid setting a height whenever possible. If you really need to set a height, do so on the child element, which then forces the header to have the height of its child.
use this in ur css
display-inline:block:
i'm working on a page in wordpress which shows 8 divs with some content.i want to show those all divs to 100% of window height in all devices and then when user click on the link next it shows another div one after another on clicking next, but somehow my divs are not going 100% in height.
Here is the css:
<style>
html {
height: 100%;
}
body {
line-height:25px;
margin: 0;
padding: 0;
height: 100%;
}
.content {
margin: auto;
min-height: 100%;
}
</style>
Here is the html:
<div class="container">
<div class="content" >
<----content goes here------>
<a href="#Initial" rel="m_PageScroll2id" >NEXT</a>
</div>
<div class="content" id="Initial" >
<----content goes here------>
<a href="#Initial" rel="m_PageScroll2id" >NEXT</a>
</div>
</div>
Here is the link for my dummy page:
http://enablersinvestment.com/backend/how-it-works-scroll/
You just need to set .content min-height to be 100vh as follows:
.content {
margin: auto;
min-height: 100vh;
}
checkout this demo: http://jsbin.com/xayaku/1/
You need to set the height of .container to 100% as well:
html {
height: 100%;
}
body {
line-height:25px;
margin: 0;
padding: 0;
height: 100%;
}
.container {
height: 100%;
}
.content {
margin: auto;
min-height: 100%;
}
Your problem here is that your content is inside the container and container does not have height: 100%.
Add the following rule to your css and you should be fine.
.container {
min-height: 100%;
}
If im correct The child adepts the percentage height to the height of the parent.
And in your case the child is content en the parent is container. You should give container a height of 100%.
.container {
min-height: 100%;
}
Do correct me if im wrong
To get divs to fill the whole webpage, you must add this line:
position: absolute;
For example:
div.content {
position: absolute;
height: 100%;
}
Without that line, the '100%' will be considered as the size of what is inside the div.
i have an absolute div inside a relative div and i want to make it of a fixed dimension. my problem is that the height is ignored.
this is my html structure:
<div id="wrap">
<div>
<h1>test</h1>
</div>
<div id="swipe">
<br/>
</div>
</div>
and this is my css:
body {
background-color: #7ECEFD;
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
margin: auto;
overflow: hidden;
position: relative;
}
#swipe {
background-color: white;
position: absolute;
top:0;
left:10px;
width:100%;
height: 500px;
}
why? how can i resolve it with css? any other trick (jquery)?
http://jsfiddle.net/nkint/XQzJf/
It is 500px high, but most of it is hidden due to the overflow: hidden on #wrap. You need to either remove that or make it big enough to contain #swipe.
html, body, #wrap {
height: 100%;
}
My site has a 900px div #content that is centered with margin-left: auto and margin-right: auto. I have an image that I need to display behind the div which will partially overlap #content.
The image is set to display as block at present and I can get it to where it needs to be, but it doesn't allow #content to draw over the image. I can get #content to display over the image with position: absolute however this prevents the use of margin-left / margin-right auto to center.
My current positioning, which gets it where it needs to be is:
img#watermark
{
margin-left: auto;
margin-right: auto;
display: block;
padding-left: 900px;
}
#content just needs to appear over the watermark.
Help greatly appreciated.
html:
<img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
<div></div>
css:
div {
margin:auto;
width: 512px;
height: 512px;
background: rgba(0,0,0,.4);
position: relative;
}
img {
position: absolute;
left: 50%;
margin-left:-256px;
}
http://jsfiddle.net/Db2cw/
the solution is to have a surrounding div on the #content div, and that surroinding div positioned absolutely and with a defined width and height.
Ex:
html:
<div id="outter">
<div id="image"><img src="something.jpg" /></div>
<div id="contentOutter">
<div id="content">the content here</div>
</div>
</div>
CSS:
#outter {
width: 1000px;
height: 300px;
position: relative;
}
#image {
width: 1000px;
height: 300px;
position: absolute;
}
#contentOutter {
width: 1000px;
height: 300px;
position: absolute;
}
#content {
margin: 0 auto;
width: 900px;
}
Example here: http://jsfiddle.net/qwEhv/
"I can get #content to display over the image with position: absolute however this prevents the use of margin-left / margin-right auto to center."
What you might need to do here is to have an additional div - call it #contentWrapper for example and center it using margin-left and right, set position to relative. Put div #content inside the wrapper div and position absolute. This should allow you to make #content look centered.