Like other pages, the main div is always a way in which occupies the entire screen seen by the User, and when he scroll down he can see another div: example1 , example2
No matter if you resize the screen, the main div will always occupy the total space seen by the User.
To test It I try this code below:
<div style="background:yellow; position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:-1; float:left;">
This is my Section!
</div>
With him I can see a large yellow background with a text occupying the entire area of my browser. Assuming I would like to add another div below this, how could I do that? Is possible with css or I will need javascript?
You can do it without javascript with only pure CSS.
With vh units, you can specify a margin-top on the next container like this :
#content { margin-top: 100vh;}
The advantage of this method is that it is fully responsive, no matter how you resize it (height or width).
See it here
If you check your div more correctly, this code:
top: 0; bottom: 0; right: 0;
Is what causes your div to occupy the whole screen because there isn't any space between the div since you set all of them at 0.
Related
In this link, you see a page I am working on. When you change your window size, you will see that it is responsive.
However, the three rotating image boxes that are floated, with height auto and a clearing div under them, are not clearing.
The aim is to have the div containing these rotating images, and 20px padding on both top and bottom of it.
My css currently:
.rightbox{width:100%; clear:both; float:none; height:auto; min-height:inherit;}
#rotating-item-wrapper, #rotating-item-wrapper2, #rotating-item-wrapper3 {margin: 10px 20px 0px; float: left; left:0; transform:none; height:auto;}
less than 576px:
#rotating-item-wrapper, #rotating-item-wrapper2, #rotating-item-wrapper3 {margin: 5px 10px 0px; float: left; left:0; transform:none; width:26%;}
.rotating-item, .rotating-item2, .rotating-item3{width:100%; height:auto;}
I believe this will take you in the right direction: http://www.quirksmode.org/css/clearing.html
You can set height to .advertpanel. Current height of floated element is 0, so clear doesn´t work in this case (you clear after 0) - due to absolutely positioned images in carousel.
For mobile phone, <576px, you can hide that, it´s so tiny and mobile phone users has nothing from that.
the problem is not you clear:both, it's clearing the float but the problem is the floating element's height.
your rotating images is absolute while the container, eventhough it's relative and floating, doesnt get the height of the image inside it. try give a height value (the height of your slideshow image) instead of height:auto of the container.
Fixed with JavaScript.
<script>
var rotating = function(){
var getheight = $('.rotating-item'); /* cache the selector */
$('.advertpanel').css({ height: getheight.height() });
}
$(document).ready(rotating);
$(window).resize(rotating);
</script>
I have two divs whose widths are controlled by percentages. I want the right div to be exactly as tall as the left div, which expands and shrinks based on the width of the image it contains and the width of the browser window.
Is there a way to accomplish this without javascript?
http://jsfiddle.net/5JU2t/
The simplest way to achieve this is to make the .right div absolutely positioned and setting top and bottom to 0.
Just remember to position the parent (.main) div relatively and remove all of the floats:
.right {
bottom:0;
position: absolute;
right:0;
top: 0;
}
.main {
position: relative;
}
Working example: http://jsfiddle.net/5JU2t/1/
Note
The reason the right column is a little longer in the example is due to the white space added under an image. Should you only be using an image in this column then you can add float: left to the image to resolve this:
Working example: http://jsfiddle.net/5JU2t/2/
I'd try wrapping it in a third div and give your two divs either height:auto or height: 100%.
Set the parent (.main) to display as table
and set the children (.right, .left) to display as table cell.
I would say funk all the extra css and use a table layout
I'm trying to lay one div over another. This is really simple if you know the dimensions of the div.
Solved here:
How to overlay one div over another div
So, here is my HTML:
<div class="container">
<div class="overlay"></div>
<div class="content"></div>
</div>
In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).
See my example on jsFiddle
The overlay should cover the content entirely. Width 100% and Height 100%. However, this does not work because in my example I positioned the overlay absolutely.
One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.
Is there any way of solving this problem in CSS?
You could set the position to absolute and then set all 4 positioning values to 0px which will make the box expand. See a demo here: http://jsfiddle.net/6g6dy/
This way you dont have to worry about recalculating things if you want padding on the overlay or the container (like you would if you used actual height and width values), because its always going to be adjusted to the outer dimensions of the box.
It's not possible to do this because:
The overlay is not contained by anything to restrict it's size (since there is no height/width applied to the container).
The size of the content div can change as content loads (since it has no fixed width/height).
I solved this by using JavaScript*. Eg.
function resizeOverlay() {
$('.overlay').css({
width: $('.content').width()
height: $('.content').height()
});
}
$('.content').find('img').on('load', resizeOverlay);
*Code not tested.
Hey are you looking like this : http://tinkerbin.com/Vc4RkGgQ
CSS
.container {
position:relative;
background:blue;
color:white;
}
.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}
I do not know what you are exactly trying to do but this might work:
container must be relative: anything from static
overlay and content are absolute :move top/left in first non static parent; no flow.
Give same top/left to be on top and higher z-index for upper element.
See this demo: http://jsfiddle.net/rathoreahsan/kEsbx/
Are you trying to do as mentioned in above Demo?
CSS:
#container {
position: relative;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
.overlay{
z-index: 10;
background: #ccc;
}
You can indeed do this without JavaScript. Your problem is that #container element has 100% width relative to the whole page. To fix this you can:
a) position it absolutely,
#container {
position: absolute;
}
b) make it float or
#container {
float: left;
}
c) make it display as table cell
#container {
display: table-cell;
}
One of the above is enough, you don't need to apply all. Also you should not position .content absolutely as this will prevent #container to have the same width/height.
If you are worried about images loading after the height is set you can go ahead and set the dimensions of the image in the containing div and use the padding-bottom hack. This way when the browsers paints over the page it knows how big the image will be before it loads.
I got a div which contains 2 other divs. They are vertically aligned. Now, the lower div is changing its size via javascript. What I want now is that the upper div is changing its size depending on the other divs size. Is there a way to do this with css style only, without using js?
UPDATE: The outer div has a fixed size.
<div>
<div> childdiv 1</div>
<div> childdiv 2</div>
</div>
UPDATE: Ok I didnt make this clear enough, the lower box is changing its height in top direction. And the upper div should then decrease its height.
You could use display:table and display:table-row to change the height of the upper div accordingly, so that the total height matches the fixed height of the container:
#outer{
display:table;
height:200px;
width:200px;
}
#inner1{
background-color:red;
display:table-row;
}
#inner2{
background-color:green;
display:table-row;
height:30px;
}
You'll find an example here: http://jsfiddle.net/bRg6m/
Is this what you want?
Added: Note that this doesn't work in IE7 or older. You'll have to use a Javascript solution if you want to support those browsers.
I'm not sure I understand your question.
I made an example here where the upper div is changing its width depending on the lower divs size. Is that what you needed?
http://jsfiddle.net/8fwXR/
HTML
<div id="wrapper">
<div id="box1"></div>
<div id="box2"></div>
</div>
CSS
#wrapper {
float: left;
}
#box1 {
background: red;
height: 100px;
width: 100%;
}
#box2 {
background: green;
height: 100px;
width: 400px;
}
Possibly this is what I meant:
document.getElementById("upperDiv").style.width = document.getElementById("bottomDiv").style.width
Really depends on your setup. The easiest way by far would be to just apply the javascript code to both DIVs at the same time.
Setting the width of the first DIV to be 100% should cause it to resize the width to match the second DIV (as the resize will force the parent DIV to increase in width too), but you will have a problem when trying to get the height to match, as with pure CSS the first DIV will have no reference to recalculate its own height to match.
Example Here
Alternatively, instead of making the second DIV resize you could resize the parent DIV and have both children set with CSS as follows:
width:100%;
height:50%;
I have an absolute positioned div that I need to get to to fill the entire document for a background to a modal window.
I can get it to fill the window but when there is a scroll bar it doesnt fill the area that is currently visible.
This is my current code:
position:absolute;
top:0;
left:0;
height:100%;
min-height:100%;
By the way I can get it to fill the document horizontally.
Give the div position:fixed and top,bottom,left,right 0
See here:
http://jsfiddle.net/sQLPr/
edit - removed the following line
and it's parent (probably body)
position:relative
div.covered {position: fixed; top:0; left:0; bottom:0; right:0;}
test it here: http://jsfiddle.net/meo/kGUYG/2/
Position absolute is gonna scroll when you scroll the page unless you find a JS solution. You need to use position fixed so the element does not scroll when the content does.
Put it in a table with 100% width and that's all