I would like to make a div child element as overlay for all the parent content,with parent width fixed. (an example could be the js captions you see on photo galleries usually)
HTML:
<div class="parent">
<div class="child">child</div>
<div class="overlay">overlay them</div>
</div>
CSS:
.parent{
width:300px;
max-width:300px;
}
.child{
width:100%;
min-width:100%;
position:relative;
}
.overlay{
position: /*?? to make it cover like overlay all the .child so all the .parent content*/
}
jsfiddle: http://jsfiddle.net/ttUgM/1/
Try giving the .parent a position:relative and the .overlay a position:absolute this will allow you to position the .overlay relative to the .parent. Is that what you want?
Related
I want to flow multiple divs (function_block) inside another div (WebPage_NavigationWrapper). I don't want to give WebPage_NavigationWrapper div fix height, neither increase its height to adjust the overflow of other divs (function_block) but scrollbar appears on WebPage_NavigationWrapper div.
http://jsfiddle.net/toxic_kz/oqowv1wb/
Now I know I can achieve this by using display: table-cell; but then I lose width of function_blocks in case it goes over flow.
.function_block{
display:table-cell;
width:120px;
height:60px;
margin-left:3px;
margin-top:3px;
background-color:blueviolet;
}
http://jsfiddle.net/toxic_kz/oqowv1wb/
Set fixed height of parent div then scroller will enable for div.
#WebPage_NavigationWrapper{
/*display: table;
table-layout: fixed;*/
width:100%;
height:50px;
padding:10px;
overflow: auto;
}
Please refer following link from fiddle.
`http://jsfiddle.net/toxic_kz/oqowv1wb/`
I found the answer; introduce another div with width in px inside the functionBlock div and give functionBlock div
<div class="function_block">
<div class="function_inner_block">
function_block
</div>
</div>
<div class="function_block">
<div class="function_inner_block">
function_block
</div>
</div>
<div class="function_block">
<div class="function_inner_block">
function_block
</div>
</div>
<div class="function_block">
<div class="function_inner_block">
function_block
</div>
</div>
and give functionBlock div display: table-cell;
.function_block{
display: table-cell;
/*float:left;*/
width:120px;
height:60px;
margin-left:3px;
margin-top:3px;
background-color:blueviolet;
}
.function_inner_block{
width:121px;
min-width:121px;
background-color:yellow;
}
now whoever put negative mark on my blog should either change to plus mark OR bring me another solution ....
Please use overflow:auto as overflow:scroll will maintain a scrollbar regardless of whether there's overflowing content or not but auto will only show this when it needs to.
So your code should look like this:
#WebPage_NavigationWrapper{
/*display: table;
table-layout: fixed;*/
width:100%;
height:auto;
padding:10px;
overflow-x: auto;
overflow-y: hidden;
}
JSFIDDLE
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/
The following code has a DIV that needs to be positioned at the top of the container, another at the bottom and then the content needs to come through in the middle.
<div style="position:absolute; top:0; width:100%; height:40px"></div>
<div class="howto"></div>
<div style="position:absolute; bottom:0; width:100%; height:40px"></div>
So we don't know the height of the containing DIV. How without JS can the div with class howto have the height of the container DIV less the height of the absolute positioned div at the top and bottom so as to contain content between these 2 DIVs.
For what you wish to accomplish, this is one possible solution:
#tinkerbin: http://tinkerbin.com/QsaCPgR6
HTML:
<div class="container">
<div class="header"></div>
<div class="howto">
Has height set to auto. You may change that if you want to.
</div>
<div class="footer"></div>
</div>
CSS:
.container {
position: relative;
padding: 40px 0; /* top and bottom padding = .header and .footer padding*/
}
.header,
.footer {
position: absolute;
height: 40px;
width: 100%;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.howto {
height: /*specifiy one if you wish to*/;
}
As far as I know there isn't a pure CSS way to do what you're trying to do without JS.
See this previous post on SA:
Make a div fill the height of the remaining screen space
I have a absolute positioned div with overflow auto. Inside this div is another absolute positioned div. My problem is that this child div gets cut off due to the overflow. I want it to escape the container div as it would if overflow was not set. I have tried setting z-indexes but it does not help. What can I do?
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
position:absolute;
z-index:0
overflow:auto;
width:400px;
height:400px;
border:1px solid #000;
}
.child {
poisiton:absolute;
z-index:1
width:300px;
height:450px;
border:1px solid #f00;
}
See if you can rely on another method to clear your floats. Changing your CSS to overflow: visible is definitely a good solution.
Your other solution is to take the div outside of its container so it doesn't get cut off, and put them both inside of a new container:
<div class="container">
<div class="parent">
</div>
<div class="child">
</div>
</div>
CSS:
.container {
/* apply positioning from .parent */
}
.parent {
position: absolute;
top: 0;
left: 0;
}
.child {
/* apply positioning from .child */
}
If you want some elements to not overflow the parent and some elements to not, you'd be better off placing the current child div outside of the current parent. Just make it an absolutely positioned peer.
There...
#logoWrapper{
background-image: url(../image/bg_img.jpg);
height:86px;
width:100%;
}
Q> How to fix the size of the image get into #logoWapper same with its Wapper automatically?
#logoWrapper img{ // not work
height:86px;
width:100%;
}
Thank you!
For a background image in CSS3 if you want to stretch not repeat you can use background-size: 100%;
Documented here http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
Alternatively you can layer a absolute positioned image inside a relative positioned div and add an additional wrapper.
<style>
#wrapper {
position:relative;
...
}
#wrapper div, #wrapper img {
position:absolute;
top:0px;
left:0px;
...
}
</style>
<div id="wrapper">
<img ... >
<div> this goes on top of image</div>
</div>