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
Related
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.
Hi!
This seems like a stupidly simple question, but I cannot seem to horizontally center the header DIV.
http://jsfiddle.net/1ucwafx6/
as you can see, the light blue rounded square is almost centered, but not quite. I've tried on multiple systems, browsers, and screen resolutions and the outcome is always the same. It is slightly further to the right. I really don't understand what is wrong here. I have also tried margin: 0 auto; however then it just doesn't do anything and just stays on the very left hand side.
It's due to the default margin on the body. Just set
body { margin:0; }
and you'll see the fix.
This should help you center it, assuming you want the position to stay fixed with your current HTML markup.
JS FIDDLE
#header {
position: fixed;
width: 90%;
background-color: #3498db;
left: 50%;
transform: translate(-50%, 0);
margin-top: 25px;
border-radius: 10px;
}
I removed the position fixed and set left and right margins to auto and it centers just fine.
http://jsfiddle.net/1ucwafx6/3/
CSS:
#header {
/* position: fixed; */
width: 90%;
background-color: #3498db;
margin-left:auto;
margin-right: auto;
margin-top: 25px;
border-radius: 10px;
}
Just add
#header {
left:0;
}
http://jsfiddle.net/1ucwafx6/4/
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>
Please check this page: http://badadesigns.com/work438/
Here at the top of the page there are social media icons but they are not aligned to the right side of the page. When I am resizing the browser page then the alignment is changing.
I am really not sure what code is being used, but I think this is it:
#logincont {
width:330px;
float:left;
margin-left:1145px;
}
Can anyone please help me with the alignment so that it is fixed and set along the right side border of the page?
div #logincont is set to float:left and has a huge margin-left which is unnecessary.
It should be float: right without margin, like this
#logincont {
width:330px;
float:right;
}
Update : If I understand correctly, you want the social media icons to be aligned on the right but not further than the content of the site.
Try this :
#logincont {
width: 940px;
text-align: right;
margin: 0 auto;
}
width is set to the width of the #content div, the content of #logincont is aligned right and #logincont itself is centered on the page with margin: 0 auto
If you are trying to get all of the content to stay within view try fixing this:
#logincont {
postition:absolute;
right:2px;
}
You could try this:
#logincont {
width:330px;
float:right;
}
Based on your requirements and the type of element you might need to add more properties.
Not sure what you're looking for specifically, but try this:
#login {
background: #113240;
color: #DDD;
height: 30px;
padding: 8px;
position: fixed;
z-index: 3;
top: 0;
right: 0;
left: 0;
}
#logincont {
width: 330px;
position: fixed;
right: 0;
}
#header {
background: white;
border-bottom: 1px solid #EBEBEC;
padding: 4.429em 0 0;
position: relative;
z-index: 1;
}
I try to center a div element ( the footer div in this case ) in my webpage but it insists on staying on the left side.
I am not quite sure what is wrong... Any ideas?
Thank you in advance.
HTML :
<div id='main'>
</div>
<div id='footer'>Centered Text</div>
CSS :
* {
padding: 0;
margin: 0;
font-size: 12px;
}
body {
font-family: helvetica, serif;
font-size: 12px;
overflow-y:scroll;
}
#main {
border: 1px solid #bbbbbb;
margin: 3% 5%;
padding: 10px 10px;
}
#footer {
font-size: 75%;
margin: 0px auto;
position: absolute;
bottom: 0px;
}
http://jsfiddle.net/DjPjj/2/
http://jsfiddle.net/DjPjj/13/
Try this:
#footer {
font-size: 75%;
width: 100%;
position: absolute;
bottom: 0px;
text-align: center;
}
Because your footer is absolutely positioned, you must tell it what width to take relative to its parent container. You can then use text-align to center the text within it.
Here is another example: http://jsfiddle.net/DjPjj/17/
This one centers a box within the absolutely positioned element. The inner box can be centered using margin: 0 auto because it is not absolutely positioned.
#footer {
font-size: 75%;
width: 100%;
position: absolute;
bottom: 0px;
}
#footerInner {
margin: 0 auto;
width: 300px;
background-color: #ddd;
text-align: center;
}
This is more flexible because the inner element gives you a new container to work with that is centered relative to the parent.
The reason it won't center is because of the positon: absolute;.
Keep in mind this means that the footer will always be at the bottom of the page, even if the content overflows past it. It will overlap. If you want to have it be attached to the bottom of the page, you must set the min-height of a container above it to 100% and then deal with a negative margin-top and remove the position: abosolute;
http://jsfiddle.net/4fuk7/1/
Notice how the centered text is overwritten.
If you are looking for something to always be at the bottom, this would work
http://jsfiddle.net/4fuk7/3/
Sorry, the last one would scroll to the top. This one doesn't, but you'd need to fiddle with it a bit to get it to properly align around the margin's you've set. http://jsfiddle.net/4fuk7/9/
http://www.tlunter.com/Layout 2/ is where I did something similar. You can reference that if you want.