This question already has an answer here:
How does padding percentage work?
(1 answer)
Closed 3 years ago.
I wonder if this is very stupid to ask but I am asking anyway because I haven't found the answer anywhere to my satisfaction yet.
I am trying to make a responsive page where I want to define padding of a div called content which contains another div as "text" and is sitting inside another div element called container which has predefined height and width and position: relative. Now the problem is that I defined padding: 45% 45%; and it works very well on the width by taking the root value of the parent container but it flush outside the parent when it comes to height
.container
{
box-sizing: border-box;
position: relative;
border: 1px;
height: 100px;
width: 600px;
margin:0 auto;
}
.content{
background-color: skyblue;
padding: 43% 43%;
}
#textlogo {
font-size: 4em;
}
<div class="container">
<div class="content">
<div id="textlogo">Text</div>
</div> </div>
Your issue seems to be with the box-sizing,
Set box-sizing: padding-box, this way the browse calculates the total width of the element together with the padding and it will clear off any overlay. Your padding is also a bit high and it's causing the problem.
You must note that the flushing is likely caused by your font-size: 4em. This is a large font and it will force the content div to extend in order to accommodate it #textlogo content..
You should very rarely use the padding property in CSS. Going all the way back to Internet Explorer 4 margin worked correctly.
Use margin on the child element instead of padding on the parent. If you use padding on the parent it automatically effects all the child elements. You can "blanket" apply margin to all child elements by using #parent > div selector in example and then cascade secondary margin for individual elements you need to adjust.
You should use padding if there are no child elements or you're dealing with bugs in rendering engines or the standards themselves (e.g. when implied "logic" is used instead of direct (actual) logic).
As Mosia mentioned there is the box-sizing property and while support at this point is pretty much universal if you want to learn CSS the way it was originally intended I wouldn't recommend that shortcut as it will rob you from a true understanding of the code.
Related
I'm having a problem with understanding how to properly use the percentage height property in CSS.
It has been a useful tool for me in the past, when sizing elements with respect to the page size.
However I have come across a problem when using percentages to specify properties of divs within divs.
For example,
<div class="outer">
<div class="inner">
Hello
</div>
</div
In the above code, I set the text of the "inner" class to have a top-margin of 5%, which successfully pushes the text down from the top edge of the "outer" class.
However, I was told that the 5% would be relative to the parent of the element, which I would assume would be "outer" (because it is within the outer div tags). It actually acts as 5% of the page height, which pushes it down much further than intended.
I'm probably missing some quirk of HTML/CSS, because I'm still relatively new to this, so any help would be appreciated.
Thanks in advance :)
edit: I now understand that the problem lies on certain parent elements not having static dimensions, however is there a way to avoid this but still have relative heights/widths on child elements? It would seem silly to define the body with a static height/width, which would just seriously limit the site's accessibility on devices with other dimensions.
Relevant CSS code for "outer" (bear in mind I just used outer/inner as examples, and below is the actual code I've been using)
.login_center_panel
{
width:50%;
height:30%;
background-color:#3D3D3D;
margin-left:auto;
margin-right:auto;
float:top;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
font-family: "Verdana", Arial, sans-serrif;
color:white;
padding:1px;
}
and below is the relevant css for "inner"
#signinGreetText
{
margin-top:5%;
}
The margin-top property of signinGreetText still acts as 5% of the whole page, and not as 5% of the height of login_center_panel
The % is based on the width of the containing element. You need to specify a width or max-width property for your .outer div or use a different measurement for your top margin.
To see how the % is based on the width change the width of the page while viewing your current code. The top margin should change with the width of the page.
Do you have a height set for 'outer'? If not, this is why the margin is bigger than you expected. If you set a height for 'outer' you will notice the margin will scale accordingly.
Frustration
I am frustrated of having to search the internet time and again to find a way to get a simple webpage to fill the whole screen on any device. I don't care about resolution, text size, whether the text comes inside the screen or not or anything else. I don't care about anything. I have one word to display and it should come in the middle of the screen, vertically and horizontally.
CSS is driving me nuts. And I don't get why this ain't simpler. And bootstrap. Well, thanks a lot guys you helped me a lot! But why the hell don't you have a class that would simply take up all the visible space on the screen?
I have tried a lot of variations and none of them work. I just can't get that word to the freaking center of the screen.
Some variation
The simplest one: http://jsfiddle.net/IcyFlame/ngVSd/
<div style="height: 100%; width: 100%; text-align: center; vertical-align: middle;">Word</div>
I don't know why this does not work. And I want an answer as to why this does not work. And more importantly, I would really love it if you would just tell me how to make it work. All the time, everywhere.
This is a really useful question: Setting height: 100% on my label element doesn't work
The person who gave the answer says that it is 100% of what. Really cool. And how do I solve the overall problem? Oh no, I just answered the question.
All the questions after that have been marked as duplicates. One of which is:
Height: 100% doesn't work! Why?
Although the question is totally different, well, the moderators simply believed that this was a duplicate and it was marked as one.
Note: I am catering to a lot of screen sizes. I don't want to write any kind of absolute pixel heights and widths anywhere in my final code.
Please help me with this issue
Reference: I want the word to come in the middle as it does on this gorgeours website:
http://debarghyadas.com/
Note that this just a reference. I don't want to have the background image. The whole header part of the webpage takes up the whole screen, that is what I want to achieve.
Everything is centered and beautiful. That is where I wanna go.
To get vertical alignment you have to have a second div inside the first 100% sized one.
Approx centering (fine for small amounts of text) is easy: http://jsfiddle.net/ngVSd/4
If you want proper centering you have to set the height and width of the central div explicitly then give it negative margins of 1/2 the width and height. You also have to remove the padding and margin from body.
Note that to vertically center the text in the inner div you also need to set its line-height to be the same as its height: http://jsfiddle.net/ngVSd/6/
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#outerDiv {
height: 100%;
width: 100%;
background-color: red;
text-align: center;
}
#wordDiv {
position: absolute;
background-color: lightblue;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
line-height: 100px;
margin: -50px -50px;
}
<div id="outerDiv">
<div id="wordDiv">Word</div>
</div>
To be honest, I don't really understand what vertical-align is doing.
So I can't really explain where your example fails.
But if you don't care about compatibility with IE7 and smaller, you may use the 'display: table' options:
<div style="display: table; width: 100%; height: 100%; text-align: center">
<div style="display: table-cell; vertical-align: middle;">Word</div>
</div>
Hope that helps.
You need to set width and height of the html and body (any any other parents) to 100% as well, since 100% means 100% of parent width/height, rather than 100% of the screen.
div parent has no height specified to calculate % .
You need to set height to body, and for % body needs too to calculate from parent's height: html.
<html> will use window's browser as reference to calculate %.
See this on W3C site.
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.
I need some help with positioning divs. The HTML structure is as follows:
<div class="container">
<div class="item">
<div class="left">
lorem lorem
</div>
<div class="right">
<p>right</p>
<p class="bottom">bottom</p>
</div>
</div>
</div>
And I have the following CSS:
.container {
float: left;
padding: 15px;
width: 600px;
}
.item {
float: left;
padding: 15px;
width: 570px;
}
.left {
float: left;
padding: 40px 20px;
margin-right: 10px;
}
.right {
position: relative;
float: left;
}
.bottom {
position: absolute;
bottom: 0;
}
The width and height of the left div is dynamic.
What I want to achieve is:
Make the height of the right div equal to height of the left div.
Make the width of the right div fill the rest of the div with class item.
The paragraph with class bottom should be at the bottom of the right div.
Here is a simple image that represents my goal:
And a link to a JSFiddle demo.
Getting the correct position and width of .bottom appears to be the biggest hurdle for a cross-browser, CSS solution.
Options
1. Floats
As #joeellis demonstrated, the flexible widths can be achieved by floating only the left column, and applying overflow:hidden to the right column.
The position of .bottom cannot be achieved in any browser. There's no CSS solution for floated columns with equal, variable height. An absolutely positioned .bottom element must be inside the right column div, so that 100% width would give it the correct size. But since the right column won't necessarily be as tall as the left column, positioning .bottom with bottom:0 won't necessarily place it at the bottom of the container.
2. HTML tables and CSS tables
The flexible widths can be achieved by giving the left cell a width of 1px and not specifying a width for the right cell. Both cells will grow to fit the content. Any extra space will be added to the right cell alone.
If .bottom is inside the right table cell, the position can't be achieved in Firefox. Relative position has no effect in a table cell in Firefox; absolute position and 100% width would not be relative to the right table cell.
If .bottom is treated as a separate table cell in the right column, the correct heights of the right and bottom table cells cannot be achieved in any browser other than Firefox. Table cells aren't flexible in height the same way they are in width (except in Firefox).
3. CSS3 flexbox and CSS3 grids
Flexbox and grids are the promising layout tools of the near future. But flexbox isn't supported by IE9 or earlier, and grids aren't supported by any browser other than IE10. Haven't tested if either can achieve this layout, but browser support may prevent them from being an option at present.
Summary
Floats don't offer a solution for any browser.
HTML tables and CSS tables don't offer a cross-browser solution.
Flexbox doesn't offer a potential solution for IE9 or earlier (and may or may not offer a solution to other browsers).
Grids only offer a potential solution to IE10 (and may or may not offer a solution there).
Conclusion
There doesn't appear to be an adequate CSS solution at present, one that would work in enough relevant browsers, with the possible exception of flexbox (if support for IE9 and earlier isn't required).
jQuery
Here's a couple modified demos that use jQuery to force the columns to have the same height. The CSS and jQuery for both demos is the same. The HTML only differs by how much content is in the left and right column. Both demos tested fine in all browsers. The same basic approach could be used for plain JavaScript.
Taller content on the left
Taller content on the right
To keep things simple, I moved the internal padding for the left and right div to a child element (.content).
Sibling elements of same height and staying on the same row can be achieved by displaying them as table-cell and parent as display: table.
Working fiddle: http://jsfiddle.net/SgubR/2/ (which also display the overflow: hidden along a floating element technique for creating a column. The latter needs a clearfix)
Table-cell in CSS uses any HTML element you want (section, div, span, li, whatever), its semantics is unrelated to table, tr and td elements used for table layout (except that the visual result is the same, that's what we want).
display: table is set on a parent
display: table-row may be used on an element in-between but if it works without it, fine
display: table-cell is set on each child
a width is set on none, some or all these "cells". Browser will adapt both to content and widths set in order to calculate their widths (and total width of parent, obviously)
table-layout: fixed will tell browsers to switch to the other table layout algorithm where they don't care about the quantity of content, only to widths set by CSS
vertical-align: top will be needed in most cases (but you may set other values, great for complex layouts)
margins aren't applied on "cells", only padding. Margins only apply on table itself. Though you still can separate "cells" with border-collapse: separate and/or border-spacing: 4px 6px
Compatibility: IE8+
Fallback for IE6/7 if needed is exactly the same as for inline-block
Longer explanations in previous answers: here and there with also the good old method of faux-columns (your design must be thought with this technique in mind)
Just add an oveflow to the right column and don't float it.
.right {
position: relative;
overflow: hidden;
}
This will make right to fill the rest of the width.
Something like this might work:
http://jsfiddle.net/PCvy9/2/
The main key of what you're looking for lines in the:
.right {
overflow: hidden;
background-color: #C82927;
}
This is due to something called the "block formatting context." Great reasoning and tutorial as to why here: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
However, their heights are not completely linked; in this example, your left side block's height would still need to be manually set (as it's a floated container)
This question already has answers here:
How to force child div to be 100% of parent div's height without specifying parent's height?
(31 answers)
Closed 9 years ago.
There is the following simple structure:
<div id="container">
<div id="header">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</div>
I need that menu and content have got the same height, but I can't set in as constant. I set "min-height" for the both items as "600px", but now "content" is more than 600px, but "menu" has got 600px. How can I fix it?
If you don't care so much about IE6 and IE7, the simplest answer is setting
display: table-cell;
on each of your columns.
Just check http://ie7nomore.com/css2only/table-layout/ for this pure CSS2.1 solution (both columns are contenteditable so you can easily add lines and lines of text in one and/or another column)
And no it isn't "using tables" as some may argue : the table value of the CSS property display renders the same way as a the HTML element table but it's still the semantic of a div (i.e. none) or whatever element it's applied to ;)
Then for IE6 and IE7, you can use conditional comments for a simple fallback (like applying background to one of the column and if the other is longer in some pages ... nevermind and forget it, it's old IE and your text is still readable)
Another method (a visual trick) is the technique of faux-columns
I used display: inline-block, is this what you are looking for?
http://jsfiddle.net/SMxRs/1/
#header, #menu, #content, #footer {
width: 600px;
height: 500px;
background: #ccc;
padding-left: 10px;
display: inline-block;
}
#container {
width: 2500px;
}
I have always used margin to move a floating div to the correct position in a parent div (say the logo div within a header div). This has always worked but that meant you have to play with the individual height of the elements else it will affect the remainder of the layout downwards.
I found another method today and that is to make the logo div position: relative; and then use example top: 20px; to move the element around, and this does not appear to affect the layout.
I don't want to adapt to this without knowing that there may be other implications, so can anyone point out common flaws in either of the above methods or possibly suggest a better solution?
// Sample HTML
<div id='header'>
<div id='logo'>
LOGO GOES HERE
</div>
</div>
// Sample CSS
#header {
height: 100px;
}
// Version 1
#logo {
float: left;
margin-top: 20px;
}
// Version 2
#logo {
float: left;
position: relative;
top: 20px;
}
From Mozilla developer:
relative
Lay out all elements as though the element were not
positioned, and then adjust the element's position, without changing
layout (and thus leaving a gap for the element where it would have
been had it not been positioned). The effect of position:relative on
table-*-group, table-row, table-column, table-cell, and table-caption
elements is undefined.
I hope this answers your question.
Sometimes it might be the right thing to use, other times not. It really depends on your layout, if you want to make a responsive design, it might be better to have the margin there.
In your case you have a fixed height on the header, so you can use relative. I think it is a more common practice to use margin. I am only aware on issues concerning position: fixed on mobile devices.
You can learn more about CSS and positioning here.
In postion absolute and fix when u use top or bottom or right or left,you must not use float, you must for its parent use this style
postion:relative;
best regards