I've written a code to place two images side by side and show some text on hover, but I came across a weird behavior I can't explain and I was wondering if anyone can explain it to me.
Everything works fine with the code, but as soon as I add borders to the .project-tile class, to add borders around the image, both images collapse to the center.
I have tried to isolate the problem but I can't really figure it out, anyone has any idea?
codepen: https://codepen.io/pafestivo/pen/JjvNMmJ?editors=1100
This has to do with the css box-sizing property. By default, the value of box-sizing is content-box, which means the border is not constrained by the width: 400px; and instead causes the divs to overflow their width and trigger wrapping.
Setting box-sizing: border-box; on .project-tile will allow you to add borders while keeping the current positioning.
Related
I1m currently working on a personal website but I have no experience with web development so I got stuck at a functionality that probably has a very simple solution. I have many of this div on my page and I just wanted the greyed background to:
Expand just a few pixels beyond the content of the div
Have rounded borders
I'm currently using
background-color: #ffffffab;
background-clip: content-box
to get the results shown, but either I paint ALL of the div, which is not what I intend to do or I leave it as it is shown in the picture. When using "border-radius" I have to increase to huge numbers like 80% to get rounded edges, and even so it cuts some part of the text. Is there an easy way to do what I'm trying to do? I'm also including this picture with the margins (orange) and padding (green).
Thanks!
Following #tacoshy suggestion:
I added more margin to the top and bottom of the container and increased the padding on the sides, this way I wouldn't need to use the content-box function: margin: 2em auto 2em; padding: 2em.
That solved it.
Thanks!
so lately I came up with this problem: My wrapper has a max-width of 1440px and I want to add a 10px solid border around it. When I add it the border just takes 10px of the max-width and is being displayed, everything's fine. But I want that the border does not take anything of the max-width, I want to display the 10px of the border by 1440px +
One solution would be media queries, I know that, and this also works fine. I am just wondering if there is a solution without adding a seperate wrapper and without media queries so the border just appears, when you resize your window over the 1440px and simply is cut off when you resize the window under 1440px.
Just for anybody who is wondering. I have a boxed layout and want to limit the content area for larger screens, but whish to use full-width on smaller screens.
Thanks! :-)
You could possibly add a position relative to the container and have a z-index set. Then have a pseudo item like :before have position absolute and a negative z-index with the height and width set to match the parent. This will put it behind your content and if you have the border added to it you should be set. Probably will need overflow-x:hidden on the body so it doesn't create a scroll bar. I'll create the code for this soon for reference.
Or a less complex option would be
outline:10px solid blue;
Outline goes outside of an element even with box-sizing of border-box.
This did it, the next thing I see is how to get a border-radius with the outline. I remember a trick with box-shadow. I will search for it, since the original question wis solved. Thank you very much! :)
I have an issue with the border-radius of div container2 for the links list with the resolutions at the top of the page like 240x320 etc. Its going around everything instead of just left-column2 and right-column2. Container2 is used a second time in the code without issue so i don't understand it.
At first i thought it was a problem with a closing tag but checked the code and everything is fine.
Heres my fiddle. Hopefully someone knows whats going on with it.
Maybe it has to do with the box-model . width + padding.
To include padding into width and use width:100% on child , you can switch the box model with box-sizing: DEMO
.container1,
.container2 {
box-sizing:border-box;/* add prefixed rules if needed */
}
SEE: W3C
It was pointed out that i had mistaken an open div for a closed div. Thats why i was having issues with the border.
I have a big absolute div that holds a smaller relative div. The smaller div wraps an Image (png) and auto sizes with height:auto. All works fine. But on one particular site, I get 5px of extra spacing at the bottom of the smaller div after the resize, like it over calculated the height needed? I assume I'm somehow inheriting something from the site that is impacting my resize and div container.
I reworked everything, clear floats, overflow, alternate positioning, removed auto option, flow, etc, but I can't seem to get rid of that 5px extra at the bottom, and its only on that site?
My question - how do you debug your height or auto height issues, and any idea what could be causing this?
Thanx,
Chris
on the container div:
line-height: 0px; will eliminate any height increase caused by white space.
padding: 0px; will eliminate an padding along the inside of the container div.
on the image
margin: 0px will eliminate any space added around the outside of the image.
Could you point us to the site or a jsfiddle so we can get a better idea of what's going on?
As #RyanMcDonough mentioned, Chrome's Inspector is awesome. In IE, you have the IE developer toolbar. In FF you can use Firebug (which is a classic!).
Try
font-size:0;
line-height:0
for smaller div
Example http://jsfiddle.net/U9z5K/14/
Or use
display:block;
for an image
I'd use something like Chrome's Inspect Element, and have a look at the css rules that are affecting it.
You can then go through all the elements and enable/disable on the fly to see what is affecting it.
https://developers.google.com/chrome-developer-tools/
I have defined a fieldset in HTML, and applied the following (simple) CSS rules to it:
fieldset
{
margin: 2em 0;
position:relative;
padding: 1em;
border:1px solid #ccc;
}
Everything is great, no big deal, except in all versions (well, up to 7 as far as I know) of IE the top border -- but not, interestingly, the bottom border -- of the fieldset visually extends too far to the right by about 25px, beyond where the vertical border is on that side.
It is worth noting that this element's width causes it to be outside its parent element width-wise to the right, when viewed in Firebug for example.
What is causing this problem in IE? Is this a known issue, and, if so, what is the fix / hack / workaround?
I've struggled with this one for some time; tonight I finally found the answer.
http://www.sitepoint.com/forums/showthread.php?t=526881
To quote NatalieMac:
Seems that if you have an element inside the fieldset that's overflowing
to the right of the fieldset, it extends the top border. I had a
container set to a width of 100% with no padding or margins which IE7
thought was overflowing for some reason (even though the content inside
this container was right-aligned and viewable within the border of the
fieldset).
I was able to fix it just by adding overflow:hidden to the fieldset.
I can confirm that this does indeed fix the issue for me as well.
Could you post more of your code, like the HTML of what's surrounding the fieldset and the corresponding CSS rules for that?
You mentioned that you can see it's wider than its parent element in Firebug. That's almost certainly related. Can you change the CSS of the parent element to make it wide enough to contain the fieldset?
Without a little more context, it's probably going to be tough to diagnose this more accurately...