Basically I've got a wrapper to which I've added the (relevant) css properties:
height: 100%; float: left; margin: 10px 10px; position: relative;
with a nested div styled as
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
with display: block; taking effect on hover of the parent, targeting the nested div.
The issue is that when it's hovered, the nested div overlaps the parent by about 4-5px. I can completely eliminate this issue by stating a set height on the parent element, but I would rather keep the height at 100% if possible!
JSFiddle:
http://jsfiddle.net/Trblestrife/Y9ztq/1/
EDIT If you know what's wrong but can't be bothered answering give me a hint and I'll do more research. I'm asking here because I've run out of ideas as to where to look
Thanks very much
The issue is probably that images, because they are inline elements, can add trailing whitespace at the bottom. Generally a fix is to give their parent element a line-height of nothing:
.featured-projectwrap{
line-height:0;
}
But this would mean any text nested would not be visible, so compensate by re-promoting the line-height at the caption level:
.caption{
line-height:1;
}
Here's your fiddle with the changes...
Related
Please take a look at the attached image, it makes it easier to understand.
In general the question is just how to absolute position an element left:100% while making it appear a bit less than 100%. Margin doesn't seem to work in absolute positioning.
I created a resizeble element with jQuery, and there is a right 'bullet' for the user to resize the element. I don't want to bullet to be on top of the container's border, so I set its position to absolute, and left: 98%.
Problem is - resizing the element takes the bullet to the left or right of the container's end, depending on its size (because the position of the bullet is set in percentages). Only 'solution' is to set its 'left' to 100%, but then the bullet is on top of the div. Adding a non breaking space after the bullet also didn't work since I had to set the left to 98% to contain both the bullet and the space.
What do you think? Is there a simple solution I didn't come up with?
Thanks in advance,
OmerImage
Edit: Jila here offered a simple solution of using calc:
#myContainer {
position: relative;
display: inline-block;
box-sizing: border-box;
}
#bullet-right {
position: absolute;
left: calc(100% - 16px);
margin-right: 10px;
top: 40%;
color: blue;
z-index: 5;
}
I tried 100% - 10px without the calc before and it didn't work obviously
Hope it can help others and thanks Jila
left only works on a positioned element. That is to say, any element that does not have the default static positioning. In addition to this, you should never set left: 98%; you should set right: 2% to prevent any confusion.
If you want to set a left offset on a dynamic element, you're looking for margin-left.
This can be seen in the following:
.container {
border: 1px solid black;
padding: 20px;
}
.text {
border: 1px solid black;
margin-left: 5%;
padding: 5px;
display: inline-block;
width: 85%;
}
input {
margin-left: 2.5%;
}
<div class="container">
<input type="radio">
<div class="text">Text</div>
</div>
how to absolute position an element left:100% while making it appear a bit less than 100%.
Don't use left: 98%;. Use right: --;. Since, as you state, percentages are dynamic, decide on a fixed value for the element offset. For example if you choose 10px the element on the right would be right: 10px and the element on the left would be left: 10px;.
If you really really want to use left for the one on the right use left: calc(100%-10px);, but there's no real reason for doing that when you can use right.
So I've been told (maybe this is wrong) that if you want to overide (go beyond) the margins of a parent div simply make the child position:absolute. The problem with this is that it will overlap text that is set below that div.
Is there a way to;
Override the margins of the parent div and have that div still push down the adjacent text?
Can this be executed by not applying a margin-top: to the first block of text? This solution seems sloppy, the layout would blow up while in mobile view.
Thanks for you help / opinion on this one.
The page in question can be found here.
remove the image background for the div has the position absolute and put the image as a background for the parent div with the following selector:
.entry-content {
padding: 0 40px 40px;
background: url('http://www.gridviper.com/phelan/wp-content/uploads/back-blue-top4.jpg') no-repeat;
background-size: 100% 219px;
}
and change the absolute div css to be as the following:
.content-masthead {
max-width: 100%;
min-height: 219px;
position: relative;
left: 0;
right: 0;
margin-left: 0px;
padding-left: 0px;
}
Few hinds to help you fixing this:
This this not the parent, but the first positioned ancestor (with position other than null, can be "relative").
You can define the size of this element in percentage relative to this ancestor.
You can use padding instead of margin to keep the space.
I know this title is probably about the most common on SO, but I seem to have a very specific problem that I can't find documented.
I have a div that I want to be exactly square, so I followed the CSS advice in this answer. I also want a child div to fill this space, so I've followed all the standard guidelines of having a clear:both div in a wrapper, etc, but my child div is still not filling its parent. The problem is the height: 0 of the parent div - is there a solution to this but still maintaining the exact square (preferably pure CSS, I'm aware there are JS solutions). Example of this is at this fiddle.
You can give the inner box an absolute position and set it to conform to the edges of the containing box:
.box div {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid black;
display: block;
background-color: rgba(0,0,0,0.1);
}
jsfiddle
Not sure if it's any better to what you proposed, maybe if you wanted content in the box?
If you're not too worried about support then using vh, vw, or vmin would be a good alternative. Since height would actually be set you could easily set the child element to fill the parent.
CSS:
.parent {
width: 50vmin;
height: 50vmin;
background-color: blue;
margin: 0 auto;
}
.child {
width: 100%;
height: 100%;
background-color: red;
}
HTML:
<div class='parent'>
<div class='child'></div>
</div>
Here's an example. I like vmax, but it's not as well supported as vmin, vh, and vw.
This padding trick for responsive boxes work with absolute positioning.
css-padding-trick-responsive-intrinsic-ratios
So use absolute positioning for inner div.
.box {
...
position: relative;
}
.box div {
...
position: absolute;
left: 0;
top: 0;
}
Adding padding-bottom: 100% to the child div does fill the space and seems to be a fix; the updated jsfiddle reflects this
I have DIV container with relative position, and the child with absolute position.
here is my code source:
JSFIDDLE
HTML:
<div class="wrapper">
<h1>Hello</h1>
</div>
CSS
.wrapper {
background: red;
width: 100px;
height: 100px;
position: relative;
}
.wrapper h1 {
color: #333;
position: absolute;
top: 60px;
}
when I put in top 60px, the child element jump to the bottom , normally the container has a relative position so the child element should be under the container not over the container.
Please, someone can explain me why this happen ?
I hope I explained, well my question.
When you have an element with position: absolute that element is placed relatively to its closest positioned parent. A positioned element is any element with position different from static, be it relative, absolute or fixed.
In your case you have a .wrapper with position: relative and h1 inside it with position: absolute, that is why the latter is positioned 60 pixels from the top of its parent.
If you insist of the child element being below the parent, add z-index: -1 to it - http://jsfiddle.net/jt92sedr/4/
This property applies only to positioned elements.
You can check: http://www.barelyfitz.com/screencast/html-training/css/positioning/
The CSS is actually doing what you think (sort of), but there is also (in Firefox, at least) a 21 pixel top margin which pushes the "text" down a bit farther.
Add a rule to remove the top margin:
.wrapper h1 {
color: #333;
position: absolute;
margin-top: 0; /* added this */
top: 60px;
}
Try adding "margin:0; to the h1 element:
.wrapper h1 {
color: #333;
position: absolute;
top: 60px;
margin:0;
display:block;}
Its the other way around, Relative always means relative to the parent. if you want to the child to be set in relation to parent, then make it relative.
the relative in your case on parent does not mean anything.
Are you wondering why 60px from top of the div looks like 80px or 90 px? If this is your question, answer is easy. Browsers add some margin to h1, div and body elements. Simply clear that efect:
body, div, h1 {
margin: 0;
padding: 0;
}
http://jsfiddle.net/14sLb8jg/
Modern browsers, like Chrome and Firefox, are putting a 0.67em margin on top and bottom of h1 tags.
In your case declaring a margin 0 for .wrapper h1 will solve your problem.
Your code should be:
.wrapper {
background: red;
width: 100px;
height: 100px;
position: relative;
}
.wrapper h1 {
color: #333;
position: absolute;
top: 60px;
margin: 0;
}
If you are in doubt, use your browser's inspection / developer tools to find out what default stylings the browser is giving into any given element so you know which one you need to override.
Jsfiddle Example
View on Jsfiddle
In image above you can footer top border is not aligned with the login box.I want to restrict border width equal to login container width.
and also I dont want x axis to scroll as in image.
To solve overflow issue I used,
html {
overflow:hidden !important;
}
But it does not seems promising to me,
I want something like this ,
footer top border should be aligned with red lines
Fiddle
You are using position: absolute; so you need to use left: 0; for the .google-footer-bar
Demo
.google-footer-bar {
position: absolute;
bottom: 0;
left: 0; /* Add this here */
height: 35px;
width: 100%;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
Also, it will be better if you wrap up the elements, say a maximum 1000px in width and than use margin: auto; to center them, having no wrapper element will just spoil your layout. As far as 100% width element goes, you can use width: 100%; for the container and then nest 1000px; of another child element with margin: auto;, this way your layout will be stable.
You might want to start by removing width and min-width and also height and min-height.