I have a div that have css: height:50%; and inside there is another div with css: height:50%;.
Inside the second div, there is an image.
I can't have the image in the same dimension respect to height of the two (equal) div.
How can I fix it?
Example:
#div1{
height:50%;
position:fixed;
top:25%;
}
#div2{
height:50%;
position:fixed;
top:25%;
}
#image{
height:50%;
position:fixed;
top:25%;
}
<div id="div1">
<div id="div2">
<asp:Image id="image" url=".." runat="server">
</div>
</div>
The image is 20x387. The resolution is 1280x1024.
You should remove position fixed from img element, because position:fixed has no connection with the parent element.
So if you put position fixed to an element, it won't consider what his parent is doing.
Position fixed to that img element is also useless, because it is wrapped by a fixed position element.
Cheers :)
Related
I have some floated divs in a wrapper, they should be side buy side and a fixed width. However as together the child divs are wider than the parent div this has been set to overflow:hidden;
My problem is I have to set the width of the parent div to accommodate the combined width of the child divs otherwise they are pushed onto a new line by the lack of available width.
I would like to not have to set the width of the wrapper div if possible as the child divs will be added dynamically.
Css:
.shell{
width:900px;
}
.wrap{
overflow:hidden;
height:120px;
margin-top:35px;
width:1000px;
}
.cont{
width:500px;
float:left;
position: relative;
}
Html:
<div class="shell">
<div class="wrap">
<div class="cont">
</div>
<div class="cont">
</div>
</div>
</div>
Note: The relative:position; must be kept for other reasons.
.wrap{
overflow:hidden;
height:120px;
margin-top:35px;
min-width:1000px;
width:auto;
}
if you want to view them side by side , then you should consider using inline-block
that is why we use min-width , just to initiate a width
Here's the (simplified) scenario. I have a div which contains another div. The outer div is of fixed size, has scrollbars and relative positioning. The inner div is larger than and is positioned relative to the outer div. I want the inner div to be fully visible, "floating" above the outer div.
I appreciate this sounds artificial as there is no point in constraining the size of the outer div in this way. It is. In the real application though, there is other content inside the outer div which does need to be controlled with scrollbars.
How can I do this, using css alone? Please note, the inner div must be positioned relative to the external one, so using position:fixed is not an option.
Markup:
<div id="container">
<div id="popup">Popup Text</div>
</div>
Css:
#container{
overflow: scroll;
height:50px;
width:50px;
position:relative;
}
#popup {
position:absolute;
top:20px;
border:1px solid #000;
height:100px;
width:100px;
}
Here's a Plunker
You can add extra wrapper and set position: relative and overflow to different wrappers:
HTML
<div id="base">
<div id="container">
<div id="popup">Popup Text</div>
</div>
</div>
CSS
#base {
height:50px;
width:50px;
position:relative;
}
#container{
overflow: scroll;
height:100%;
width:100%;
}
#popup {
position:absolute;
top:20px;
border:1px solid #000;
height:100px;
width:100px;
}
Fiddle: http://jsfiddle.net/UGftq/
The "secret" is that the overflow property
...affects the clipping of all of the element's content except any
descendant elements (and their respective content and descendants)
whose containing block is the viewport or an ancestor of the element.
The containing block for absolutely positioned elements is the nearest ascestor with non-static position. Therefore, when element with overflow is not positioned itself, it doesn't clip absolutely positioned descendants.
I need to have my element's position set to fixed because I want to use it as a header in scrollable div. I also need to specify the elements poisition at top:0 and right:0
If I use those properties together it doesnt work. How can I solve this;
position:absolute;
top:0;
right:0;
works but I need to have position fixed..
If I use position fixed the div is position over the whole document not inside my div where I append it...
Fiddle:http://jsfiddle.net/TP2cp/
Use position:fixed.
Example:
HTML
<div class="main">
<div id="header"><p>Header</p></div>
</div>
CSS
.main{
width:100%;
height:2000px;
}
#header{
width:100%;
height:100px;
position:fixed;
top:0;left:0;
background:yellow;
}
JSFiddle.
UPDATE
A solution with width:inherit; :
JSFiddle#2.
Who said you couldn't use those properties together?
position:fixed;
top:0;
right:0;
Try it out yourself in this example jsFiddle here.
HTML:
<div id="theDiv">Example Div</div>
CSS:
#theDiv { position:fixed; top:0px; right:250px; }
In reply to OP's edit:
You can't have a fixed positoned div inside a container div like that, as making it a fixed div will take it out of the flow. You should use position:absolute inside of a container div with position:relative if you plan on having it fixed inside another div.
Take a look at my new jsFiddle here.
HTML:
<div id="container">
Container Div
<div id="fixed">Child Div</div>
</div>
CSS:
#container {
width: 400px;
position:relative;
}
#fixed {
position:absolute;
top:0px;
right:0px;
}
Why not:
position:fixed;
top:0;
right:0;
the problem is how did you positioned the scrollable div? if I have understand what you want I think you just need to put the header outside the scrollable div
I have a simple HTML page and it contains two divs aligned vertically. The page is scrollable because of second div. I want the first div's position to be fixed, or nonscrollable, so that only the second div is scrollable. I added position:fixed to first div's css but this time, the second div was placed on first div, so the first div disappears under the second div.
CSS
body {
width:1000px;
height:100%;
margin:0 auto;/*body ortalama*/
}
#div1 {
height:300px;
background-color:#00CC66;
}
#div2 {
display:block;
word-wrap:break-word;
padding:30px;
font-size:72px;
background-color:#FF3;
}
HTML
<div>
<div id="div1"></div>
<div id="div2">
<p>
<!--Content Here-->
</p>
</div>
</div>
Fixed is always relative to the parent window, never an element. Once the position is set to fixed its taken out of the document flow.
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.
so in the second div2 add these
position:relative;
top:300px; /*Bump it down by the height of div1;*/
Hope it helps;
You should add a height and set overflow auto instead of scroll because with scroll you will have the scrollbar always even if the content is less than the specified height. For example:
#div2 {
background-color: #FFFF33;
display: block;
font-size: 72px;
height: 200px;
overflow: auto;
padding: 30px;
word-wrap: break-word;
}
Add this css to #div2 (you'll need to specify a height for #div2 otherwise the the scroll bar won't know where to start):
overflow-y:auto;
height:50px;
See the example here: http://jsfiddle.net/38xkn/1/ (scroll to the right first as you've set the body width to 100px, then you'll see the scroll bar for #div2).
Okay, here is another option. It's layout is somewhat different but it should get the job done. It uses absolute positioning on div1 to get it to the top, and a percentage width to stop it covering the scroll bar for div2. It's not perfect so you may need to tweek it slightly.
HTML
<body>
<div>
<div id="div1">a</div>
<div id="div2">
<p> SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDDAMSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p>
</div>
</div>
</body>
CSS:
body{
width:100%;
height:100%;
margin:0 auto;/*body ortalama*/
overflow:hidden;
}
#div1{
height:300px;
background-color:#00CC66;
position:absolute;
top:0;
width:97.5%;
}
#div2{
display:block;
word-wrap:break-word;
padding:30px;
font-size:72px;
background-color:#FF3;
overflow-y:auto;
max-height:50px;
padding-top:300px;
}
EXAMPLE:
http://jsfiddle.net/38xkn/6/
I made this fiddle, I am expecting the red div to be positioned directly below the yellow one. They are not. How can I position both the div up and down relative to wrapper?
Guessing it should be simple, but I can't get it to work. I think I need to use relative. The 'bars' are time lines and 'float around' freely.
HTML:
<div class="wrapper" style="background:blue">
<div class="up" style="background:yellow"/>
<div class="down" style="background:red"/>
</div>
CSS:
.wrapper {
width:50px;
height:400px;
background:blue;
margin:1em;
}
.up {
position:relative;
top:100px; /*I want this one 100px from the top of .wrapper*/
height:100px;
}
.down {
position:relative;
top:200px; /*I want this one 200px from the top of .wrapper*/
height:50px;
}
position:relative relates to the previous div.
Div .up has height 100px, so to place .down directly below .up, .down should contain top:100px. Therefore, top:200px on .down will place it 200px below .up, which is not what you want as .up only has height 100px. Solve it by changing top attribute of .down to top:100px
If you want to position it relative to wraper, use position:absolute.
Demo: http://jsfiddle.net/6wSAJ/274
you dont need to set top:xx; if you want just to stack yellow and red
modify your html to be in format '<div></div>' rather than '<div />'