Alright. First of all, I am very new to CSS and HTML. I have been working on this project and learning as I go. With that being said, if you could explain your answers a little that would help me out a lot!
Anyway. Long story short, I am creating a form and trying to lay it out with div's displayed as a table (I know how to use HTML tables, I chose to use div's so I can style it better with CSS).
Basically, I have a main div that is displayed as a table and has the height set to 100%. then I have nested div's that are displayed as table rows (5 total), and additional nested div's that are displayed as table cells.
The problem I have is that when I set the height of either the rows or cells, they don't change...AT ALL! Keep in mind, I am using percentages not px or em.
I am trying to get rows 1 and 5 to be at 5% of the 100% from the main div, and 2 - 4 to be at 30% out of the 100% from the main div. I assumed that this would equal 100% and cause the rows to match the 100% height of the main div. It's obviously not working so I assume my logic is entirely wrong.
I have searched for a solution and have not found one, which is why I am here.
Here is an idea of what I am doing:
#MainDivTable
{
display: table;
height: 100%
width: 100%;
}
#DivCol1Row2
{
height: 30%;
}
#DivCol1Row3
{
height: 30%;
}
#DivCol1Row4
{
height: 30%;
}
#DivCol1Row5
{
height: 5%;
}
You need to understand that percentage heights are always percentages of something
i.e. when you specify mainTable height as 100%, it has to be 100% of something, which generally is the parent's height.
First you need to set the height of the parent as a fixed value or else you can propogate percentage heights upward the layout until you reach the root element.
In your case, I think,
html, body { height:100%;}
should do the trick.
Related
I have an iframe that I want to allow to be as wide as the display requires. I have it inside of a section, and have the following in a sass file:
iframe
max-width: 100%
where the real width, otherwise is controlled by the section. Now, on very narrow displays, like a smartphone, this works fine. However, the height of the iframe goes crazy in this case. Is there a way to ensure that the height of the object cannot get become larger than it's width? That is, is there a way to access what 100% width actually is? I wish I could do something like this
iframe
max-width: 100%
max-height: max-width
Edit:
Please see here for a working example:
http://jsfiddle.net/ptzyjmb1/5/
Notice how the first embedded object is wider than square. The second is about square. and the last is taller than square. I just want some option for max-height that will result in the third object (the "tall" video) to be square. That is, I want to be able to set the width to whatever I (or the display) would like, and the height will not be allowed to exceed that value.
I do not want to enforce that height = width, just that height <= width
Use the vh and vw attributes (view-height and view-width):
iframe {
max-width: 100vw;
max-height: 100vw;
}
If, as #Anonymous pointed out, the iframe is the child of some parent element that is not 100vw across, you can just use the div's width as the width of the iframe:
div {
width: 50%
}
div iframe {
max-width: 50vw;
max-height: 50vw;
If the width of the parent div is constantly changing, there is probably some JS being used. If the width of the parent element is represented in a variable, as it should be, then JQuery can sort out the problem, as follows:
setInterval(function() {$("div iframe").css("max-width",String(divwidth)+"vw");, 10)
Trying to use background size cover in a table and not getting the results I am after.
See:
http://jsfiddle.net/pp9st63L/1/
.image th {
background-size: cover !important;
height: 300px;
width: auto;
}
The data columns (not including left most column) should be equal width, but the number of columns is variable. Sometimes 3 and other times 4 (including left headline column).
The width of these data columns should be equal and sufficient that the background image can cover. If there is any long data in the other. Currently the width of the columns is purely related to the data in those columns. I would like to override this behavior with CSS and set max widths for columns and make them equal width. So the background-size cover will work.
Any thoughts on how to get this to work?
Just delete display:block and max-width, use width for table cell. background-size:cover works for me. For some 'beautiful' you may also use background-position:50% 50% or background-position:50% 0px for images. For table-cells same width properties (30% 30% 30% or 30px 30px 30px 30px) is a point to set those width always be the same.
P.S. Sorry for my very bad English.
UPD
Also set width for the first col
Example
UPD 2
Please check, that tr { td {...} } was error. You should use tr td {...} .
Also check, that for set image properties you should use background-image property in tags.
And width:auto I wrote specially to show that you don't need set width for narrow column to set it width to all other space of table.
Also width for table-cell is a min-width. So, text in cells can change the width. But it could be change by hyphenation (word-wrap).
Example 2
I'm building something for a schoolproject.. and I'm probably wrong with my current code, since it's not what I want.. So I would like to ask for support!
First of all: All must be in percentages, since it's for Mobile phone screens and all is based on the resolution. I want all things relatively equal in size, so I assume percentages are best here.
Well the think I need is
Row 1 height:20%
[Block one width:60%][Block two width: 40%]
Row 2 height: 60%
[Block one width:100%]
Row 3 (footer) height: 20%
[Block one width: 100%]
Row 1 must at all time be at the top (duh)
Row 2 must be next, be in centered all the time and must have a fixed height of 60% of screen height, no matter what is in there
Row 3 must be as footer and comes below row 2 (duh)
I think there isn't much of big code in here..
But I can't figure the fixed height, since my 'footer' always comes directly after row 2, instead of the total bottom..
Thanks in advance!
Sounds like your question is really just about setting the height.
That problem is (likely) your percentages are only based on the body tag, which is only big enough for all your content. Try this:
html, body
{
height: 100%;
}
div {
border-style:solid;
border-width:1px;
}
div#top { height:20%; }
div#middle {height: 60%; }
div#bottom {height: 20%; }
​See http://jsfiddle.net/nhw5X/2/ to play with it
Related to Make body have 100% of the browser height
I'm trying to style a table according to the following requirements and getting nowhere:
the width of some columns must shrink to fit contents.
the width on other columns must divide up remaining available width among themselves.
table width must fill, but not exceed, parent width.
I came up with one approach ... set the shrinking columns width to 1px. That seemed to do the trick until the content of the expanding columns grows and ends up increasing the width of the table to exceed the width of it's parent, which violates the last requirement listed.
Any ideas? I'm broke.
I'm using Compass/Sass hyphenation, which helps with the last requirement (table does not exceed parent width). Works in Chrome perfectly. In Firefox, the table width is just a little too far. This is what my styles look like:
td.id
td.actions {
text-align: right;
/* trick table cells into fitting their content with nowrap and zero width */
white-space: nowrap;
width: 1px;
}
td {
#include hyphenation;
}
Sounds like you are using pixel widths instead of percentages. If you are, try "60%" or another appropriate value. Can you post your code?
td.actions {
table-layout:auto;
}
I have a cell that is 10% wide with a couple words in it. When you shrink the window size, the size keeps getting smaller until it matches the length of the text inside and then it stops shrinking. I want it to stay at an exact 10% wide. How do I do this?
Sorry, working with divs is not an option.
This might do the trick:
#your_table {
table-layout: fixed;
}
Tables can (should, as it's up to browsers to implement this) have two types of layouts:
table-layout: fixed: This is the "stupid" table layout. The table doesn't care about its contents and just resizes carelessly.
table-layout: auto: This is the "smart" table layout. The table cares about it's contents and stops resizing cells once the minimum width and height of a cell is reached. This is default table behavior.
Thank you W3C: http://www.w3.org/TR/CSS2/tables.html#propdef-table-layout
It looks like what you really want is a set width. If you say that the table has to be 300px, you can specify that the cell is always 30px. The relative scale is what's causing the problem.
table.myClass{
width: 300px;
}
table.myClass td.myOtherClass{
width: 10%;
}