I'm working on a project that uses several divs of the same class, each containing a single child element that might be an image or an iframe, of unspecified height. I'd like the container div to be exactly the height of its child element, but the default height is 3px taller than the child.
I've got a JSfiddle demonstrating the problem at http://jsfiddle.net/52me041n/2/.
HTML:
<div class="outside">
<img class="inside" id="pic" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fblogs.cisco.com%2Fwp-content%2Fuploads%2Fclouds.png&f=1" height="200px"/>
</div>
<br/>
<div class="outside">
<iframe class="inside" width="420" height="315" src="//www.youtube.com/embed/VwTnyRHEZSQ" frameborder="0" allowfullscreen></iframe>
</div>
CSS:
.outside{
background-color: red;
}
I'd like to know whether it's possible to set the div to the proper height with just CSS, and if not, how to right it with JS.
Updated the fiddle. http://jsfiddle.net/52me041n/3/
Use -
img, iframe {
display: block;
}
You need to set the display property to block for children inside the parent div. As a practice, I always also set margins and pads to 0 too. fiddle here
.outside > * {
margin: 0;
padding: 0;
display: block;
}
Images are not on the same baseline as text.
add
vertical-align:bottom;
to your img css
fiddle
For "I'd like to know whether it's possible to set the div to the proper height with just CSS, and if not, how to right it with JS." <== Yes,
<div id="cntr"> </div>
css :
#cntr { width : 100px; height : 100px; overflow : hidden; } /* overflow may have other values also like hidden, auto, scroll
*/
Try this code. Fiddle
.outside
{
background-color: red;
display: block;
}
.outside img, iframe {
float: left;
}
Related
How do I make a <hr /> tag go vertically, instead of its standard appearance as a horizontal line/going sideways?
I'd like to be able to use this on a mobile site, so a more widely-supported solution is preferable to one that only works in the latest browsers.
This will require changes to more than just the hr. the element above and below it must be floated. the effect can be achieved with a solid border:
<div class="section1"> content </div>
<div class="section2"> more content </div>
CSS:
.section1 {
float: left;
width: 200px;
border-right: 1px solid #333;
}
.section2 {
float: left;
width: 200px;
}
Edit: see also this answer
You could use css transforms. However, this just turns it, things are still where they would be if you hadn't rotated it.
HTML
<hr/>
<hr class="vert" />
<hr id="vert1" />
CSS
/*All <hr>*/
hr {
transform:rotate(90deg);
-ms-transform:rotate(90deg);
/* IE 9 */
-webkit-transform:rotate(90deg);
/* Safari and Chrome */
}
/*<hr> of class ".vert"*/
hr.vert {
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
/*<hr> with id "vert1"*/
hr#vert1 {
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
Well you could possibly make a div (<div></div>) and then give it values with css later regarding height/width. If you want it to apply to one specific object give it an id <div id=""> and more than one object give it a class <div class="">
An example of the css you'd do is:
#(id name) or div.(class name) {
height: ; (how tall)
width: ; (how wide you want it)
background-color: ; (sets the color of the bar)
position: ; (depends on if you want it absolute or static etc.) }
You can obviously add/remove other css as you go depending on what you want to do
Put it in a div:
<div style="border-right:1px solid #333;">
Content here
</div>
This is with inline css. Otherwise, separate the css:
div {
border-right:1px solid #333;
}
I suppose you could re-style <hr /> as an inline-block element, with specified height...
hr {
display: inline-block;
width: 2px;
height: 256px;
}
That's just a basic example to get the <hr /> to look like I think you want it to look. You'd have to play with height and width (and possibly positioning) to make it do exactly what you need...
I have a parent/child divs coded as;
<div class="classes scrollable">
<div class="items">
....Some content
</div>
</div>
My CSS is;
.scrollable {
overflow: hidden;
position: relative;
width: 100%;
}
.scrollable .items {
clear: both;
position: absolute;
width: 20000em;
}
Actually my "items" div has it's "left" position changed dynamically via JS (for kind of carousel effect...scrolls to left/right)
Also bcoz it is an absolute div, I cannot get the parent div "scrollable" to expand as per "items" content.
How do I fix this issue ?
You can set height on the .scrollable. The inner scrolling div is just one row, right?
What keeps you from not making .items absolutely positioned?
Can't you just use something like margin-left: -100px, instead of left: -100px;?
Working example of what I mean: http://jsfiddle.net/fk5Q2/
I'm adding elements into a container div whose height is 'auto' initially. I expect its height will be updated as the children elements appended. But, actually not. Could someone help me? I just want the container div height gets updated according to the children's height.
I used chrome debuging tool, the height of container div is less than height of children divs. Children divs are float:left.
If you're adding floated children to a div you need to have overflow:auto; on the parent.
You can also use another element to clear the float clear:both will do this.
This is because floated elements are taken out of the document flow.
Here's an example that shows you a few techniques you can use : http://jsfiddle.net/Tn5c3/
The CSS
#a, #b {
padding: 10px;
margin:10xp
}
#a {
background: #aa0000;
}
#b {
background: #00aa00;
overflow: auto;
}
p {
background: #0000aa;
padding: 5px;
}
.clear {
clear:both;
height: 50px;
}
The JS
$('#bb').click(function() {
addChild($('#b'));
});
$('#ba').click(function() {
addChild($('#a'));
});
function addChild(parent) {
var child = $('<p>floated para</p>').css({
'float': 'left'
});
parent.append(child);
}
The HTML
<button id='ba'>Add to A</button>
<button id='bb'>Add to B</button>
<div id='a'></div>
<div class='clear'></div>
<div id='b'></div>
I have a element, which is absolute positioned and has a fixed height.
This element has a lot of child elements, which could change their contents, and in consequence their height.
The problem is that the container element doesn't auto expand to fit its children (because of it's fixed height and absolute position).
How can I can resize the main container to match its children height?
Assuming you can change the css, this can be done fairly simply in css. Instead of setting height simply set min-height and your element should expand thusly.
min-height
Optionally if you did want to/need to do it in jQuery something like the following would work:
html:
<div id='container'>
<div class='child'>Content</div>
<div class='child'>Content</div>
<div class='child'>Content</div>
<div class='child'>Content</div>
</div>
CSS:
.child{
height: 40px;
background-color: red;
}
#container{
height: 120px;
background-color: gray;
padding: 5px;
}
javascript:
var childHeight = 0
$('.child').each( function() {
childHeight = childHeight + $(this).height();
})
$('#container').height(childHeight);
Working example:
http://jsfiddle.net/EcZZL/1/
I have a container element which I need to resize as its contents change. It contains 2 absolutely positioned divs which can both change height. If I don't specify the height of the container then anything after the container disappears under the contents.
At the moment I am doing the following but I'd be pleased to find a less laborious alternative:
(container has position:relative, #main and #sidebar are position:absolute, the contents of #sidebar have no positioning specified)
css:
div#mapcontainer { position:relative; width:100%; height: 600px; }
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; }
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;}
html:
<div id="container">
<div id="main">variable height content here</div>
<div id="sidebar">
<div id="foo">...</div>
<div id="bar">....</div>
...
</div>
<div>
js:
fixHeights = function() {
var children_height = 0;
$('#sidebar'). children().each(function(){children_height += $(this).height();});
$('#container').height(Math.max(children_height, $('#main').height()));
};
This is a very odd question, as div's height is always the height of its children.
Are you floating content in your container div? When you float child content the containing div doesn't act the same anymore.
If you're floating content that extends past the bottom of the container div, add the following div to the very bottom of the children of the container div:
<div style="clear:both;"></div>
That will not allow children to float over it, thus forcing the containing div to be the height of its tallest child...
<div id="container">
<div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div>
<div id="static" style="margin-left:104px;">Lots of static stuff here</div>
<div style="clear:both;"></div>
</div>
Okay, I'm not sure why you're doing the positioning the way you are, but I've done something similar for a website that had to look like a desktop application. I don't believe there is any way to do this other than with javascript. Html documents are designed to flow, not be rigid. If you want to bail on the javascript, you'll have to let go of the positioning styles and use your floating and clearing divs. Its not that horrible...
if you're floating the container div "overflow: auto" can also work magically, esp with regard to the whole IE hasLayout debacle
You didn't specify but I think you are having a problem with floating elements and you want the container they are in to be at least the size of the biggest floating element. You should try the following CSS hack that forces the browser to rerender the size of the container element to the size of the floating elements:
#wrapper:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
Let me know what you come up with and if this works. There are many other hacks to try, depending on your browser.
I would try changing the css not to use absolute positioning. In Firefox you would need to use the wrapper trick mention in the comments to get the mapcontainer the right height.
div#mapcontainer { clear:both; width:100%; min-height: 600px; }
div#main { float:left; margin-left: 10px; width: 500px; height: 400px; }
div#sidebar { float:left; margin-top:10px; margin-right:10px; width: 155px; height: 405px;}
Overflow:visible; That's the ticket. overflow:auto will create a scroll bar, if needed.