How can I get border-right on my first .section div to be the same height as the other section divs, so that when a user inputs more content, they both stay the same height.
To help illustrate this, I've created a picture and Jsfiddle to help you understand what I mean.
I've tried messing around with static heights, and min-height with no success as to what I want to accomplish.
Is there any better way of doing this besides the way I am currently doing it within jsfiddle? Any help is greatly appreciated.
For the sections.. rather than display: inline-block; use display: table-cell;
Updated fiddle
May not function properly with older version of Internet Explorer.
Related
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.
I've held onto this question for quite some time now; why does the padding of an element go beyond the boundaries of a div even with box-sizing: border-box;? This happens even when the div doesn't have a specified height, but a height: inherit; or height: 100%; property. It's a bit hard to explain, so please see the example beneath.
Click here for the example.
As you can see in the example above, even with the container having height: 100%;, it somehow doesn't stretch entirely out to the very bottom edge of the button. Why is this happening, and is it possible to make it stretch to the very edge of an element with padding?
I hope this was understandable, I couldn't find any other words to explain the issue through. If there are any quarrels or confusion, please let me know! I will try to help and clear them up to be the best of my ability.
As many users have commented, the solution to this matter is to add display: inline-block; or display: block; to the inline element. All credit to those who have helped. Thank you. Closing this matter now.
I'm coding this site http://www.allrecht.nl/new , and running into the following issue: on the right side of the entire site is a space of about 40px - i cant figure out where its coming from .. can anyone help me with this?
It happended after i changed the width and margin of the #pricing and #container (so the table would be centered in the middle of the DIV). I've tried to adjust the body padding/margin but that doesnt do the trick. I didnt try to reverse the margin/width i adjusted on both DIV's bc i need them to be centered - so if you guys have a solution so the pricing table is still centered and also there is no spacing on the right side of the website, i'd love to hear it :D
Add box-sizing: border-box; to your #footer in css. You should use that as a global rule, so the blocks are not affected by padding. Use this link for explanation and examples! http://www.w3schools.com/css/css3_box-sizing.asp
thank you Dinca!! I also added a ';' after the padding in the #footer - together it works now :) Thanks a lot!
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 use some DIV to create blocks with data inside.
I've set them to "inline-block" because I want the div to adjust his width to the content.
IE8 adjust his width to my content but I have a weird problem.
If you go to this fiddle : http://jsfiddle.net/GvMW8/ and click to the first or second link, you can see that divs are overlapping.
If you go to this fiddle : http://jsfiddle.net/hhpRP/1/ and do the same operation, it works!
The only difference between these two fiddles are the 'id' attribute of the main divs.
I don't understand why I have this problem, but can you tell me how to make it works with the inline-block display AND a div id?
Thanks for your help!
Looks like a little IE8 bug.
Check out http://jsfiddle.net/willemvb/fjqUc/
I added an extra class for the div around bigBlock and made it display: inline-block.
I also shortened your javascript.
This seemed enough to make IE8 listen :)