I am making a html file (that is just for me, and for having fun coding) and I need a div element (with other elements inside of it) to be at the bottom of my screen, but not move despite being pushed by another element's margin. I kind of drag the player section element to the bottom by using margin-bottom:-100px. These are the only two elements in my document right now (not counting the ones inside the div). When I run the code, the player section div doesn't move at all.
#output{
border:solid 2px #234;
background-color:#234;
border-radius:10%;
max-height:100px;
height:auto;
padding:5px;
}
#player-section{
margin-bottom:-100px;
}
This is what I have so far. I use the -100px to move the player section to the bottom but for some reason it does not work.
you can try like
#output{
border:solid 2px #234;
background-color:#234;
border-radius:10%;
max-height:100px;
height:auto;
padding:5px;
overflow : auto;
position: absolute;
bottom: 0;
}
I am trying to add a carousel-like animation to my photographic calculator
I am extremely new to javascript/html/css so I have been having some troubles doing this. :)
My idea was to fill in each table row with divs generated from an array, with all but the three divs beeing hidden by overflow:hidden of the outer container.
Here if my test jsfiddle:
table {
width:80%;
background:#ffff00;
border: 1px solid black;
position:relative;
overflow:hidden;
}
.test {
width:33.3333%;
height:100%;
background:cyan;
text-align:center;
vertical-align:center;
float: left;
position: relative;
left:0%;
top: 0px;
}
The problem is if I try to add more than 3 divs (set n=4), they wrap to the next line while I want them to stay on the same line. If I use absolute positioning then I can't use the overflow hiding (or can I?).
I am hoping there is an easy solution to this. Help?
The float: left causes elements to wrap when filling all available horizontal space. What you need to do is arrange your divs inline and make elements in your carousel not wrap:
http://jsfiddle.net/Wdnw9/19/
CSS
#box { white-space: nowrap; }
.test{
...
display: inline-block;
}
So I made JsFidle link and I'm troubled about relative and absolute positiong. So I made absolute div called top. I've got relative long (wide) blue panel with title that is positionend properly - top 0px. but when i'm making 2nd div in div id=top it has relative positioning top=70px (70 px is size of wide blue panel above). Sounds okey, right? But it isn't. I have no idea why It has so bad positoning . its relative to div="top" div, right? So why it moves so to bottom. Help please.
#top {
position: absolute;
top:0;
height:420px;
#panel {
margin:auto;
position:relative;
top:0px;
#panel-pic {
position: relative;
top: 70px;
height:350px;
background-color:black;
background-position: center;
background-size:cover;
box-shadow: 1px 1px 9px black;
}
panel-pic goes wrong!
I think you're mixing the two. :)
The parent should be relative and all elements you want to place relative-ly to it, should be absolute.
So just change #top's position to relative, and all others to absolute.
under #panel-pic p {
margin-top: 175px;
should be
margin-top: 0px;
working example: http://jsfiddle.net/gy3FU/7/
with css, can I put a div under another div without using absolute positioning?
I have these two divs, and I would like the solid white one to appear directly under the one with the yellow opacity (but not direct in the corner, at the corner of the outline).
How can this be accomplished. I've been experimenting with z-index and relative positioning, but to no avail.
Thanks
http://jsfiddle.net/loren_hibbard/WtGsv/
Without using positioning, I added a style to your content div using negative margins:
.content {
margin-top:-100px;
}
Working demo here: http://jsfiddle.net/WtGsv/3/
I suggest adding an id to your .fixed_width div which houses the .content div though, and using the id to give the negative margin to, that way the parent div has the negative margin, not the child div.
However if you want to use absolute positioning, I have updated your jsfiddle here:
http://jsfiddle.net/WtGsv/12/
Basically, you add a parent div with position:relative; around your other two divs that you want to use position:absolute;
I guess you should rewrite the markup, it is very simple, I don't know whether you are aware of this or not but you can pick up the div and place it in a relative positioned container, than you wont need negative margins
Demo
HTML
<div class="wrap">
Add a line item
<div class="inner_wrap"><textarea></textarea></div>
</div>
CSS
body {
background-color: #aaaaaa;
}
.wrap {
border: 4px dashed #ff0000;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 20px;
font-family: Arial;
position: relative;
}
.inner_wrap {
position: absolute;
width: 100%;
height: 100%;
background-color: #919191;
top: 0;
}
Yuu can use position: relative; top -100px, http://jsfiddle.net/WtGsv/1/
or you can use negative margins margin-top: -100px http://jsfiddle.net/WtGsv/5/
With both solutions, the div at the bottom still takes space where it would be originally
Note that adding a div dynamically doesn't preclude you from making it absolutely positioned, you just have to make the parent be positioned relative, and the dynamic absolutely positioned div will be inserted right where you want it http://jsfiddle.net/WtGsv/10/
You can place the div you want to be on top inside the div you want underneath, and position the one on top absolutely inside the parent.
Example HTML:
<div id="bottom">
lorem ipsum
<div id="top">
hello world
</div>
</div>
CSS:
#bottom {
background:red; /* to see dimensions */
position:relative;
}
#top {
background:rgba(0, 255, 0, 0.3); /* only to prove that it's on top */
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Here is a JSfiddle.
If you put them both inside a parent div, and set that to have a width equal on the width of the yellow box, then by default the white one would be placed directly below.
I did this way
.mainUnderline{
height:8px;
background-color:yellow;
margin-top:-15px;
}
.header{
width:400px;
text-align:center;
font-weight:900;
font-size:30px;
color:black;
padding-bottom: 2%;
margin-left: auto;
margin-right: auto;
}
<div class="header">
“See line under me”
<div class="mainUnderline"></div>
</div>
Hello I have a wrapper div around three float div, I want to wrap the wrapper around these divs,but I can't completely wrap them, I have given a top :25px to the floating div ,so this div overflow exacltly 25 px below the wrapper,
Here is my page http://jsfiddle.net/vpcxP/ ,see how floating div overflow the main container div at the bottom
PS:I don' t want to give overflow:hidden
have you tried adding padding to the bottom of #mainContainer?
For #mainContainer instead of height:auto use overflow:auto
#mainContainer
{
overflow:auto;
width: 835px;
margin:0 auto;
position:relative;
top:50px;
background-repeat:no-repeat;
background-image:url("Images/mainContainerBG.jpg");
box-shadow: 3px 10px 20px 5px #000;
}
you also may need to adjust the width. Set it around 900px.
You seem to have redefined style for .column. remove that property and use this for column.
.column
{
width:280px;
height:452px;
top:25px;
float:left;
left:5px;
box-shadow:3px 10px 7px 3px #4f4848;
background-color:#2c2b2b;
margin-left:5px;
}