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.
Related
I have 2 div inside a container, I want to set one div left aligned to the container and another one to be align right end of the browser via css. Is that possible?
Example Image
Some one help me to fix this here fiddle?
.container {
background: #ccc;
height: 400px;
max-width: 500px;
margin:0 auto;
}
.outer {
background: #f8f9fa;
margin-top: 40px;
}
.left-box {
background: #000;
color: #fff;
padding: 10px 0;
float:left;
width:50%;
margin-top:20px;
height:100px;
}
.right-box {
background: #EC8400;
padding: 10px 0;
float:right;
margin-top:20px;
width:50%;
height:100px;
}
<div class="container">
<div class="outer">
<div class="left-box">
some text
</div>
<div class="right-box">
text/image here
</div>
</div>
</div>
You can use position fixed and then left 0 for the div you want to align left and right 0 for the one you want to align right. Css will be something like this
.divleft {
position: fixed;
left: 0;
}
.divright {
position: fixed;
right: 0;
}
yes,
first put the div you want right of browser outside container as it really has no point in the div but if you want it inside container, it's still possible.
try this
// if the right-box is outside the container
.right-box
{
position: absolute;
right : 0;
}
// if the right-box is inside the container
.right-box
{
position: absolute;
left : 100%;
}
Note: the second one starts your right-box from extreme right of your container and can be adjusted to your liking.
similar for the left-box
New guy over here. I've searched and have found similar issues but not exactly what I am after.
I simply want to know how to horizontally centre an image within a div, but also position the image at the bottom of the div (20px or so from the bottom to be precise).
I can kind of get the look I'm after by setting the container div as position:relative, and the image position:absolute, with bottom:30px and margin-left: 49%. I would just rather it be exact, rather than using left margin. The container needs to be relative for other elements I have on the page.
Any help will be greatly appreciated. Thanks.
Horizontally center and vertically bottom divClick here
.parent {
position: relative;
}
.img {
width: 50px;
height: 50px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
}
centers the absolute image inside the relative div
div > img {
left: 50%;
transform: translateX(-50%);
}
Alternatively, you can combine setting left/right to zero and setting the left/right margin to auto:
.box {
position: relative;
}
.box img {
position: absolute;
left: 0;
right: 0;
bottom: 2em;
margin: 0 auto;
}
Demo: https://jsfiddle.net/ffyof90e/
Explanation: Why does "position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto" actually center?
Do it like this, for example:
<div id="divid">
<img src="http://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_normal.png" alt="Smiley face" height="42" width="42">
</div>
You can now apply css like this:
div > img {
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
margin:auto;
}
#divid{
position: relative;
height: 300px;
width: 300px;
border: 3px solid #73AD21;
}
You can check it at https://jsfiddle.net/n4528wxz/1/
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 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 have this following chunk of my page.
Style:
.featuredcontainer {
width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
}
.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
}
And example HTML:
<div class="featuredcontainer">
content
</div>
<div class="lessonnavcontainer">
menu
</div>
When the page is displayed. the navcontainer is to the right of (as it should) but under the featuredcontainer. When I move the navcontainer up using relative positioning, it looks right, but there is a bunch of empty space at the bottom of the page. What do I do?
Surround your two divs with a "wrapper" div like so:
<div id="wrapper">
<div class="featuredcontainer">content</div>
<div class="lessonnavcontainer">menu</div>
</div>
Then to center them, add margins to the wrapper:
#wrapper { margin: 0px auto; }
Then to have the two divs be side by side, add a float:
.featuredcontainer { float: left; }
.lessonavcontainer { float: left; }
In order for the centering to work, you need to declare a width on the wrapper:
#wrapper { width: 800px; }
Put both the nav and the featured containers into another wrapper div.
HTML
<div class='wrapper'>
<div class="navcontainer">
menu
</div>
<div class="featuredcontainer">
content
</div>
</div>
And get rid of all the relative positioning. Relative positioning is not recommended for basic layout issues like this. Use floats instead. The wrapper should have a fixed width, which allows it to be centered properly with margin: 0 auto.
CSS
.wrapper{
width:752px;
margin: 0 auto;
overflow:auto;
}
.featuredcontainer {
width: 450px;
height: 700px;
float:left;
border: 1px groove grey;
}
.navcontainer{
float:left;
height: 600px;
width: 300px;
background:#ff0;
}
JSFiddle http://jsfiddle.net/5w5SC/
Use the float property. Using float, css can position divs next to each other horizontally.
.featuredcontainer {
width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
float: left;
}
.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
float: left;
}
Thats a starting point, try to use float left or float right and see what happens. Fiddle with it until it looks exactly how you want it.
To get them side-by-side you need to add the float attribute in the CSS. To get them to resize with page width you need to add relative widths to them. To center them on the page (horizontally) you need to put the divs inside a relative positioned div in the html. Here is a fiddle. http://jsfiddle.net/Ne5zs/
Be sure to introduce a clearfix (there are many versions of this technique) on any floated object; then center their containing block element using margin: 0 auto.