I want the child div width to be 100% of the body.
CSS
#container {
position:relative;
width:400px;
height:100px;
margin:0 auto;
background:red;
}
#inner {
width:100%;
height:30px;
background:blue;
}
HTML
<div id="container">
<div id="inner"></div>
</div>
Here is the fiddle
I'm using position:relative for parent div and the position:absolute; solution is not working. How can I do this? Js solutions are acceptable.
Check this fiddle
CSS
body {
margin-top:30px;
}
#container {
width:400px;
height:100px;
margin:0 auto;
background:red;
}
#inner {
width:100%;
height:20px;
background:blue;
position:absolute;
right:0;
left:0;
}
You just have to remove the position:relative from the container div and everything will work as expected
AND
I dont think there is a need for writing JS for this as this can be just obtained using CSS.
In html, if you have an element inside of a container while using % it will respect the containers boundaries.
So, no sure why Lal was downvoted. but his solution works.
Especially because your container is relative, the absolute container will be absolute to the container and not the body itself. You could remove position: relative; on the container and it will work that way, but it depends on what you want to do.
Related
Is it possible to center an absolute position div within a relative dive with margin 0 auto?
HTML:
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer{
background: red;
margin: 0 auto;
width:100px;
height:100px;
}
.inner{
position:absolute;
width:20px;
height:20px;
background:blue;
top:10px;
left:10px;
}
I was hoping that the absolute positioning would work within the outer one ok but I guess the margin. The above code can be seen here: http://jsfiddle.net/g4y4czff/
Ideally I'd like to use css to solve this but I reckon there's more likely to be a js solution.
Any ideas greatly appreciated.
C
New fiddle: http://jsfiddle.net/g4y4czff/1/
Just add position: relative to .outer
Reason is because the default position property is static
since you wanted it centered, here you have it centered horizontally and vertically too. Placing position:absolute; inside position:relative; allows it to be inside of it.
http://jsfiddle.net/g4y4czff/3/
.outer{
background: red;
margin: 0 auto;
width:100px;
height:100px;
position:relative;
}
.inner{
position:absolute;
width:20px;
height:20px;
background:blue;
top:0;
margin: auto;
left:0;
right:0px;
bottom:0;
}
Issue #1
Trying to make 2 divs align with eachother,
the fist div doesnt have a scrollbar, but the second has one. The scrollbar cause the second div to be offset from the first one.
Is there a way to align those 2 divs?
Issue #2
Why is the second div not scrolling when it has the overflow-y:scroll; ?
body, html {
margin: 0;
padding: 0;
border: 0;
outline: 0;
overflow:hidden;
}
.fixed-top-container {
text-align:center;
top:0px;
height:100px;
min-height:100px;
max-height:100px;
width:100%;
display:inline-block;
margin:0 auto;
padding:0;
background-color:rgba(0, 0, 0, 0.5);
}
.container {
width:100%;
height:100%;
background-color:#F0F0F0;
overflow-y:scroll;
}
.content {
width: 800px;
height:100%;
margin:0 auto;
background-color:#FFFFFF;
}
View JSFiddle for issue: http://jsfiddle.net/Aaeijh/qAh9g/1/
How can we get the bottom div to scroll?
Use the user friendly <textarea> instead of old <div> technique
<textarea rows="10" cols="50" class="container">
//your text here
</textarea>
JSFiddle
remove overflow:hidden; and overflow-y:scroll; ..
Hi i have this a div called "nav" that contains divs with a class "thumbs". Im trying to create a table of contents like div that can be scrolled to display further thumbnails.
this is my CSS so far: (note that each thumbs are position:absolute and is left: positioned accordingly)
#nav {
position:absolute;
width:768px;
height:214px;
bottom:0px;
/*-webkit-transform:translateY(214px);*/
background:gray;
overflow:auto;
}
.thumbs {
position:absolute;
width:80px;
height:100px;
margin:10px 10px 10px 10px;
background:white;
}
I want it to be scrollable so that if the thumbnails exceed 768px (width of nav) it can be scrolled to the left to view more.
Thanks
edit: I forgot to mention that I am doing this in PhoneGap. It will be a mobile app. thanks!
Remove position: absolute; and add float: left; from your thumbs class. That should do it.
UPDATE
If the number of thumbs are known in advance, the inner div's width can be set via CSS. Otherwise, it can be set onload or whenever a thumb is added/removed via JS.
$('#div').css('width', ($('.thumbs').length * $('.thumbs:first').outerWidth(true)) + 'px');
You can achieve this with the combination with max-width, display:inline-block & white-space.
Like this:
#nav_outer {
position:absolute;
bottom:0px;
background:gray;
overflow:auto;
}
#nav {
height:214px;
max-width: 300px;
bottom:0px;
/*-webkit-transform:translateY(214px);*/
background:gray;
white-space:nowrap;
}
.thumbs {
white-space:normal;
display:inline-block;
*display:inline; /*IE7*/
*zoom:1; /*IE7*/
width:80px;
height:100px;
margin:10px 10px 10px 10px;
background:white;
}
http://jsfiddle.net/xzcDD/3/
In my example when the .thumbs less than the width of 300px then there is no scroll
I'm using cross slide script.
The problem is I can't move the div to the background: slideshow overlapping all other divs. Tried to change z-index: Set z-index 0 to background div, and z-index:2 to all other divs. Still no success. Is there anyway to apply slideshow to the background div?
My css strcture looks like that
<body>
<div id="bg">
"all stuff goes here"
</div
</body>
And css for #bg
#bg {
/* Stretch background */
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:0;
}
Set css to:
#bg {
/* Stretch background */
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:0;
}
#test {
position: relative;
background-color: red;
z-index:5;
width: 120px;
margin-top:5px;
}
and html to:
<body>
<div id="bg"></div>
<div id="test">"all stuff goes here"</div>
</body>
Also see my jsfiddle.
Take it to the background with z-index: -1
instead of making z-index:0 or -1 to your "bg" id, make all other content z-index to 99 or more than that. so your "bg" will be back of your slides.
Do you observe the (complex) rules for stacking contexts, positioning, and z-index correctly?
https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context
I've created a div and add 2 divs to it:
<div id="content">
<div id="a"></div>
<div id="b"></div>
</div>
and the styles:
#content {
width:100px;
height:100px;
background-color:blue;
}
#a, #b {
position:relative;
top:0px;
left:0px;
width:100px;
height:100px;
background-color:red;
}
#b {
top:-100px;
background-color:green;
}
In Firefox I got one 100x100 green "box", but in IE, the "content" div is higher than 100px (it is 200px high), and you can see the blue "box" under the green.
Is it possible to force the "content" div to be 100px high?
#content {
width:100px;
height:100px;
background-color:blue;
overflow:hidden;
}
Try overflow:hidden or overflow:auto on the #content div to see if that gives you the desired result. You may also want to issue a padding:0px; and margin:0px; on your divs.