Why when I want to resize div, image in div doesn't change its size !? It's CASCADE style sheets, isn't it?
--EDIT--
.box{padding:0px;margin-left:10px;display:inline-block;margin-right:auto;width:20px;height:20px;border:1px solid red;}
<div class="box">
<img src="larrow.gif"/>
</div>
It's cascade, but width and height are not inherited.
You might want to do something to make the image follow the size of its parent.
Like
div.box img { width: 100%; height: 100%; }
<img> tags have an implicit width of either the image's natural width or the width attribute of the tag that must be overriden with css. Try this to make the image 100% of the width of its parent <div>:
div img{
width: 100%;
}
I think you have a bit of a misunderstanding of what cascading actually is. I'd recommend reading the part of the spec that deals with the cascade.
Your style selector only matches elements with the class box. The div has that class, but the img doesn't. Thus, the div has the style applied and the img doesn't. Try:
.box
{
padding:0px;
margin-left:10px;
display:inline-block;
margin-right:auto;
border:1px solid red;
}
.box, .box img
{
width:20px;
height:20px;
}
<div class="box">
<img src="larrow.gif"/>
</div>
Related
I've got a component hierarchy:
appParent.html
<app-parent>
<div class="someDiv"> // has width and height set
<app-child></app-child>
</div>
</app-parent>
appChild.html:
<div class="childWrapper"></div>
I would like to style app-child to have width an height equal to its container. My ultimate goal is to have .childWrapper the same width and height as .someDiv, but I do not want to bring JS into business
I applied
app-child{
width:100%;
height:100%;
}
but app-child remains 0x0px. I tried setting some random width and heights and app-child remains 0x0px at all times. Applying styles to .someDiv works as expected.
What is going on here? Why can't styles be applied to component selectors?
Given the above CSS on the child, it IS taking up 100% of the parent's height. The problem is that the parent does not have an explicit height set. Try setting the height of someDiv.
See this codepen: Full height child div
.someDiv {
border:1px solid red;
height:100px;
width:200px;
}
.childWrapper {
border: 1px solid blue;
width:100%;
height:100%;
}
I have set up 2 div tags, the outer one with display:table and the inner one with display:table-cell. Inside these I have an image.
When I resize the box using jQuery UI's resizable() API, I am unable to shrink it smaller than the image.
Markup:
<div class="resizebox">
<div class="content">
<img src="http://placehold.it/300x60">
</div>
</div>
CSS:
.resizebox {
border:1px solid black;
height:100px;
width:320px;
overflow:hidden;
display:table;
}
.resizebox .content {
display:table-cell;
vertical-align: middle;
text-align: center;
}
jsFiddle
I've added another example under the top resizable box to demonstrate the kind of behavior I'm trying to achieve (while keeping the CSS Table)
You beat me to it. Just using regular 'ol width: 100%;
img {
width:100%;
}
Fiddle Example
Try adding the following css
.resizebox .content img {
width:100%;
max-width:100%;
}
JsFiddle
Feeling a big silly now.
Fixed this by adding these CSS Styles:
.resizebox img {
max-width:100%;
max-height:100%;
}
jsFiddle
I have a table inside a div, and the table won't fill the container div. Why not?
HTML:
<div class="fill">
<table class="table">
...
</table>
</div>
CSS:
.fill {
position:relative;
width:100%;
height:100%;
}
.table {
position:absolute !important;
left:0 !important;
right:10px !important;
bottom:0 !important;
top:39px !important;
}
The table only fills a small portion of the container div. Why?
UPDATE:
Or, If I try the following, it doesn't work in Firefox, but it does in Chrome.
HTML:
<div class="fill">
<div class="wrap">
<table class="table">
...
</table>
</div>
</div>
CSS:
.fill {
position:relative;
width:100%;
height:100%;
}
.wrap {
position:absolute;
left:0;
right:0;
top:39px;
bottom:0;
}
.table {
position:relative;
height:100%;
width:100%;
}
This second version is closer to what I want (since it DOES work in Chrome).
In regards to your original question, this is the answer to your 'why not':
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'.
Source: http://www.w3.org/TR/CSS2/visudet.html#the-height-property
Your 'fill' div is set to 100% height, but what is its parent element's height set to? And if its parent element's height is also a percentage, what is its parent's height set to, and so on?
Add borders to your updated example and you could see, the height of 'fill' is 0 as it has no parent with a specified height, and so the height of 'wrap' is also zero. Add a parent wrapper to wrap the whole example with a height of 500px or so and it works as expected in (at least) Firefox and Chrome.
CSS:
.fill {
position:relative;
width:100%;
height:100%;
border: 1px solid red;
}
.wrap {
position:absolute;
left:0;
right:0;
top:39px;
bottom:0;
border: 1px solid blue;
}
.table {
position:relative;
height:100%;
border: 1px solid green;
}
.parent {
height: 300px;
}
HTML:
<div class="parent">
<div class="fill">
<div class="wrap">
<table class="table">
<tr><td>...</td></tr>
</table>
</div>
</div>
</div>
Tables are special, they don't behave like other block elements. Normally, a table will be just wide enough to hold its contents, and no more. Setting a width of 100% for the table should force it to fill the space allotted for it.
On .table, put width=100%
You may have to set a width for the td as well.. Depending keeping your layout structured
Your parent div of the table has a width and height of 100% which is going to be whatever the parent element is. The table needs to not be position: absolute, and therefore no need to have top, left, right, bottom set.
table {
border: 1px solid blue;
width: 100%;
height: 100%;
margin: 0;
}
Here's my fiddle of what you wanted, minus the top and right offsetting you have.
http://jsfiddle.net/jaredwilli/5s4DD/
You can instead use margin to set the top and right but you then cannot use the 100% width, that will not work. You can use display:inline-block, while not having a 100% width but instead dynamically setting the width to be 10px less than the width of the fill div's width using javascript but that's another thing. Same goes for the top positioning. You could do some other things too, but there's a lot of playing with things that you would need to do.
Also, you can use table, no need for a class unless you have multiple tables in the page.
And remove all of the !important's from your CSS.
It's never necessary to use !important, just saying.
With CSS alone, is it possible to obtain the following example, http://jsfiddle.net/LdJ7t/, without explicity knowing the child element's width before hand?
The final result desired:
parent element scrollable to child element
child element's width set to content
#Parent {
width: 100px;
height:200px;
background: #ccc;
overflow:auto;
padding: .5em;
margin: .5em;
}
#Child {
width:300px;
height:100px;
background:yellow;
}
<div id="Parent">
<div id="Child">
This is a test. This is a test.
</div>
</div>
It looks like display:inline-block; almost works: http://jsfiddle.net/LdJ7t/1/
I think this is possible. I just can't find a solution.
Your inline-block solution is correct - if you put longer words in or an image, the scrollbar will appear. Text is broken on white space by default.
If you don't want text breaking on white space, you can add white-space: nowrap; to the child div like here: http://jsfiddle.net/LdJ7t/2/
I'm trying to achieve, that the div's will behave like an example on picture, using css:
Is there any clean way to do this? I achieve this using javascript to calculate "left" div height and "main" div width and height. But i dont like this solution...is there any way to do this using css only?
Edit:
Page must not have scrollbar...so page's height is always max 100%, and no more...
thanks
If the sidebar (or any other div) is 100% height, and on top you have a 30px header, so that causes your container to be 100% + 30px height.
In the future you will have in css3 calc():
http://hacks.mozilla.org/2010/06/css3-calc/
This will solve your problem.
But for now you can add overflow: hidden; to the html and body section, but I recommend calculate the height of the sidebar ( container height - header height) using Javascript.
Check fiddle here
If you mean the two-column layout, you do it with pure CSS like this:
.container {
background-color: #aaaaaa;
}
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
background-color: #888888;
}
and HTML:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
Live demo: jsFiddle
The div on top can be achieved without any special CSS. To place something below (a footer for example), you'll need to use clear: both.
Without any code it is hard to determine what you want. Here is a extremely simple version of what I believe you want.
HTML:
<div id="header">
</div>
<div id="side">
</div>
<div id="content">
</div>
CSS:
#header {
width:100%;
height:50px;
}
#side {
width:300px;
height:100%;
float:left;
}
#content {
width:660px;
height:100%;
float:left;
}
jsFiddle