Please check this example: http://jsfiddle.net/fFSZN/2/
You see how part of the img gets out of the div because of the border. The current width of the div (300px) is just set for the example, for real it would be 100% (so I can't hardcode values). My question is how to fit the image and its border into the div with CSS only?
You need to use box-sizing: border-box to make this work. Also, note how I set the image to max out at 100% of the containing element's width, while putting the height on auto to maintain proper aspect ratio.
http://jsfiddle.net/fFSZN/6/
More info on border-box from Paul Irish: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
First, for it to be a fluid image, give it max-width: 100%.
Then, instead of a 5px border on the image, give the containing div 5px padding and a black background.
div {
width:300px;
border:1px solid red;
padding:5px;
background: #000;
}
img {
max-width:100%;
display:block;
}
Demo
Remove the black border around the image. The border on the left side added extra space so it went out of the div's boundaries.
img { width:100%; display:block; }
Here's the updated jsfiddle: http://jsfiddle.net/fFSZN/4/
Related
I have two divs, the parent that has rounded corners, overflow:hidden and an inline background image, and a child div that is position:absolute with a background color and opacity.
At my normal screen size, the child DIV pretty much fills the parent DIV, but I can just make out a slight line of the parent DIV on the corners.
The bigger issue is that when I zoom in to the page, at some screen sizes the child DIV is considerably smaller than the parent DIV, which obviously looks awful.
Here is my code:
.parent-div {
height:350px;
border-radius:4px;
overflow:hidden;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:relative;
}
.child-div {
position:absolute;
bottom:0;
left:0;
width:100%;
padding:15px;
text-align:left;
background-color:rgba(255,255,255,0.9);
}
I've googled this but can't find a solution that works. I have tried adding the border radius on the child DIV, but this doesn't work.
FYI - when not using border radius everything seems fine.
EDIT: I think I have kind of found the issue. I have another div around all of these with padding. When I get rid of this it works. When I change the padding size I can see that is causes the issue in the image above at various padding sizes.
EDIT2: Actually, I found that what was causing the issue was the overflow:hidden on the parent div. When removing this and just ensuring I had the border radius on the child div, everything worked as expected.
It's better if you provide a working fiddle, but I think that your problem is the meassure of .child-div. Try this:
.child-div {
box-sizing: border-box; /* here */
border-radius: 4px; /* to apply the same that the parent */
height: 100%; /* to make all height */
position:absolute;
bottom:0;
left:0;
width:100%;
padding:15px;
text-align:left;
background-color:rgba(255,255,255,0.9);
}
Can someone tell me why the box-sizing doesn't seem to honor the padding in the div given the following fiddle example
// The code is too long for this but can be viewed using browser debugging tools
// and here is a picture that says it all.
The left column is fixed width: 190px;
The right column is width:100% with a margin-left: 190px
The green div is a nested div without a width and height:20px;
<style>
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
Shouldn't the padding push the green line in as it is on the left side?
The problem in this instance is with the #wizard-body div, which has a left margin but also a width of 100%, which means it's way to wide for its container. The float also messes things up. Remove these and it will work as expected:
#wizard-body {
float: left;
width: 100%;
}
The green div is behaving as expected, but is following the container off screen.
box-sizing:border-box does not remove the padding. It just dont take it into account when calculating width of div.
div {width:400px; padding:10px;} will give a div with width of 420px as width also includes padding.
But
div {width:400px; padding:10px; box-sizing:border-box;} will give a div with width of 400px since it does not includes padding.
But in both cases padding remains there.
I want a border on the right hand side of a div.
I do:
<div class="span6" style="border-right: 2px solid #727272;">
the things is I'd like my border not to run to the top and bottom of the div. Maybe 5px from the top and 5px from the bottom. Or 90% of the height of the div. How do I do this?
Thanks
You can use a pseudo element to hold the border. The following would make the "border" be 90% of the height of the parent element:
http://cssdeck.com/labs/kyrvt8hf
div {
position: relative;
}
div:after {
display: block;
content: '';
position: absolute;
top: 5%;
bottom: 5%;
right: 0;
border-right: 2px solid red;
}
I could be wrong, but I don't believe there is any way to really make this happen that you would probably want to roll with. In fact, I thought of three "hacky" ways that might work, but all three can't get you to the desired state, assuming a variable height.
Assuming a fixed height, you could create a 2px wide by 90% div height image of the color you want, then set it as the background image of the div. Something like:
.span6 { background: #fff url(bgBorder.png) no-repeat right center; }
Update
A variation based on what Tyblitz said in the comments. This allows for dynamic height. I am still inclined to go with the :after option, as it keeps your DOM cleaner, but in case that is not possible:
http://jsfiddle.net/designingsean/bsbgX/1/
HTML:
<div class="span6">The content div<div class="border"></div></div>
CSS:
.span6 {
width:50%;
height:400px;
background-color:#ddd;
position:relative;
padding:10px;
}
.border {
width:2px;
background-color:#222;
position:absolute;
top:5%;
bottom:5%;
right:0;
}
Note that to make it a fixed distance (say, in pixels), just change the top and bottom from a percentage to the px you want. See http://jsfiddle.net/designingsean/bsbgX/2/ for the example.
This picture show's how border's work
You can either set margin to curtail the border or set padding to extend the border. Currently there is no option in CSS to target the border and make it bigger or smaller(not talking about width obviously). You can however use padding, margin, another div or pseudo element's to reach the desired effect.
I want to wrap an image into an html DIV and, since I want this to be fully scalable with the size of the window, I want to set the width of the DIV in percentage as follows:
html
<div id="wrapper">
<img src="http://openclipart.org/people/netalloy/rally-car.svg" />
</div>
css
#wrapper {
position: absolute;
width: 50%;
}
#wrapper img {
width: 100%;
}
The image should determine the height of its container. This is because the image width is set to 100% and the image height is calculated accordingly maintaining the correct aspect ratio.
The result is visible on jsfiddle: http://jsfiddle.net/lorenzopolidori/5BN4g/15/
My questions are:
Why do all modern browsers render the wrapper DIV 5px taller than the inner image?
How can I get rid of this 5px gap, while still setting all the sizes in percentage and without using javascript?
Surprisingly, this happens in Chrome (21.0.1180.89), Firefox (15.0.1) and IE8, while IE7 renders it correctly, matching the height of the DIV with the height of the image.
Check this out :
http://jsfiddle.net/5BN4g/29/
It's a line-height issue :-)
You need :
#wrapper {
width: 60%;
background-color: #aaa;
margin: 50px auto;
line-height:0;
}
#wrapper img {
width:100%;
border: 1px dashed red;
box-sizing:border-box;
}
I used box-sizing to make sure the width of the image doesn't overflow the container
................
Hi now add vertical-align:top in your img tag throw css
as like this
#wrapper img {
width: 100%;
border: 1px dashed red;
vertical-align:top; // add this line
}
live demo
OK, fiddling about, I found a good possible solution:
#wrapper img {
display: block;
width: 100%;
border: 1px dashed red;
}
Changing from the default inline display to a block display eliminates the line-height problem straight away.
This approach is also semantically correct because in this case what we really want is a single image wrapped in a DIV without any other elements in it, so the concept of line-height needs to be completely wiped off by displaying the image as a block.
It works on all major browsers: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/
I think you shuold set align property to force browser show correctly img tag.
<div id="wrapper">
<img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
</div>
DEMO
I think is because it doesn't see as a Table
i added the display:table in your code
And it looks fine now, check the link
Example Display Table
Your issue is that an image -- the <img> tag, to be exact -- is an inline element. All you need to do is set display: block on the image and the extra padding goes away. Demo.
Can background image extend beyond div's borders? Does overflow: visible apply to this?
No, a background can't go beyond the edge of an element.
The overflow style controls how the element reacts when the content is larger than the specified size of the element.
However, a floating element inside the div can extent outside the div, and that element could have a background. The usefulness of that is limited, though, as IE7 and earlier has a bug that causes the div to grow instead of letting the floating element show outside it.
Following up on kijin's advice, I'd like to share my solution for image offsets:
/**
* Only effective cross-browser method to offset image out of bounds of container AFAIK,
* is to set as background image on div and apply matching margin/padding offsets:
*/
#logo {
margin:-50px auto 0 auto;
padding:50px 0 0 0;
width:200px;
height:200px;
background:url(../images/logo.png) no-repeat;
}
I used this example on a simple div element <div id="logo"></div> to position my logo with a -50px vertical offset. (Note that the combined margin/padding settings ensure you don't run into collapsing margin issues.)
not possible to set a background image 'outside' it's element,
BUT YOU CAN DO what you want with using 'PSEUDO' element and make that whatever size you want and position it wherever you want.
see here :
i have set the arrow outside the span
here is the code
HTML :
<div class="tooltip">
<input class="cf_inputbox required" maxlength="150" size="30" title id="text_13" name="name" type="text"><span class="msg">dasdasda</span>
</div>
strong text
.tooltip{position:relative; float:left;}
.tooltip .msg {font-size:12px;
background-color:#fff9ea;
border:2px #e1ca82 solid;
border-radius:5px;
background-position:left;
position:absolute;
padding:4px 5px 4px 10px;
top:0%; left:104%;
z-index:9000; position:absolute; max-width:250px;clear:both;
min-width:150px;}
.tooltip .msg:before {
background:url(tool_tip.png);
background-repeat:no-repeat;
content: " ";
display: block;
height: 20px;
position: absolute;
left:-10px; top:1px;
width: 20px;
z-index: -1;
}
see here example: http://jsfiddle.net/568Zy/11/
No, the background won't extend beyond the borders. But you can stretch the border as far as you want using padding and some clever tweaking of negative margins & position.
I understand this is really really late, and I am not even sure if this is best practice but I found a little way to do this with my footer. My last section had a background image that I wanted to overflow into the footer and I fixed it with a few lines of CSS. Also added a little padding the section with the background image.
footer{
background-color: transparent!important;
top: -50px;
margin-bottom: -50px;
}
I tried using negative values for background-position but it didn't work (in firefox at least). There's not really any reason for it to. Just set the background image on one of the elements higher up in the hierarchy.
After a little bit of research: No and No :)