<body>
<div id="parent">
<div id="childRightCol"></div>
<div id="childLeftCol"></div>
</div>
</body>
Parent's height is suppose to be dynamic and stretches to the max height defined by the child. ChildRight dynamically changes height but I want it to be 100% height of parent. ChildLeft some times defines the height of parent.
The problem is that because ChildLeft defines the height of the parent. Height:100% on childright doesn't work because parent's height isn't defined. Please help.
id="news-flicker-container"
id="news-flicker-userbars"
Instead of using display: none and display: block to toggle visibility, use visibility: hidden and visibility: visible which keeps the size of the elements.
To prevent the articles form stacking on top of each other, you have to compensate. This can be achieved by floating all the articles to the left of each other, and give them all but the first a negative margin so they all remain at the same location.
See this demo fiddle which demonstrates two situations, i.e. an article with less height then the right column and one with larger height then the right column. In both cases the height of the left column (the height of the largest article) decides the height of the parent div.
The basic requirements for the CSS:
#news-flicker-container {
float: left;
}
#news-flicker-userbars {
float: left;
}
#news-flicker-container article {
width: 100%;
visibility: hidden;
float: left;
margin-left: -100%;
}
#news-flicker-container article:first-child {
margin-left: 0;
}
Equal Height Columns with Cross-Browser CSS
If you don't need to support IE 6 and 7, this would be a better approach:
Use CSS display:table for Layout
Related
How can I style a div with CSS to automatically fit in a gap? At the moment, I have something like this
HTML
<div id="wrapper">
<div id="auto-width"></div>
<div id="changing-width"></div>
</div>
CSS
#wrapper {
padding: 30px;
}
#wrapper * {
height: 50px;
display: inline-block;
}
#auto-width {
width: 271px; /*I don't want to have to set this value*/
}
#changing-width {
width: 140px;
float: right;
margin-left: 30px;
}
I want the div with the ID "auto-width" to change it's width based on the padding of the wrapper, and the width and margin of the "changing-width" div. I don't mind using the padding and margin values, but in my actual project, the width of the "changing-width" div actually changes depending on the amount text in it and I want to "auto-width" div to change with it.
JSFiddle example:
https://jsfiddle.net/bve8162f/
If the width of the right div is fixed, then you could set the width of the left div like so:
#auto-width {
width: calc(100% - 200px);
}
...where the 200px is the width of your right div plus the padding. If you're using a css preprocessor like Less or Sass, you could create a variable so you can define the value in one place for both styles.
Note that the 100% refers to the explicit width of the parent. This solution seemed to work in your fiddle (updated version here,) but if your production code is set up a little differently, this may not work. I'll see if I can stumble across a different way, but this is one method I personally like to use when I can.
I've seen several posts about how to auto-size a single image within an outer element. All these solutions seem to do this by making the image width 100%. But I need to stack several images side by side, each image having height equivalent to the outer element height put maintaining relative width. I tried doing image height=100% but that doesn't seem to work.
In my case, the outer element is a div set to a relative position within an outer div.
<div class="basicskin thumb">
<img class="background" src="/content/skinz/SolidBack/240px/SolidBack-sml_grn.png">
<div class="numbers" style="top: 14.8571428571429%; left: 6.46666666666667%; height: 68.8253968253968%; width: 87.2444444444444%;">
<img../><img../>
</div>
</div>
The styles look like this:
div.basicskin
{
position: relative;
display: inline-block;
}
div.basicskin.thumb > img.background
{
height: 32px;
width: auto;
}
div.basicskin > div.numbers
{
overflow: hidden;
}
div.basicskin > div.numbers img
{
width:auto;
position:relative;
}
My images want to render full size instead of relative to my "numbers" div.
What am I doing wrong?
Thanks for any help!
If you want to set height: 100%; to the <img/>, you should make it display: block; and give some height to the parent block.
height: 100%; works only when it's parent has set height.
For IE inline-block support you can use this fix:
.selector {
display: inline-block;
*zoom: 1;
*display: inline;
}
Setting height to % can be tricky, because your element is inside <body> and <html> that may not be with 100% height unlike you may be instinctively assuming. You have to set those elements height to 100% too to make sure you can expand things to the full vertical extension of the screen. I also recommend you head your html file with <!doctype html> to make sure those things work correctly in every browser.
See this Fiddle, how can I center the blue div without fixed width and height in the parent and child?
This is to post in SO
<div class="parent">
<div class="child">
</div>
</div>
Update
These are positioned elements, I want child at the center of the screen.
Update 2
See it centered here, but I can't use fixed widths nor heights in parent neither children. I need positioned elements because I need them to be over other elements.
To center a div, you simply have to add this attribute:
margin-left: auto;
margin-right: auto;
or a more condensed version (assuming 0px for the top and bottom margin):
margin: 0px auto;
This assumes that you have some sort of width value on that element you want to center, whether fixed or a percentage. You shouldn't need anything in the parent to dictate the child's margins.
margin-top: -50%; /* why this takes the width of the parent ???? */
It's because your parent div has position: fixed and your child div has position: absolute and since absolute position element is positioned relative to the first parent element that has a position other than static.
So your child div will take a margin top and margin left with a value equal to -50% of your parent width which is -50% * 150 = 75px
Try this it's display in center of width.
<div class="parent">
<div class="child">
</div>
</div>
<style type="text/css">
.parent{
}
.child{
background: none repeat scroll 0 0 lightblue;
height: 50px;
margin: 0 auto;
width: 150px;
}
</style>
I think this could solve your problem, but this needs JQuery[.width()].
.parent{
position: fixed;
/* I can't use static width nor height, TO DELETE(try changing this)*/
width: 500px;
height: 400px;
background: red;
}
.child{
display: inline-block;
position: absolute;
/*Simulate width and height, these are actually calculated by content*/
width: 100px;
height:50px;
background: lightblue;
}
JQuery onLoad:[JSFiddle]
$(function changePostion() {
var s = $(".parent").width();
var e = $(".child").width();
var d= (s-e)/2;
$(".child").css({"left":d});
var sh = $(".parent").height();
var eh = $(".child").height();
var dh= (sh-eh)/2;
$(".child").css({"top":dh});
});
This article is a best tutorial for positioning html attribute in center. There might be a better way to do without using JQuery.
Dynamic modals can be the biggest pains in the world. You need JS to change the heights and widths. Can you use a plugin? If so here are some good options. Twitter bootstrap has a modal that's very easy to get set up but it's challenging to load divs via ajax and iframes. You have to choose one or the other. simplemodal (http://www.ericmmartin.com/projects/simplemodal/) is good but you still need to do a lot of the work yourself. It works with iframes and ajax content.
I'm trying to create a vertically positioned DIV by percentage. I have the parent container to set to relative and the content div set to absolute. This works fine when I position the content div with pixels, but when I try percentages the percentages are disregarded:
.container {
position: relative;
}
.content {
position: absolute;
left: 10%;
top: 50%;
}
<div class="container"><div class="content"> This is the content div. It should be 10% from the left of the container div.
</div></div>
The content div appears at the top of the page, disregarding the 50% vertical placement. What am I missing? Thanks in advance!
The absolutely positioned element is taken out of the natural flow of the document which means your container has zero height and width.
10% and 50% of that zero height and width are, of course, zero.
If you give your container a height and width, your percentage positions will start to work as you want.
Here is a working example.
.container { position: relative; width:500px; height:500px; }
Welp, my first post in SE. For those of you seeing this in the future, you can actually use viewport height as a measure of percentage.
.container {
position: relative;
top: 10vh; // 10% of height from top of div
}
You will likely need to add height: 100% to your .container div:
.container { height: 100%; position: relative; }
and possibly all the ancestor elements:
html, body { height: 100%; }
#Jaime Dixon's answer was great. Beautiful, two great concepts given there.
The percentage, the relative units are relative TO SOMETHING, you must understand what's the reference container to which those values are calculated.
Even if you have a container, there CAN BE an arbitrary behavior if the container has it's dimensions as "auto". So, to have a predictable behavior, be sure that the container has a dimension better than simply saying "auto". OR, if your container also has 100%, and its parent and so on, make sure you have a css instruction in which you have specified the height of the elements html, body:
example:
html, body {
height: desired_value;
}
I have a div ( position :fixed ) with varying height depending on the content in it. To have an auto scroll for that i have added overflow-y:auto and assigned a fixed height.
Is there a way to auto set the height of the div so that when the browser space gets changed, the height of the div changes accordingly, and if there is not enough space the scroll bar appears and when there is enough available space the scroll bar disappears.
use position:absolute instead of position: fixed and use the top left, right and bottom co-ordinates and set the scroll to auto;
example HTML:
<div id="resize">
<p>content</p><p>content</p><p>content</p><p>content</p>
</div>
CSS:
#resize {
background: #f00;
color: white;
position: absolute;
top: 100px;
left: 200px;
right: 200px;
bottom: 100px;
overflow: auto;
}
p {line-height: 3; margin: 0;}
Working Example : Here
Use two DIVs, one nested inside of the other.
The outer DIV should be set to position:fixed;max-height:100%;overflow-y:auto
The inner DIV will contain your contents. So far as I can tell, it won't require any specific styles.
What should happen (and what's happening when I test this fix in my browser) is that the outer DIV should shrink-wrap to fit the inner DIV -- but it will not exceed the height of the window. If the inner DIV exceeds the height of the window, it will also exceed the height of the outer DIV, producing a scrollbar.
EDIT: Sample markup:
<div id="outer">
<div class="inner">
Content goes here.
</div>
</div>
And the CSS:
#outer{
position:fixed;
max-height:100%;
overflow-y:auto;
bottom:0; /* sample value */
left:0; /* sample value */
}
#outer div.inner{
/* Whatever style you want the positioned box
to have. Border, padding, background, etc. */
}
You can listen to the resize event on the window and update the width accordingly.
$(window).resize(function() {
});
http://api.jquery.com/resize/
Alternatively, depending on the layout of your page, you might be able to just use height: 100% (or another % that works for you).