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>
Related
I have a container and inside I have a div I wanted to stick to the left corner of the screen, but I always have a gap
How do I obtain something like this? Thanks in advance
https://onedrive.live.com/redir?resid=22090721B1B171B7!12771&authkey=!AEDRyX0320pmcLk&v=3&ithint=photo%2cjpg
i hope to help with this example https://jsfiddle.net/step/L9rn4fkg/ you play with margin-top
.sticky {
width:100px;
height:100px;
float: left;
position: fixed;
background-color: #30cff0;
margin-top:50px;
z-index:1000;
}
The most basic way to reach this is:
html, body {
margin: 0;
padding: 0;
}
And make sure your div doesn't have any margin or padding on the left side either (for instance, when you use bootstrap's class="container" it will give you a left and right padding of 15px.
I think you should reset your body(or your elements parent of you want stick) margin.
you can use:
* { /* it's a hard method */
margin: 0;
padding: 0;
}
.fix-el {
position: fixed;
width: 100px;
height: 100px;
/* center it */
line-height: 100px;
border: 1px solid #EEE;
top: 50%;
margin-top: -50px;
text-align: center;
}
<div class="fix-el">
fix this
</div>
hope you can solve it
I want to make a message box at the lower left corner of the browser window. I want the div to remain stuck to the lower left corner. So if I make the browser smaller it will not disappear. Here is the jsfiddle I am working with. But it's not working. How can it be done in css? Here is my css code:
#lowerleft
{
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
}
Take a look at position; in this case position: fixed; bottom: 0;
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
#lowerleft
{
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
position: fixed;
bottom: 0;
}
<div id="lowerleft">
I am stuck to lower left border of browser. And I am stuck at the top of lower boundary of te browser.
</diV>
#lowerleft
{
position:fixed;
bottom:0;
left:0;
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
}
Jsfiddle Demo
To your css add this:
position: absolute;
bottom: 0px;
left: 0px;
JSFiddle
Use absolute positioning (syntax example below):
#lowerleft {
position: absolute;
left: 0; bottom: 0;
}
What you are currently doing is modifying the margin of the element. This only has an effect on the elements surrounding the subject.
Using absolute positioning places the subject div on top of everything else, having no effect on surrounding elements.
Find out about absolute positioning from the w3Schools site here.
I have a header section along the top of my site which I want to stay fixed when people scroll down the page. The background of the header is black against a plain white background.
After adding in the position:fixed; rule it seems to add a margin of about 16px between the top of the page.
#container-id-01 {
height: 100px;
width: 100%;
background-color: #000;
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
position: fixed;
}
I've tried changing the margin to float:left; but it still doesn't make any difference. The width: 100%; needs to be a percentage to fill the full width of the page.
Is there anyway to get rid of the margin?
Adding !important didn't work, and the body was already set to padding:0;
I took advice from a commenter and top:0; did the trick
:)
May be some style is overriding your current css make sure no other css is there for that element or you can do.
#container-id-01 {
height: 100px;
width: 100%;
background-color: #000;
margin-top: 0px!important;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px!important;
position: fixed;
}
this will override all other styles..
Try this, it might be the default body padding.
body{padding: 0px;}
The div map will have it content moving around.
I want the inside div (cyan) be on the bottom right to show a legend. I try with float style and could make it float left and right but cant find something like bottom-right
I'm not really sure if I need float, I only need cyan div on top of map.
Also what if I want it on the right, but in the middle. I try using Top: 700px but didnt work.
.map {
background: url(http://www.theodora.com/maps/new9/time_zones_4.jpg) no-repeat 0 0;
width: 500px;
height: 500px;
margin: 5px auto;
}
.legend {
top: 700px;
float: right;
background-color:cyan;
width:200px;
height:200px;
border: 2px;
border-style:double
}
<div class="map">
<div class="legend">Some content! Some content! Some content!</div>
</div>
Best way to achieve this is with absolute position: JS Fiddle
With absolute positioning, you can tell it to align with the bottom-right of its direct non- static parent (in this case the parent will be relative.
.map {
background: url(http://www.theodora.com/maps/new9/time_zones_4.jpg) no-repeat 0 0;
width: 500px;
height: 500px;
margin: 5px auto;
position: relative;
}
.legend {
background-color:cyan;
width:200px;
height:200px;
border: 2px;
border-style:double;
position: absolute;
bottom: 0;
right: 0;
}
More info on the position property: CSS Position Property.
Click here for visual
As you can see from the picture, my parent container is not expanding to fit my child container. The page container (#contain) actually stops at the bottom left hand corner of the kitchen photograph. The child container (#zone2) is clearly overflowing outside its parent container (#contain). I would like to be able to have (#contain) expand automatically to fit (#zone2). The CSS is:
#contain {
position: relative;
width: 100%;
margin: 0 px;
background: #E3DCCC;
z-index: 0;
}
#zone1 {
width: 100%;
height: 850px;
background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top;
position: absolute;
z-index: -1;
}
#head {
position: absolute;
top: 20px;
width: 100%;
height: 330px;
}
#head img {
max-width: auto;
height: auto;
}
#zone2 {
position: relative;
overflow: hidden;
padding: 3px;
top: 360px;
float: right;
right: 15px;
width: 53%;
height: auto;
border: 4px solid #715E40;
background-color: white;
}
#zone2 img {
max-width:100%;
height: auto;
float:left;
margin: 5px;
}
#zone3 {
position: relative;
top: 710px;
left: 15px;
float: left;
height: 340px;
width: 38%;
border: 4px solid #715E40;
background-color: white;
}
This is a float issue. Try adding the traditional CSS clear fix to #zone2's container:
.container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Be sure to put this in the :after pseudo selector, otherwise it won't work for you. Floated elements exist outside of normal document flow, which is why the container isn't expanding to contain them. The clear fix forces the floats to be cleared, which will cause the container to expand around the bottom of this element.
I tested adding more images to #zone2 and #contain expands vertically. Somehow you've got an element(s) in #zone2 with padding or margins that aren't being added to the parent's total height.
If you want a quick fix in order to move on then add margin-bottom: 30px; to #zone2.
I've duplicated your problem and was able to resolve it with this: You might want to try it. It's looks a bit odd so make a class for it if you like. I'm more concern with where it is placed.
Just beneath lines of your code, add my third line. Just that and you are done. Note, it more about positioning.
<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />
Just add the third line.
and just modify one of your styles:
#zoneclear {
clear: both;
float:none;
display:block;
height: 30px;
position: relative;
}
[EDIT]
The codes have a serious bug in firefox which is not present in Google Chrome (that I tested in earlier due to your relative positioning. So I've modified the #zoneclear style to fix that. You might have to test if the other browsers like this hack.
I hope it helps you