I hope I described it correctly when I stated "nested div".
I have an image in a div like this:
content -> content-inner -> column_left
I'm unable to make the image begin at 0 px (the very left side of the screen).
It seems I'm trapped in margin definition of the div.
The divs are defined like this (seen in Chrome Inspector):
#content {
position: relative;
left: 0px;
top: 0px;
z-index: 2;
width: 100%;
min-width: 280px;
max-width: 980px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-bottom: 0px;
}
#content-inner {
margin-left: 20px;
margin-right: 20px;
background-color: #FFF;
}
.column_left {
position: relative;
left: 0px;
top: 0px;
width: 65%;
margin-right: 5%;
float: left;
}
I created a new div like this:
.inlineimage
{
float: left;
margin-left: 0px;
margin-right: 20px;
margin-bottom: 5px;
margin-top: 3px;
}
And then I assigned it to the image within the "column-left" div:
<div class="inlineimage">
<img src="images/myimage.jpg" alt="" />
</div>
However, the image sticks to the border of the column (which is around 105 px).
How could I make the image stick to 0 px margin from the left side of the page?
Thank you.
You could position your .inlineimage container to position: relative; then position the img as
.inlineimage > img {
position: absolute;
left: 0;
top: 0;
}
This way your image sticks to the top/left
Related
There is a parent container of relative width (50%) so that it responds to the size of the screen.
Now, I want a button at the bottom right corner of this parent container which stays fixed vertically. It works with position: fixed but then when i view it on different devices, i cannot get it to be positioned horizontally.
This is my html and CSS
<div class="container">
<div class="button"></div>
</div>
.container {
position: relative;
height: 2000px;
width: 40%;
margin: 0 auto;
background: yellow;
}
.button {
height: 50px;
width: 50px;
background: red;
position: fixed;
bottom: 20px;
right: calc(50% - 190px);
}
Here is the link to codepen http://codepen.io/anon/pen/VmggdO
This looks fine but when you resize the screen horizontally, the button should stay just 30px inside of the yellow container horizontally - How do i achieve that? REMEMBER - THE BUTTON NEEDS TO STAY FIXED VERTICALLY WHEN YOU SCROLL!
Using position absolute worked for me
.button {
height: 50px;
width: 50px;
background: red;
position: absolute;
bottom: 20px;
right: 30px;
}
EDIT:
With the new requirements of "THE BUTTON NEEDS TO STAY FIXED VERTICALLY WHEN YOU SCROLL", this can be achieved by changing the html to this:
<div class="container">
</div>
<div class="button-container">
<div class="button"></div>
</div>
and the CSS to this:
.container {
position: relative;
height: 2000px;
width: 40%;
margin: 0 auto;
background: yellow;
}
.button {
height: 50px;
width: 50px;
background: red;
margin-bottom: 20px;
float: right;
margin-right: 30px;
z-index: 100;
}
.button-container{
position: fixed;
bottom: 0px;
width: 40%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
See the updated code pen: http://codepen.io/anon/pen/mOvvgJ
I have been looking this this for about a half hour, and I cannot figure out what I am doing wrong...
I have nested divs, like this:
<div id="header">
<div id="header_left"><img src="~/images/image1.png"></div>
<div id="header_right"><img src="~/images/image2.png"></div>
</div><!--End Header-->
Basically, my nested divs split the screen horizontally into two equal parts, left and right.
Image1 is a logo and takes up most of header_left
Image2 is a small image, and I am trying to get it to move to the bottom right corner of header_right.
Here is my CSS:
#header{
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
margin-left: 0px;
background-color: #000;
display: block;
overflow: hidden;
position: relative;
}
#header_left{
float: left;
width: 50%;
}
#header_right{
float: right;
height: 100%;
width: 50%;
position: absolute;
bottom: 0;
right: 0;
}
As it stands right now, image2 is in the top left hard corner of header_right, and I cannot get it to move anywhere.
Any help appreciated!!!!
That should do it. You must position the img using a separate rule, i.e. #header_right > img
#header {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
margin-left: 0px;
background-color: #000;
display: block;
overflow: hidden;
position: relative;
}
#header_left {
float: left;
width: 50%;
}
#header_right {
right: 0;
position: absolute;
bottom: 0;
}
#header_right > img {
float: right;
}
<div id="header">
<div id="header_left">
<img src="~/images/image1.png">
</div>
<div id="header_right">
<img src="~/images/image2.png">
<img src="~/images/image3.png">
</div>
</div>
<!--End Header-->
A good starting point would be to select not just the div container, but also the images as follows:
#header_left img{
float: left;
width: 50%;
}
#header_right{
float: right;
height: 100%;
width: 50%;
}
#header_right img{
position: absolute;
bottom: 0;
right: 0;
}
The site structure is as follows - there is a common unit (content), which houses all of the elements of the site and the second unit, a footer which is to be pressed against the bottom of the site.
Content block is position: absolute for aligning the center (horizontal) - to decrease the screen when it is uniformly left for right and left its borders. The problem is that with such a block structure the footer doesn't stay pressed against the bottom of the page. Here's the code :
body {
margin: 0px;
padding: 0px;
}
.a_wrapper {
width: 600px;
left: 50%;
margin-left: -300px;
position: absolute;
border: 1px dotted #000000;
}
.a {
height: 800px;
}
.b {
width: 90%;
height: 50px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
position: absolute;
border: 1px solid #000000;
}
<div class = "a_wrapper">
<div class = "a"></div>
</div>
<div class = "b">
</div>
https://jsfiddle.net/0k979ud5/
There are two things causing this - because of using only absolutely positioned elements, which takes them out of document flow, the body element itself has no height. So that would need to be set the same as the content. Then the footer is positioned according to the nearest positioned element, also because of position: absolute. It's direct parent is body which has no positioning so it will default to the window object. To solve this, body should be given position: relative :
body {
height: 800px;
position: relative;
padding: 0px;
margin: 0px;
}
.a_wrapper {
width: 600px;
left: 50%;
margin-left: -300px;
position: absolute;
border: 1px dotted #000000;
}
.a {
height: 800px;
}
.b {
width: 90%;
height: 50px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
position: absolute;
border: 1px solid #000000;
}
<div class="a_wrapper">
<div class="a"></div>
</div>
<div class="b"></div>
It the footer should be below the content, body would have to be 850 pixels high of course...
I have a problem with my site's logo. It sits in the upper left hand corner. On a lower resolutions, it looks fine. However, at larger resolutions, you can see the logo shift off to the right. How can I adjust my css to make this stationary, just to the left of the "Home" link?
<div id="header">
<div class="headerright">
<img id="logo" src="img/logo.png" alt="" />
<!-- snip -->
</div>
</div>
.headerright {
left: 140px;
position: absolute;
width: 966px;
height: 100px;
}
This should solve it!
Change .headerright to this:
.headerright {
margin-left: auto;
margin-right: auto;
width: 966px;
height: 100px;
}
and #nav to this:
#nav {
display: block;
position: absolute;
top: 10px;
left: 30px;
height: 79px;
width: 906px;
}
The container element, headerright, is declared with an absolute position and a left value of 140 pixels.
.headerright {
left: 140px;
position: absolute;
}
When you resize the window most elements will adjust to a new position except for the headerright layer (or other absolutely position elements). The headerright, which contains the logo, will always be 140 pixels to the left, causing it to be misaligned on smaller screens.
You need to centre the div. This will allow it to adjust its position as the window resizes. Remove position: absolute; left: 140px;.
.headerright {
margin: 0 auto;
width: 966px;
height: 100px;
}
Change .headerright to position: relative; and add margin: 0 auto;
See below:
.headerright {
position: relative;
margin: 0 auto;
}
Then if you want to move the logo a little bit to the left, add this to #logo:
#logo {
margin-left: -60px;
}
i created a maze and i want to center an inside div
although i center it with margin: 0 auto; it won't work
(this div shows sad smily face when user enter the wall and lose)
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
display: none;
margin: 0 auto;
}
here is the fiddle link:
http://jsfiddle.net/uqcLn/28/
If you're going to use absolute positioning you need to do it like this:
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
display: none;
}
Edit: you also need to add position:relative; to the main div. Here is an updated fiddle.
http://jsfiddle.net/FragJ/2/
It looks off because you have other elements that aren't exactly centered.
EDIT: As I stated earlier, the smiley didn't look centered because your code is off. The maze really should be inside a div itself. However I was able to eyeball center it simply by playing with the margins.
http://jsfiddle.net/FragJ/4/
To achieve this you'll need to set your css like this:
#main {
position: relative;
width: 550px;
height: 550px;
float: left;
margin-left: 220px;
margin-top: 100px;
background: grey;
overflow: hidden;
}
#highlight_win {
width: 550px;
height: 550px;
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: -180px 0 0 -180px;
}
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -180px;
display: none;
}
.outer {
height: 600px;
width: 500px;
background-color: black;
}
.inner {
height: 200px;
width: 200px;
margin: auto;
position: relative;
top: 200px;
background-color: red;
}
markup
<div class="outer">
<div class="inner">
</div>
</div>
The idea is for fixed sized block elements, setting
margin:auto;
fixes horizontal centering
for vertical central alignment the child's top = half the height of the parent - half the height of the child