<div style="background-color:#303030;height:5.5%;">
<input type="text" style="border:1px solid;
top:50px;
bottom:10px;
height:90%;
left:20px;
width:25%;
" />
Here I have a dark div bar, with an input inside it. Why doesnt the top, bottom, left work as expected?
position:absolute;
display:inline-block;
Please note:
Your div has a height of 5.5%, and inside you place an input field 50px from the top, with a height of 90%(!). That is a huge input field. It makes no sense. Use either relative or exact measurements.
The div is missing a </div>
Don't mix-up mark-up and style (css)
In order for positioning to work, you need to declare what type of positioning to use... position: absolute; position:relative; position: fixed; etc...
You need to have the position of the element declared before you can position it in your page. The position property has 4 or 5 different settings. Inherit, absolute, fixed, static, and relative. Absolute won't work, because it needs a parent element that is positioned. Static is the default, and inherit inherits. Fixed freezes the element to the browser window. When you scroll, it won't move. Relative positions it from where it's supposed to be, so I think that's the one you would want.
Related
I have a div inside a div. The outer div's job is to position the box, while the inner div's job is to position the text. These divs are within a larger div, but I don't think that's the problem. When I try to put padding on the outer div, or in other words move the box, the padding is applied to the inner div and the box is thus getting bigger in that direction. The top-left hand corner is always stuck to the other div it is inside. How do I make it so that the padding is applied to the outside of the box instead of the inside?
Here is the formatting:
<div style="width:100px;
height:50px;
padding-left:10px;
padding-top:10px;
border: 3px solid #D8BFD8;
align:center;">
<div style="font-size:x-large;
padding-left:40px;
padding-top:0px;
font-family:'Arial';
color:black;">
Profile
</div>
</div>
Not too sure, but by moving the outer box are you sure you haven't mistaken padding with margin? Padding is applied to the inside of the div.
I just changed
padding-left:10px;
padding-top:10px;
to
margin-left:10px;
margin-top:10px;
and increased it to make it more obvious. Also moved the inline css to make it clearer.
http://jsfiddle.net/H334r/3/
1 - For readability, it's generally good practice to not mash a bunch of languages together, even though web dev requires it every now and then.
So separate the css into and throw it in the or use a css stylesheet.
2 - You'll want to have the outer div relative to the page. So in css, position: relative. And the inner div, you want to use an absolute position. So position: absolute.
I took the liberty to clean up code and threw it here in jsFiddle. http://jsfiddle.net/w7Ltp/1/
But if you want the throw it into a html page.
<style>
#outerbox{
width:100px;
height:50px;
padding-left:10px;
padding-top:10px;
border: 3px solid #D8BFD8;
align:center;
position: relative;
}
#innertext{
position: absolute;
font-size:x-large;
padding-left:10px;
padding-top:0px;
font-family:'Arial';
color:black;
}
</style>
<div id="outerbox">
<div id="innertext">
Profile
</div>
</div>
Padding is applied inside an element.
from W3Schools, The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
So if you are applying the padding to your outside div (div with 100px width), the elements inside it are the ones that get affected.
You might want to look at using margin instead. Or it would be better if you set the padding to the parent of the outer div; With that, all elements inside the parent of the outer div will be uniformly spaced.
I see that you have "align: center" for your outer div. Try using "margin: auto".
Have a look at, http://thomaspalumbo.com
I have this CSS for my website's container:
.graybox {
padding: 0 30px 30px 30px;
background: #ededed;
position:absolute;
left:0;
right:0;
}
Then I have a container on top of that to center that info.
The .graybox container spreads the width of the page like I want but now my footer div is hidden, according to firebug is it actually behind? And up on the page?
Is there a fix for this?
While I'm here can anyone explain the white space on the right side of the page. It comes into effect once the page is resized smaller.
You can use the CSS z-index property to make sure your footer is in front of the content. Z-index only works when the element is positioned though. So make sure you add position:relative to your footer
#footer{
position:relative;
z-index:999;
}
Read more: http://www.w3schools.com/cssref/pr_pos_z-index.asp
EDIT
Just checked out the code of your website, and I don't understand why your graybox is positioned absolutely, this will only make things more complex. The same goes for your menu, why position it absolute, why not just add it in the right order in the HTML in the first place?
EDIT
If you want to center your content but with a background that has a 100% width then you can simply add a container div like so:
HTML
<div class="container">
<div>lorem ipsum....</div>
</div>
CSS
.container{
background:red;
}
.container div{
width:400px;
margin:0 auto;
background:yellow;
}
See JSFiddle here: http://jsfiddle.net/HxBnF/
Currently you cannot do this because you have a container which you set at 980px, don't ever do that unless you are sure you don't want anything to wrap over it, like in this case the background of a div in that container.
in the div style, just assign a z-index value greater than any other z-index such as
.divClass{
position: absolute;
z-index: 1 //if other elements are still visible chose a higher value such as 20 or even higher.
}
In my long journey to update my CSS skills from the deprecated dust that they have turned into, I've been playing around with certain CSS properties —particularly z-index —I'm noticing something strange or maybe there's a certain condition.
Example:
http://jsfiddle.net/mEpgR/
The element div1's parent is cont, I've made div1's position property set to absolute, yet when I shift it, it's moving relative to its parent. I was under the impression that items set to absolute positioning are outsider regular flow and move only relative to browser port as their parent.
What am I missing?
If the fiddle link does not work, code:
CSS:
.cont {
position:relative;
height:200px;
top:200px;
left:100px;
background: green; width: 200px;
}
.div1 {
background:red;
position:absolute;
top:50px;
}
HTML:
<div class="cont">
<div class="div1">DIV1</div>
</div>
An absolute positioned element is positioned relative to the first parent element that has a position other than static. Since you have it inside a parent with relative it will be absolutely positioned relative to this parent.
You might be looking for fixed position, which is relative to browser window.
I have a problem with setting the appropriate text to the slider. I want the text to appear on the bottom right of the page. Only problem is the different resolutions (tablet, laptop, 24'' monitor).
Testing page: http://tinyurl.com/d825kuv
code:
div {
position:relative;
float:right;
vertical-align: bottom;
}
to move an element to the bottom of a <div>, set the parent <div>'s position to relative: position:relative, then the <div> you want to be placed at the bottom should have CSS
div {
position: absolute;
bottom: 0;
right:0;
}
then just adjust the pixel values to suit your layout.
Do:
position:absolute;
right:0px;
bottom:0px;
This will make sure that the element in question will be as far right, and as far down within the parent as possible. Of course if you wanted to pad it from the right/bottom just take the pixels up a notch. Note that position:absolute only works if the parent's position is not set as default. If in doubt give your parent the following style:
position:relative;
<style type="text/css">
.a {
border: 1px solid #000;
position: relative;
}
.b {
background: #F93;
position: absolute;
top: 50px;
left: 50px;
}
</style>
<div class="a">
<div class="b">test</div>
</div>
a's height doesn't autoresize with it's content(beause b has flow), but how to resolve this problem, use css possible, not javascript.
If you are expecting to see your a-div resize, then I think you've misunderstood something. When you set an element to be absolute, you're taking it out of the "rendering flow", which means it won't interfere with any other elements on the page.
In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.
You see the following documentation: Absolute positioning
When you have a Div with position:relative, you can control any absolute element inside. In fact, absolute Div is out of the flow of the normal document as Greg mentioned above. As I see you set left and top for b and then if you set width of a to 60px like this. Your <div class="b"> is outside the parent box. This is how absolute elements work.
Try "float: left;" in both classes. Didn't test, however. In wich browser are you testing?
if div b is positioned absolute it's not considered 'inside a' anymore, because it's not rendered inside of it.
so div a will not resize as div b gets larger or smalller...
By setting position: absolute you're taking the div outside the normal document flow, which is why the container won't resize to contain it.
Did you want to set margin-top: 50px; margin-left: 50px; instead?