Example: http://www.homeroe.com/homeroe.com/newHome/pulpaForum/test.php
Why is that the table div is going out from its container whenever I add padding?
Is there any work around for this problem?
<style>
.foroContainer {
width: 700px;
margin-left: auto;
margin-right: auto;
background: yellow;
}
.foroContainer .table{
display: table;
width: 100%;
padding: 8px;
border: 1px solid #a9a9a9;
margin-bottom: 1em;
}
.foroContainer .row{
display: table-row;
}
.foroContainer .cell{
display: table-cell;
}
#right.cell{
text-align: right;
border-top: 1px solid #a9a9a9;
}
}
</style>
<div class="foroContainer">
<div class="table">
<div class="row">
<div class="cell">asdasdasdas</div>
</div>
<div class="row">
<div id="right" class="cell">asdasdas | asdasdsad | asdasdasdas</div>
</div>
</div>
Alternatively, you could try altering the box-sizing property, either for every element on the page, or just that one container. E.g. for each element on the page, you would write:
* { box-sizing: border-box; }
This will alter the default box model that the browser uses so that width of the element is not changed, padding or not.
The hierarchy of encapsulation in CSS is:
margin - border - padding
When you are adding padding to an object you practically alter it's width.
If something is 100px in width and you add padding:10px it's width will become 120px (100 + 10 padding-left + 10 padding right)
This is the reason that your container is pushed over (it's width:100%) a good way would be another container internal to your table with width:100% but the table without width.
Related
Why does scrollbar appears when i remove display: inline-block property from link and is there any another way to avoid scrollbar from appearing
Php file -
<main>
<div class="container">
<h2>Test Your PHP Knowledge</h2>
<p>This is a multiple choice quiz to test your knowledge of PHP</p>
<ul>
<li><strong>Number of Questions : </strong>5</li>
<li><strong>Type : </strong>Multiple Choice</li>
<li><strong>Estimated Time : </strong>4 Minutes</li>
</ul>
Start Quiz
</div>
</main>
body{
font-family: arial;
font-size: 15px;
line-height: 1.6em;
}
.container{
width: 60%;
margin: 0 auto;
overflow: auto;
}
header{
border-bottom: 3px #f4f4f4 solid;
}
footer{
border-top: 3px #f4f4f4 solid;
text-align: center;
padding-top: 5px;
}
main{
padding-bottom: 20px;
height: auto;
overflow-y: auto;
}
What does below property display:inline-block does to avoid scrollbar in main area
Css File -
a.start{
display: inline-block;
color: #666;
background: #f4f4f4;
border: 1px dotted #ccc;
padding: 6px 13px;
}
You can see what happens when you give a background color to the container.
What happens here is that the padding to the <a> does not help increase the height of the container.
.container {
background:tan;
padding:1px .5em;
}
.container a {
padding:1em;
background:#eee;
border:1px solid;
}
<div class="container">
<p>Some text here</p>
<a>Some inline text here</a>
</div>
The system doesn't use the <a>'s padding for the calculations of the container's height, so the container incorporates the line height of the a, but not the bottom padding.
So the <a> overflows out of the container. Its padding does not have any effect on its positioning. (You also see that the top padding of the <a> is inside the bottom margin of the <p>.)
Now if you change the <a>'s display mode to inline-block, the whole picture changes: the padding does count; the container does grow to encompass its padding, and its top padding is no longer intruding on the <p>'s bottom margin.
.container {
overflow:visible;
background:tan;
padding:1px .5em;
}
.container a {
display:inline-block;
padding:1em;
background:#eee;
border:1px solid;
}
<div class="container">
<p>Some text here</p>
<a>Some inline-block text here</a>
</div>
So there are a couple of solutions:
Accept that things are as they are; keep the <a> an inline-block
Remove the overflow:auto, so that the <a> bleeds out of the container. This may affect elements on the screen below the container though
Don't use padding on the <a>
Put some other, block or inline-block, element in the container after the <a>.
I have an responsive Owl Carousel (v2), each item or slide has an image and below that some text of variable length, see image below:
As can be seen, all the images are bottom aligned to the same baseline, regardless of how much text there is. I've done this by setting the text div to a fixed height. The problem is, if there were to be just one line of text, I'd have unnecessary space below the carousel.
If I allow the div to set its own height, I get this:
So my images are no longer lined up.
HTML
<div>
<img class='a4_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A4 size, this is going on to two lines
</div>
</div>
<div>
<img class='a5_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A5 size
</div>
</div>
<div>
<img class='a6_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A6 size
</div>
</div>
</div>
CSS
.owl-carousel .owl-item {
display: table-cell;
float: none;
text-align: center;
vertical-align: bottom;
border: 1px dashed grey;
height: 100%;
padding: 0px 10px;
}
.owl_diary_desc {
font-size: 19px;
border: 1px dashed red;
margin-top:10px;
}
.a4_diary_image {
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
.a5_diary_image {
max-width: 70%;
max-height: 70%;
margin-left: auto;
margin-right: auto;
}
.a6_diary_image {
max-width: 50%;
max-height: 50%;
margin-left: auto;
margin-right: auto;
}
Straight HTML and CSS won't allow you to set equal heights based off siblings. Using a little jquery this can be achieved though.
$maxDesc;
function equalize(){
$('.owl_diary_desc').each(function(i){
if ($(this).height() > $maxDesc) { $maxDesc = $(this).height();}
});
$('.owl_diary_desc').each(function(i){$(this).height($maxDesc);});
}
When I use something like this, I generally move the variable holder to the beginning of the script. Then I call the function on document ready. Sometimes I'll even call it on the window resize function. If you choose to do that, you must call an each function on your object and reset the height to auto before recalling the equalize function.
If I have a container, with several nested divs :
<div class="beat-container" id="beat-container-1">
<div id="1-1">
<div class="beat" id="beat-1-1">
I am a beat View<br>
</div>
</div>
<div id="1-2">
<div class="beat" id="beat-1-0">
I am a beat View<br>
</div>
</div>
<div id="1-3">
<div class="beat" id="beat-1-0">
I am a beat View<br>
</div>
</div>
</div>
and I use float on all but the last child, I get the functionality I need, where they are side by side. Adding float:left to the final one prevents the enclosing parent container from wrapping all the children, and it loses its height.
If I add it to all them, then try to add a :last-child it still doesn't work.
How do I get the divs to be inline, and have the parent border still wrap them.
The container height should be dynamic, so no specific height attributes or JS.
CSS:
.beat-container {
border: 1px solid orange;
padding: 5px;
margin: 5px;
}
.beat {
display: inline-block;
border: 1px solid purple;
float: left;
}
.beat :last-child {
float: none;
}
/* .beat :not(:last-child) {
display: inline-block;
border: 1px solid purple;
float: left;
} */
Fiddle
I hope I have understood your questions correctly.
You can add overflow: auto; to .beat-container then it will wrap the content.
.beat-container {
border: 1px solid orange;
padding: 5px;
margin: 5px;
overflow: auto;
}
http://fiddle.jshell.net/g3L3w/2/
If you want to use the last-child selector to target the last div with .beat you have to target the parent of .beat as all .beat are both first-child and last-child of the parent in your current structure.
e.g. .beat-container > div:last-child > .beat
You can go with a less qualified selector for your example but in a bigger context it would probably be what you want.
http://fiddle.jshell.net/g3L3w/4/
I want box width and height to include all of the content, padding, border width, and margin by default. Is there a way to do this? Especially, I want to be able to specify something like width: 100% including everything up to the margin.
This is a vague question, but I'll answer the best I can.
Margin, by definition, is the area around the outside of your box; meaning there's no way to include margins inside of your div.
If you would like more padding on the inside of your box, but you don't want the box to resize, then use: box-sizing:content-box;
Or if you would like to include padding and the border, use: box-sizing:border-box;
A workable solution that preserves the size of your divs and removes overflow would look something like this:
#parent{
box-sizing:border-box;
width:100%;
height:200px;
padding:2em;
}
#child{
box-sizing:border-box;
width:100%;
height:100%;
padding:1em;
}
<div id="parent">
<div id="child"></div>
</div>
Just place the div you want to give margins to inside of another div that has padding. Thus creating faux margins.
if your margin is for example 10px you can use
width: calc(100% - 20px);
box-sizing: border-box;
browser support
w3schools.com reference
Set the CSS box-sizing property to border-box to make width and height include the content, border, and padding. This allows you to set width: 100% and still add padding or border. In other words box-sizing: border-box makes width include everything between the inner edges of the margin. There is no way to include the margin itself in such a way.
.example { box-sizing: border-box; width: 100%; padding: 10px }
Useful references
CSS Box Model visualization
CSS3 UI: box-sizing property
* { box-sizing: border-box } FTW
Maybe wrap another div around it and specified that div's width?
<div style="width: 100px; border: 1px solid blue;">
<div style="width: 100px; background:yellow; margin: 10px; border: 1px solid blue">
inner width 100px not including it's margin.
</div>
</div>
<div style="width: 100px; border: 1px solid blue">
<div style="background:yellow; margin: 10px; border: 1px solid blue">
inner width's 100px including it's margin.
</div>
</div>
Use display: flex; for the parent tag.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
border: 1px solid black;
width: 100%;
overflow: auto;
box-sizing: border-box;
display: flex; /* it can put children in one line */
}
.left {
border: 1px solid black;
width: 20%;
float: left;
box-sizing: border-box
}
.right {
border: 1px solid black;
width: 80%;
margin: 0 10px;
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="center">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
I'm sure this has been asked before but I'd really like to know why this is doing what's it's doing rather than just the answer (if there is one).
What I've got is a pretty simple layout at the moment, which consists of a main wrapper div, a header div, a content div and a footer div. The problem I'm having is when I come to place a number of squares within the content div and set their positioning to absolute - so as to lay them out in a grid so that they span the entire width of the content div. When I set these divs to absolute the footer div jumps up and does not appear below the grid of divs sitting in their parent content div. If I set the height of the content div to a value the footer div sits where it should, but if I don't or set it to auto (as I want to do) then the footer div sits effectively below the content div.
I have read that setting anything to absolute takes it out of the normal flow of the document, but is there anyway I can set the content div so that the height of the content div is set by the contents (ie the grid of divs) and also so that the footer div always sits below the content div?
Here is a mock up http://jsfiddle.net/M4jyH/3/
And here is my code
#wrapper {
width: 400px;
height: auto;
border: 1px solid #000;
margin: 10px auto;
padding: 10px;
}
#header {
width: 100%;
height: 50px;
border: 1px solid #000;
}
#content {
position: relative;
width: 100%;
/*height:92px;*/
border: 1px solid #000;
margin: 10px 0px 0px 0px;
}
.box {
position: absolute;
width: 92px;
height: 92px;
background-color: #999;
}
#footer {
position: relative;
width: 100%;
height:92px;
border: 1px solid #000;
margin: 10px 0px 0px 0px;
}
<div id="wrapper">
<div id="header">header</div>
<div id="content">
<div class="box" style="top:0px; left:0px;"></div>
<div class="box" style="top:0px; left:102px;"></div>
<div class="box" style="top:0px; left:205px;"></div>
<div class="box" style="top:0px; left:308px;"></div>
</div>
<div id="footer">footer</div>
</div>
You don't need to use position: absolute for the inner elements, to position them horizontally just use float: left with margin for spacing. You will still get a similar collapsing height going on with regard to the content region - because again floats are partially taken out of the content flow. However, this is easily fixed by applying overflow: hidden to the content area.
I've added first and last classes to your box elements, just to make handling margins easier:
<div id="content">
<div class="box first"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box last"></div>
</div>
I've also altered your css items as follows:
#content {
overflow: hidden; /* <-- added overflow hidden */
position: relative;
width: 100%;
outline: 1px solid #000;
margin: 10px 0px 0px 0px;
}
.box {
float: left; /* <-- replaced pos abs with float left */
margin-right: 10.5px; /* <-- added a specific margin */
width: 92px;
height: 92px;
background-color: #999;
}
.box.last {
margin-right: 0px;
}
With regards to using 10.5px for the margin, it is probably best if you re-evaluate the dimensions used so this is not necessary. However most modern browsers will handle this correctly.
http://jsfiddle.net/M4jyH/5/
position: absolute should really only be used for items that you specifically want taken out of the document flow and to not interfere with anything else.