Im having trouble vertical aligning 2 divs inside a 100% height div. I googled but failed solving.
pseudocode:
<div container, fixed height>
<img, dynamic height/>
<div inner, 100% height>
<div><img/></div>
<div><img/></div>
</div>
</div>
The two divs in the inner div, i want them to be in the vertical center of the inner div, but i cant find a way. its not possible to know the height of the inner div, its just set to 100% because of the random height of the image above it. The divs inside the inner div will also have dynamic heights.
2 hours of fiddling around gave no results, so im coming here.
The page where you can see it in action: http://pyntmeg.no/?iframe
You can give the parent DIV.container a position :relative property since it has a fixed height.
The inner div can then have a position:absolute and you set its height to 100% or maybe a little lower. you can use the top property to move it around.
Try:
.item {
position: relative;
top: 10%;
}
You may need to adjust top: 10%;
As long as the parent/grandparent divs have the width to work with it you can apply 'float: left' to the grandchild divs style.
vertical-align is meant for table elements, not regular divs, etc. In order to get vertical-align middle to work, the element needs to be set to display:table-cell and it's parent needs to be set to display:table-row
Be careful with that, though, because it really does change the way the element interacts with it's sibling elements, and it could definitely change how your page is laid out.
The best use of this would be something like this:
<div class="table-row">
<div class="td">lorem ipsum</div>
<div class="td">dolor sit amat</div>
</div>
Css:
.table-row {display: table-row}
.td {display: table-cell; vertical-align: middle;}
NOTE
This will not work with elements that are floated left/right, and it will change how the border width effects the overall width of the element.
I would only use this with tabular data, much like I would suggest only using a table.
Related
I've been reading about how elements with the float attribute do not have their height accounted for. Therefore, I should use clear:both right before the end of the parent div so that it will stretch over the entire inner div.
You can see on This Page that the div with the id full-height-template-container is not stretching over its inner content, and therefore the footer (copyright text on the bottom right) is coming up too high on the page.
The layout looks like this:
<div id="full-height-template-containter">
<div id="content-container">
<div id="full-width" style="float:left;">
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
What else can I try in order to make the outer div stretch over its children?
Thanks in advance!
That's a common problem. To solve it, the clearfix hack in its many variants was invented.
I was confronting the same issue until I inserted this version of "Clearfix" at the top of the container that needs to be stretched as such:
CSS:
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility:hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
HTML:
<div class="clearfix"> </div>
<span class="doc">
John Nixon
Henry Wright
</span>
In #full-height-template-container you are using height: 100% which means the div takes 100% height of the parent.
If we track back in your CSS each parent element is assigned height: 100%, including the html and body elements, which means that the height is taken from the window - so as a result the div will never exceed the size of the window (but content will still overflow).
So it is not the floats that are causing the problem, it is the height you are explicitly assigning to each div.
i put your sample on fiddle and gave it some css to show the divs:
http://jsfiddle.net/WRzsE/
You can clearly see that it works perfectly as you describe you would expect it to. You are doing something else wrong i suspect...
Perhaps you are using a position: absolute somewhere, wich would cause the elemnt to be lifted out of its parent, and would make the parent not stretch (just thinking out loud here...)
edit:
I just took a look at the actual page (overlooked the link). Your div's are stretching just fine. The problem is with the positioning of your footer, wich is set to absolute. I suspect you are trying to achieve a sticky footer, have a look at this, works like a charm. I use it all the time: http://ryanfait.com/sticky-footer/
I'm trying to add a very wide div to an existing, non-fixed-size div. Here's a minimal example (jsfiddle):
<html>
<head/>
<body>
<div style="float: right; border: 1px solid green;">
Some content
<div id="problematic-div" style="border: 1px solid red; overflow: auto;">
This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
It_should_have_a_horizontal_scrollbar_instead
</div>
Some content here too
</div>
Main content goes here
</body>
</html>
What happens is that the large inner div makes the outer div stretch to fit. I'd like the outer div not to resize (instead, to keep the size that it would have if the inner div wasn't there), and instead have the inner div display a horizontal scrollbar.
This is very easy to do if it's possible to know how large the outer div should be, and limiting the inner div's width to that, but here I'd like to make the outer div's size criteria to be "use whatever width would fit all inner elements, except that wide inner div".
In order to do this, my guess is that the inner div needs to ignored from the outer one's size computations for width only, not for height, and that's what I'm not sure how to do. I've tried a few things:
Setting the outer div's position to relative and then setting the inner one's to absolute. This works to the extent that the outer div is no longer stretched by the inner one, but the horizontal scrollbar doesn't appear, its position is at 0,0 from the top-left corner of the outer div, and it overlaps some of the outer div's content
Making the inner div float, and wrapping it between two clear: both elements as follows, which still causes the outer element to stretch:
.
<div style="clear: both;"></div>
<div id="problematic-div" style="border: 1px solid red; float: left; overflow: auto;">
This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
It_should_have_a_horizontal_scrollbar_instead
</div>
<div style="clear: both;"></div>
Some content here too
Some Mozilla vendor prefixes of width (min-content, fit-content, available), but none of them seemed to have the effect I want
In short, I'd like an effect much like the HTML code listing above on this very page, but this page achieves it by setting a fixed width on the question container. Is such a thing possible?
As I've said in my comments, its not possible to limit a width without actually specifying that limit.
Do you have any guide for the sizing of the columns on your page, such as percentages or setting the main column width? Otherwise the page does not know how much space to allocate to each column and the appearance of your page will be unpredictable.
I gather the reason you don't want to set a width is so you can use the full available width of the screen. Therefore I suggest you use percentages e.g 30% of your side column on the right. This gives a predictable layout, and also allows you to achieve the scrollbar you require on the inner content because you have specified a limit on the outer div. e.g.
<div style="float: right; width:50%">
Some content
<div id="problematic-div" style="overflow-x: scroll; width: 100%;">
This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
It_should_have_a_horizontal_scrollbar_instead
</div>
Some content here too
</div>
You will need to test that cross-browser but it should work in the majority of browsers)
The only way I can think of doing this without setting a fixed width is to do this:
http://jsfiddle.net/pgRd5/
Set the inner div width to 0, and force overflow to be visible.
Then on the outer div set overflow to auto, and the scroll bar will appear on the outer div.
If you want the scroll bar on the inner div then you're out of luck.
This is not the best solution in the world, so I would suggest setting your sidebar to have a max-width property such as in this example.
I need a child div to be as high as its parent, but I do not know the parent's height. It can change.
Setting "height: 100%" does not work, as the div will take the height of the entire page.
This is the layout of the divs:
<div id="deelnemersballoon">
<div class="balloonarrow"></div>
<div class="balloonborder">
<div class="ballooncontent">
<div id="aantaldeelnemers">1</div>
<div id="deelnemertekst">deelnemer werd toegevoegd.</div>
<div class="clear">
<button>Add something</button>
</div>
</div>
</div>
</div>
.balloonarrow should be as high as #deelnemersballoon
set parent div height in pixels (for ex height:100px ) and set child as 100% (height:100%) . Child only occupies parent div width fully
I never had much luck with height: 100%; even when playing by the rules. What does .balloonarrow do? If you're just trying to snap a graphic to the bottom of the div, you can try position: absolute; and bottom: 0px;, as long as #deelnemersballoon is set to position: relative;.
If you're just looking to make a solid/patterned visual contained by .balloonarrow, you're better off making a stretch image: create an image 3px or 4px tall, make it the background of #deelnemersballoon, and set it to repeat-y. Quick and dirty way to make a 100% height sidebar.
Hope this helps, can't tell much more without seeing your css.
A child div will not take up 100% of its parent if it has something in the markup before it:
Html:
<div id='parent'>Parent (Mark up before child)<div id='child'>Child</div></div>
css:
#parent {background:blue; height:500px; color:white}
#child {background:red; height:100%}
You can find a working example here. (Removing the text from the #parent div will make the child fill it 100%)
http://jsfiddle.net/wcprA/2/
The same thing applies if you have markup after the 100% child aswell, as seen here
http://jsfiddle.net/wcprA/5/
Try adding position:relative to the parent div. Then the 100% on the child div should reference the parent div. In general 100% height is going to look for the nearest parent element that has a position set on it - and if it doesn't find any it will eventually find the body tag and use that.
I have come across some methods of centering a div within a div, but those usually requires the element to be centered to have a fixed width and height. Is there a way to do it if the inner div to be centered will be of variable width and height (example: centering an image inside a frame of a fixed size, and the image could be of variable width/height)
horizontal centering can be done with CSS:
#containerDiv {
text-align:center;
}
#innerDiv {
margin: 0 auto;
text-align: left;
}
For vertical centering I use Javascript if the containerDiv doesn't have a fixed height.
The only ways to center variable width in all browsers (that I know of) is with
<table align="center" cellpadding="0" cellspacing="0"><tr><td><div>This div is variable width and is centered.</div></td></tr></table>
or JavaScript
As for center horizontal that would force you to use JavaScript (I think)
IE needs a "text-align: center" on the top-level element.
For example, your body element has "text-align: center",
and your container has "margin: 0 auto".
Then IE will center it.
You can set back "text-align" to left on your container if you don't want its content centered.
Centering the width is easy...you probably already know this, but just set the left and right margin to auto. For height, unfortunately, I've only seen weird positioning work-arounds. You'd think that they'd make a similar margin for top/bottom, but alas, no. I'll try to find a link on the work-arounds.
<div style='width:400px;height:200px;background-color:#CCCCCC;'>
<div style='margin:0px auto;width:30px;height:30px;background-color:#0000CC;'> </div>
</div>
EDIT: Found link that might help on the vertical part:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
You could use the display attribute to make a table-cell out of it:
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>
However, this recommendation does not really work for me. But this one does:
https://stackoverflow.com/a/6284195/156481
I have two sibling divs sitting below each other, both contained in the same parent div.
The requirement is that the divs need a certain amount of space between them, let's say 20px, but the space beween the inner divs and the parent div needs to be the same on all sides (top, right, bottom, left), in this case 0px.
The constraint here is that the inner divs need to have the exact same markup, so I can't apply a different or additional class to just one of them. Also I can't add any markup between the child divs or only above or below one of the child divs.
What would be a good way to solve this problem with CSS (no javascript), in a cross-browser compatible way?
Thanks!
#parentdiv div {
margin-top: 20px;
}
#parentdiv div:first-child {
margin-top: 0;
}
should do it. Alternatively, you could try
#parentdiv div + div {
margin-top: 20px;
}
Which solution to use depends on browers’ support of either the :first-child pseudo-class, or the + adjacent selector. Any modern browser (thus, discounting IE6) should support both.
you could insert another div inbetween them and make its height 20px? or is putting the first inner div into a new div and then making the new divs bottom margin 20px an acceptable solution?
As others have already stated, you cannot use a pure CSS approach that will work in IE6. However, why not use a minified, basic jQuery framework - without the ui it will be tiny - and then you can call the first child and apply the margin to that:
$("#parentdiv:first").css({ marginTop: 0 })
That way you'd have already applied the margin-top:20px; in your css, now you're removing it from the first child only. I know you said you did not want a javascript approach, but you're not left with much choice, unless you're willing to re-engineer ie6 and resurrect him for us?
Hope this helps someone somewhere.
Two divs sitting below each other? Do you mean they're stacked vertically, one on top of the other? Margin-top would do it as long as you don't have padding on the parent div.
Try this example.
<html>
<head>
<style>
div.parent {
background-color: #AAA;
}
div.child {
background-color: #CCC;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"> </div>
<div class="child"> </div>
</div>
</body>
</html>
You'll notice that as long as there's nothing inside the parent above the first child its margins won't extend the parent div.
If they're side-by-side and floating that's a different story, margin-left doesn't work the same as margin-top. You might be able to use margin-right on both divs but fix the width of the parent and set overflow to hidden in order to chop off the extended margin - but I'm not sure about compatibility on that kind of thing.
Are you absolutely certain you've got no way to distinguish the two divs? Finding a way around that constraint might do a lot to help you.