i have came across a problem, i am fairly new to CSS but how do i make one div go over the other? This is my code:
#left_box
{
margin-top: 0px;
min-width: 10%;
max-width: 10%;
height: 800px;
background: #C90;
border: thin 5px #33CCFF;
position: absolute;
z-index:1;
left: 16px;
top: 1px;
float:none;
}
#bar_outside
{
margin-top:75px;
min-width:10px;
max-width:2000px;
height:55px;
background:#ff69b4;
border:#ff69b4: 5px;
position:static;
z-index:2;
}
thanks for your help!
If you want one div to be on top of the other, you can change the position: static in your #bar_outside to position:relative as the z-index property just works for relative, absolute or fixed. See the fiddle.
If you want the divs to be positioned one to the side of the other, use the float CSS attribute accordingly in both your CSS classes. See the fiddle.
You don't need position: absolute. Float left and define width
Related
I want to display my div tag in center of the screen.I draw my screen as black color ,current display position of div tag in red color(which I unexpected) and my preferd location of div tag in green color.
.welcome{
margin-left:20%
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
position: absolute;
}
<div class="welcome">
</div>
I want to display in middle.
Use transform:translateX
With the use of absolute positioning, the most flexible approach would be to offset the right hand edge of the div by 50% of the parent width, then by 50% of its own width using the transform property, translateX
The advantage is you dont need to rely on specifying absolute width/offset values in, e.g. px, so the div will remain centered if its dimensions change.
Additionally- for positioning; top/right/bottom/left should be used where possible in place of any margin or padding values, this approach also follows this.
.welcome {
font-size: 10px;
border: 1px solid #6AA121;
width: 60%;
height: 100px;
background-color: #C3FDB8;
position: absolute;
left: 50%; /* <--- move div right by 50% of parent width */
transform: translateX(-50%); /* <--- move div left by 50% of its own width */
}
<div class="welcome">
</div>
translateX is well supported, see here for a full rundown, the main point to note is that transforms require the -ms- prefix in IE9.and you will need -webkit- for iOS/Safari.
NOTICE
After going over your code again, it's become apparent that you are missing the ; after your margin left, and so the browser is ignoring it (hence why your code isn't working). However, you might find it a better alternative to use the left, right, top and bottom properties instead:
My Approach
since you are using position: absolute;, and you've given your div a width of 60%, you can use:
left:20%;
Since your width is 60%; leaving 40% of screen available.
40/2 (left and right gap) = 20% either side
Leaving:
.welcome {
font-size: 10px;
border: 1px solid #6AA121;
width: 60%;
height: 100px;
background-color: #C3FDB8;
position: absolute;
left:20%;
}
<div class="welcome">
</div>
.welcome{
margin-left:20%
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
position: relative; /* change absolute to relative */
margin : auto; /* & set margin to auto*/
}
<div class="welcome">
</div>
Try like this : DEMO
If absolute position is not needed, then use like this:
CSS:
.welcome {
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
position: relative;
margin:0 auto;
}
If you need Position:absolute, then use like this: DEMO
.welcome {
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
position: absolute;
left:20%;
}
You need to specify a width and then set the margins to auto. E.g.:
.welcome {width:60%; margin: 0 auto;}
Setting both the left and right margin to auto (as the above does) will center your div. If you do this without setting a width, the div will still be centered, but will fill the screen (or the previous div, at least) so you won't be able to tell.
Using position:absolute isn't a great idea here unless you need it for something else which isn't apparent in the question.
margin-left doesn't work properly with position: absolute (at least not in the way you are using it).
What you should write is this:
width: 60%;
left: 20%; // notice how this isn't margin-left
position: absolute;
This will centre the div.
If your div has a fixed width (e.g. 500px), try this:
width: 500px;
left: 50%;
margin-left: -250px;
position: absolute;
This works, and is the "correct" way of using margin-left with position: absolute.
I think that you can try an easier way. Try to remove absolute positioning and set margin left and margin right on auto. Like in the example below.
.welcome {
margin-left: auto;
margin-right: auto;
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
}
I'm busy on this new website thing, and I run into a problem. Normally, when making the menu, I would just use the entire space, like 100% width and maybe 100px height but now, I need just a portion of that, so there is a whitespace next to the menu on both sides.
I tried to get the square, that carries the menu, to the absolute top of the page, most obvious solution:
position:absolute;
top:0;
But now, the square is also moved to the absolute left of the page, instead I want it centered, but I can't get there. This is a piece of my CSS:
body, html {
background-color: #ecf0f1;
position: absolute;
top: 0;
margin: 0 auto;
}
.navbox {
background-color: #000;
height:100px;
width: 700px;
margin: 0 auto;
}
Is there anyone with the solution?
position:absolute;
top:0;
left:0;
right:0;
Adjust left and right to suit your desired margins.
You would probably want to set your left and right to percentages, using 50% for both will center it:
#menu {
position:absolute;
top:0;
width: 70px;
height:180px;
left: 50%;
right: 50%;
background-color: red;
}
Also, if you are not using absolute positioning you can do the same with this margin-left and margin-right.
jsfiddle
A related question is here and the answer does not work for me. In brief there are 2 columns left and right. And the right column have a children <div> or <section> or something. When the page is scrolled, the children must not scroll or move. Adding position: absolute to the child lets the child to scroll along with the page. And position:fixed making the child to appear at screen's extreme left or right and screen top depending on right:0 or left:0. How to make this fixed inside the right column?
The JSFIDDLE is here.
You can modify .right-inner class as follows to get the desired result
.right-inner{
position: fixed;
margin-right: 5%;
text-align: middle;
}
see the updated Fiddle
Instead of 0, the value of .right's left-position should be (at least) the value of the width of the left column
for example:
.right{
position: fixed;
top: 0;
left: 360px;
}
You don't need the wrapper for .right, so I've elliminated it in this fork of your fiddle: http://jsfiddle.net/ynMYm/
Try this:
.outer{
display: block;
width: 600px;
}
.left{
width: 350px;
border-right: 1px solid #555;
float: left;
}
.right{
top: 0;
left: 0;
width: 250px;
margin-left:350px;
position: fixed;
}
.right-inner{
position: fixed;
}
Fiddle: http://jsfiddle.net/5wM4V/42/
Full screen view: http://jsfiddle.net/5wM4V/42/embedded/result/
I am trying to place a css element to the right side of the header but not sure exactly how to do it. I tried using:
position: Absolute; top: 20px; right 0px;
That would work but if you adjust the browser the text moves with it.
I created a JFiddle that you can find here:
http://jsfiddle.net/rKWXQ/
This way you can see what I am trying to do. I have a text inside a wrapped div element that says Call Now (555) 555-5555.
Here is the header element and inside of that I have a right_header element.
<div id="header">
<span class="right_header">Call Now (555) 555-5555</span>
</div>
Here is my Header CSS:
/* Header */
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 70px; right: 0px}
Can someone please tell me the proper way to accomplish this please?
Note the left side will have a logo there that will not load in JFiddle!
Thanks!
You can easily just float it to the right, no need for relative or absolute positioning.
.right_header {
color: #fff;
float: right;
}
Updated jsFiddle - might need to add some padding/margins - like this.
Two more ways to do it:
Using margins on the element you want to position to the right of its parent.
.element {
margin-right: 0px;
margin-left: auto;
}
Using flexbox on the parent element:
.parent {
display: flex;
justify-content: right;
}
As JoshC mentioned, using float is one option. I think your situation suggests another solution, though.
You need to set position: relative on your #header element in order for the position: absolute on your #right_header to take effect. once you set that, you are free to position #right_header however you want relative to #header
You can do this way also if you want to do with position, Try this please
#header {margin: auto; position:relative; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 0px; right: 0px}
The answer using floats from JoshC will work fine, however, I think there is a reason this is not working.
The reason your code does not work, is that the absolute position is relative to the which has dimensions of 0x0.
The '' should be absolutely position in order for this code to work.
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
change it to...
#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
<div><button>Continue</button></div>
to make button on the right of div
<style>
button {
display:block;
margin-left:auto;
}
</style>
I am having trouble with element stacking in a HTML page. I need to get span (class="class_span") to have a higher stacking order than div (class="class_div") with border. I have tried to change the z-index but with no luck. I know that I should not use absolute position, but the page is dependent on it, sorry. How can I accomplish this?
HTML:
<ul>
<li>
<div class="class_div">
</div>
<span class="class_span">
google
</span>
</li>
</ul>
CSS:
.class_div{
position: absolute;
border: 100px solid;
width:100px;
height:50px;
left:0px;
}
.class_span{
float: left;
}
Live DEMO
Add position: relative to the span so that you can apply z-index on it. Note that the z-index of your span must be higher than that of the div so that it appears above the div:
.class_div{
position: absolute;
border: 100px solid;
width:100px;
height:50px;
left:0px;
z-index: 1;
}
.class_span{
float: left;
position: relative;
z-index: 10;
}
Example
Edit:
As an alternative to float: left, you might consider using position: absolute and set left to 0px:
.class_span{
position: absolute;
left: 0;
z-index: 10;
}
You may need to set the top as well, and it may also be necessary to set a parent element's position to relative so that the span can be positioned relative to that parent element.
position:absolute will remove an element from the flow. You'll need to use position on .class_span too with a higher z-index.
Please check this.
http://jsfiddle.net/YMrLd/18/
The following CSS is there in the fiddle link.
.class_div{
position: absolute;
border: 100px solid;
width:100px;
height:50px;
left:0px;
}
.class_span{
position: absolute;
top: 100px;
left: 100px;
}
And let me know you need anything different.
Please attached a screenshot of your desired output if this doesn't help.