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.
Related
I'm having a frustrating time with HTML and CSS.
Basically, I'm trying to make a website with a layout like
Problem is, the div on the left has a massive margin, which displaces the canvas and makes happen.
I've tried all kinds of solutions of which here are some, with the problems they caused:
Setting the div's display to inline block. This made the div dissapear entirely for some reason, and made it's contents appear to the right of the canvas. (At least it moved the canvas up). I have to point out that the contents weren't actually visible. Ctrl+Shift+I said they were there`.
Changing the div to an inline component (span). Made no difference.
I tried margin: 0px;. This didn't change it at all. margin-left and margin-right to auto just centred the div and didn't move the canvas.
I tried setting manual width/height values for the div. No difference.
There are some solutions that I think are likely to work, but I am reluctant to try them.
I could make a table and add the elements into it, but I heard this is bad practice and would like to avoid it.
I could maually set the positions, but I fear that they might change across devices and resolutions.
I'm at a bit of a loss what to do. I am a beginner at HTML and layouting in general, so please excuse me if it's something really obvious I'm missing.
Thanks for any help.
It's not really "shrinking" you're after. But since I don't know what you're calling your divs and canvas, I'll give you the general solution.
-> https://www.w3schools.com/css/css_float.asp
So basically try adding this:
div, canvas {
float: left;
}
Assuming your div and canvas is a <div></div> and <canvas></canvas>, and that you haven't added a position: fixed; or position: absolute; to any of them.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am trying to build up a responsive image gallery by following w3schools tutorials. Everything seems to working very fine except one serious issue. I googled a lot but couldn't find any silver bullet solution to fix it. I'm posting a screenshot to make your better understand about my issue. Here's a look:
It's very much obvious what's the real problem. Right. So what should we do? Should we have to give a min-height for every div? The text comes dynamically from the database and sometimes it is mandatory to display complete text without trimming it.
Note:
Using min-height causes one another problem. When we resize the browser to tab width then it creates a lot of blank space between div rows.
You've not post a code, so I can offer you a flexbox solution.
Here's a Fiddle.
These flexible boxes will stretch according to the text and they will fit the parent container, regardless of the text inside. I hope it will help you. Flexbox is a layout system which is very powerful and easy to learn, and it is mobile ready.
.flex-container {
display: -webkit-flex;
display: flex;
width: 500px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
flex-basis: 200px;
margin: 10px;
}
.img {
width: 200px;
max-width: 100%;
height: auto;
}
In case that (almost) full and guaranteed support for the latest IE versions is required (or you want a fallback of some sort), and you do not wish to use JavaScript, there's also the option of using text-align: center on container and on image wrappers display: inline-block as well as vertical-align: top.
The text-align: center isn't actually required, but it will center the image wrappers (containers of image and image text).
This will still leave some white space beneath the image wrappers but each image will start on the same line, so to speak.
You can see a fiddle here, based on the layout of #Julsy : the fiddle
Note:
This solution does have a slight downside regarding white space due to the inline-block elements. This means that sometimes setting two inline-block elements to 50% width each will make them jump to each separate line. However I've used this solution in several applications by simply setting the width to 49% e.g. In many cases the difference isn't noticable at all, and given the white space between the elements they often are aligned properly (in my opinion). The white space can even make up for some of the spacing between the elements such as margin.
The white space stems from the actual spaces in the text of your HTML document.
You can read a bit about the phenomenon of these white spaces here. It seems that it's not really an error, but just the way the browser works.
The prettiest solution in my opinion surely is the one #Julsy suggests (the flexbox method).
As to why your own code isn't working is due to the float. When one of the elements is lower (lower height) than the other, the element following it will "float" underneath it. I think that the logic behind this can be thought of as the following (correct me if i'm wrong): if you view the containing element is a set of "text lines" (as in a regular book or text in here) with a reading direction from left to right, the element with float:left will attempt to get as close to the upper-left corner as possible (which is where you start reading from). In this case, the closest place to the upper-left corner is beneath the lower element as this is on a "line" above the bottom of the highest element.
I hope it makes sense :-)
As you already wrote, a min-height is the best method to make those floated boxes be the same height and still have the "emergeny option" to expand them if there is more content.
Add display: flex to the parent element. For more info about flexbox.
i tried to do the same with only css, but i got tired, maybe u can use javascript to fit these kind of stuff with different heights, because these needs to be calculated, i use this: http://masonry.desandro.com/ basically this convert every element with position absolute and give it top and left positions from prevs/next elements, for example
the first (size 100x200) will got left 0 and top 0,
the second (size 100x400) will got left 100 and top 0,
the third (size 100x200) will got left 0 and top 200,
the four (size 100x200) will got left 100 and top 400)
and continues...
My problem is hard to explain (especially when knowledge of English is at the primary level)
My test site: ----
On page is over than html code, you can see scroll to right. (On small resolution)
Picture of this: http://i.imgur.com/arCoPt7.png
How to fix that problem ?
If, something is not clear, and somebody don't understand my problem please ask.
(I am not giving CSS becouse is too much of code, so everything is in source code of website)
Sorry for my bad English...
your problem is the class statystyki inside the class menu.
in your p element you have width:100% and float left and the other elements right.
So you exceed the total width of 100%.
Try to make a width that dont exceed the 100% and also is best if you clear the floats.
Remove the extra margins and check all the divs width.
or simply add
this style to your body.
body {
width: 100%;
overflow: hidden;
}
http://haleem.itspiders.net/
I've never actually learned HTML or CSS properly, all of my knowledge comes from internet surfing and generally playing about with it. So i wanted to finally get some thing cleared up.
Firstly in my current 'messing about', i have a main div but that div will not sit at the very top of the page! It's at least 5 pixels from the top. I don't get it! I solved it once but i can't remember. There is an image of what i mean here: http://puu.sh/6jQUF.jpg
Here is the code:
HTML
<body>
<div id="Main">
This is a test.
</div>
</body>
</html>
CSS
#Main {
margin-right: auto;
margin-left: auto;
width: 900px;
height: 1200px;
outline: black solid thin;
padding: 20px;
top: 0px;
}
I'm sure it just something simple, i apologies for that.
Now another thing i have never understood is that in CSS can two divs sit beside each other, ie one has the float left property and the other float right thus pushing against each other and sitting beside each other, whenever i try this they end up ignoring the fact they are running into each other and both go to the left and right sides of the page.
I really hope i don't sound like an idiot I'm sure this is possible.
Lastly on the topic
If i have a main container how can i divs to stay in that container? I have tried this just by placing the div within in the container but that doesn't work.
Somebody please explain this, I would really appreciate that.
Thanks
The body has a default margin. Clear it with:
body {
margin:0;
}
jsFiddle example
If you want two divs to sit next to each other, either float them both left or both right, or make then inline, or inline-block elements.
I can't answer your question of "Lastly on the topic If i have a main container how can i divs to stay in that container? I have tried this just by placing the div within in the container but that doesn't work." as it makes no sense without code.
This happen because for default all elements has properties. In this case the tag body has some margin.
To avoid this kind of issues you can use a general Reset for this properties like this one Reset or the most basic reset:
* {
margin:0;
padding:0;
border:0;
}
Here the * helps to found all the elements on the DOM and set those properties to 0.
Try to keep one question per post. For your second issue I recommend to investigate the property display:inline-block and This Link to Clarify Floats
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.