[ Screenshot ]
I have two HTML elements, one of them (the black one) is the parent of the other (the one marked with red line). The size of the child is clearly not bigger than its parent. However, its very big border is making it overflow out of its parent element, the overflow direction is to the right and bottom of the parent. Can I make it overflow to the left and top too? That'll make it appear nicer than it's currently. I've read every single CSS property and didn't find anything to control that behavior.
<div style="width: 426px; height: 611px; position: relative; background-color: black;">
<div style="position: absolute; width: 400px; height: 317px; top: 85px; left: 0px; display: block; border: 60px solid red;"></div>
</div>
I don't want to make it in the center, because it has a custom position.
JS Fiddle: http://jsfiddle.net/Ng3Pu/
you need to use CSS3
Box-sizing: Border-box;
but check the compatibility support
Related
I have the following code:
<div style="width: 100px;
overflow: hidden;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>
(XHTML 1.0 transitional)
What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding.
Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?
What I get is the first div in the following image, what i want is something like the 2nd div:
image
I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.
I just changed my CSS from:
padding: 20px;
overflow: hidden;
to
padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);
Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.
Unfortunately, in your case this won't work so well, as you need a real border on the div.
Your best bet is to use a wrapping div and set the padding on that.
I had a similar problem that I solved by using clip instead of overflow. This allows you to specify the rectangular dimensions of the visible area of your div (W3C Recommendation). In this case, you should specify only the area within the padding to be visible.
This may not be a perfect solution for this exact case: as the div's border is outside the clipping area, that will become invisible too. I got around that by adding a wrapper div and setting the border on that, but since the inner div must be absolutely positioned for clip to apply, you would need to know and specify the height on the wrapper div.
<div style="border: 1px solid red;
height: 40px;">
<div style="position: absolute;
width: 100px;
background-color: #c0c0c0;
padding-right: 20px;
clip: rect(auto, 80px, auto, auto);">
2222222222222222222222111111111111111111111111113333333333333333333</div>
</div>
Wrap the div and apply padding to the parent
.c1 {
width: 200px;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 50px;
}
.c1 > .c1-inner {
overflow: hidden;
}
<div class="c1">
<div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
</div>
</div>
If you have a right-adjacent element to the one in question, put padding on its left. That way the content from the left element will flow up to but not past its margin, and the left padding on the right-adjacent element will create the desired separation. You can use this trick for a series of horizontal elements which may have content that needs to be cut off because it is too long.
I've a long table that needs horizantal scroll. On it's last column I've buttons that show absolute positioned tooltips on hover. When the table itself doesn't initially create scrollbar, hovering the button, and showing it's tooltip, does.
<div style="width: 400px; height: 200px; border: 1px solid red; padding: 20px; overflow-x: auto">
<div style="background-color: red; width: 100%; height: 100%; position: relative">
My table that needs a scrolling parent div, but often times fits into the screen while it's buttons are not on hover
<div style="position: absolute; width: 100px; height: 100px; background-color: green; top: 50px; left: 350px">
My table button's tooltip that appear on hover.
</div>
</div>
</div>
In the above example. It makes sense for overflow-x to do it's thing and show the absolute element for visibilty. But it doesn't make sense, when I think that an absolute element is out of normal flow therefore overflow shouldn't take account of it.
Without going down the road of toggling overflow-x visible and scroll based on the table's width, What can I do in my case? Is there any CSS solutions for an absolute element to be not accountable in an overflow scroll?
Remove left: 350px; and add right: 0;
I have seen the layout similar to the image below used on some sites before and I really like the design but don't exactly know how to implement the overlapping image (Profile Image). I am using bootstrap if that helps. Any ideas?
Thanks!
I can see three ways to do this generally.
position: absolute
You could give the image or the image's wrapper the attribute of position:absolute and giving its container (in your example the green box) position:relative. Then you would apply top: -100px or whatever and a left attribute of left: 100px or whatever. This gives the effect of the image being out of flow, aligned to the left and offset by 100px, and 100px offset from the top of the green container. The disadvantage of this approach would be that any body content in your green container could appear under the image.
position: relative
This is the same approach as the first one with the exception of how the image flows in the document. Instead of giving the image position:absolute, you would give it position:relative. Relative works differently from absolute. instead of being x and y coordinates of the parent container, it's just shifted by however much you give as a value for top and left. So in this case, you would apply top:-100px and just leave the other directional values as default. this would shift your element by that amount but also leave its original spot in the document flow. As such you end up with a gap below the image that other content will flow around.
negative margin
I honestly would prefer this method in your case. In this method, you can give the image a negative margin (e.g. margin-top:-100px). This will offset the image, collapse the area below the image, and it will still retain some of its flow in the document. This means that the content of the green container will flow around the image but only around the part that is still inside the container. It won't have a ghost area that content flows around like with relative positioning, but it also doesn't entirely take the image out of flow like absolute positioning. One thing to keep in mind, however, is that if you try to use overflow of any kind other than the initial value, it will cause undesirable effects to your image.
Demo
Here's a quick little demo demonstrating all three methods in a simple use case: http://jsfiddle.net/jmarikle/2w4wqfxs/1
The profile image can be set with position: absolute; top: 20px; left: 20px, or something like that to keep in from taking up space in the flow of the page.
make the html element that holds the header image "position:relative". Then put the header image and the profile image in that element. then make the profile image "position:absolute" and utilize "top: XXpx" depending on how far you want it from the top of the header element. Same for "left".
see fiddle here
<div class="header">
<img src="" alt="my image" class="floatdown">
this is my header, image could go here too
</div>
<div class="body">
this is my body content
</div>
.header {
position: relative;
width: 100%;
height: 150px;
border: 2px solid #000;
text-align: right;
}
.body {
position: relative;
width: 100%;
border: 2px solid #000;
height: 500px;
text-align: right;
}
img {
width: 90px;
height: 90px;
border: 2px solid #ddd;
}
.floatdown {
position: absolute;
top: 100px;
left: 20px;
}
You can use the float property on your profile image to take it out of the "flow" of the document, and play with the margins to place it properly.
CSS :
#profile-image{
width: 100px;
height: 100px;
float: left;
margin: 100px;
}
The marginis used to push it down and place it properly.
You can see an example of this in a Fiddle : http://jsfiddle.net/y706d77a/
I wouldn't recommand using position: absolute as you can get very strange results with different resolutions. I would only use that as a last resort.
This can be done many ways.
Anytime you see something like that on the web you can just use your inspector or firebug and see how they are doing it to get some ideas.
It wouldn't hurt to do some research on the web about CSS positioning.
http://www.w3schools.com/css/css_positioning.asp
Another great site.
http://css-tricks.com/
I just finished it.
Here is a codepen link:
http://codepen.io/anon/pen/zxYrxE
HTML:
<div class="main-container">
<div class="header">
<p>This is the header div</p>
</div>
<div class="profile">
<p>Profile</p>
</div>
<div class="content">
<p>Some dummy content div</p>
</div>
</div>
CSS is to big to be pasted here, so just open the link.
Put the profile image in the header, make the position: absolute; and the image position: relative;, and give it a negative bottom value that's half the height of the image, and set left to position it horizontally to taste.
HTML
<header>
<img class="profile">
</header>
<div>Content</div>
CSS
header, div{
min-height: 110px;
background: darkgray;
}
header{
position: relative;
background: gray;
}
img{
position: absolute;
bottom: -50px;
left: 100px;
}
http://jsfiddle.net/dekqn84c/
I have the following code:
<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
<div style="position: relative; left: 300px; top: 45px; height: 100%; width: 100%; background-color: #FF0000;"></div>
</div>
Screenshot:
Why does the div gets pushed outside of the viewing area and hence showing the scrollbars. If you check toward the top right corner, the black area is the extension when the red div moved.
How can I edit it so the red div has the top and the left position but doesn't extend beyond the page width and height?
To actually answer the "why" of the question:
The reason you're getting scroll bars is that the relative positioned div inside of the absolute is set to 100% width and height, but ALSO is displaced (in this case, by top and left)
It is therefor assuming 100% width/height of the parent container AND displacing it, causing it to be too large.
By adding overflow:hidden, you seemingly solve this issue, but any content past that will be clipped, not actually fitting inside the dimensions you have set.
Another way to do this would be something like...
top: 10%;
left: 10%;
width:90%;
height:90%;
You could just as easily substitute top and left for padding/margin of that direction.
You can use CSS3's calc() function to set the second div's height and width to be the same as the first one's, minus the left and top offsets. This will also allow you to use position: absolute in your text, aligning it to the right:
<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
<div style="position: relative; left: 300px; top: 45px; height: calc(100% - 45px); width: calc(100% - 300px); background-color: #FF0000;">
<span style="position: absolute; right: 0; top: 50%;">TESTING THIS OUT</span>
</div>
</div>
Check the working JSFiddle. I also added a CSS reset to get rid of the body margins that the browser might add. If you want to use this reset in your HTML file, create a <style> tag inside your <head> tag, with the code that is showing in the CSS section in the JSFiddle. If you don't want to use the entire reset, the only actually relevant part is body { margin: 0px; }, so you can also add style="margin: 0px;" to your body tag.
I have the following code:
<div style="width: 100px;
overflow: hidden;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>
(XHTML 1.0 transitional)
What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding.
Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?
What I get is the first div in the following image, what i want is something like the 2nd div:
image
I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.
I just changed my CSS from:
padding: 20px;
overflow: hidden;
to
padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);
Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.
Unfortunately, in your case this won't work so well, as you need a real border on the div.
Your best bet is to use a wrapping div and set the padding on that.
I had a similar problem that I solved by using clip instead of overflow. This allows you to specify the rectangular dimensions of the visible area of your div (W3C Recommendation). In this case, you should specify only the area within the padding to be visible.
This may not be a perfect solution for this exact case: as the div's border is outside the clipping area, that will become invisible too. I got around that by adding a wrapper div and setting the border on that, but since the inner div must be absolutely positioned for clip to apply, you would need to know and specify the height on the wrapper div.
<div style="border: 1px solid red;
height: 40px;">
<div style="position: absolute;
width: 100px;
background-color: #c0c0c0;
padding-right: 20px;
clip: rect(auto, 80px, auto, auto);">
2222222222222222222222111111111111111111111111113333333333333333333</div>
</div>
Wrap the div and apply padding to the parent
.c1 {
width: 200px;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 50px;
}
.c1 > .c1-inner {
overflow: hidden;
}
<div class="c1">
<div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
</div>
</div>
If you have a right-adjacent element to the one in question, put padding on its left. That way the content from the left element will flow up to but not past its margin, and the left padding on the right-adjacent element will create the desired separation. You can use this trick for a series of horizontal elements which may have content that needs to be cut off because it is too long.