Sorry. I had to edit my question: I made the second image in Photoshop.
**I am trying to find a DIV equivalent to a Table. How do you get divs to behave like TDs: All TDs adjust their height as the content grows, and all TDS have the same height to the bottom of the Table element. ** Why is this so hard with DIVs? After all these years, is'nt there a standard solution?
How do you get the two column divs to always be the same height (or always go down to the bottom) of the container DIV?
As the innner content grows, the wrapper DIV (in red) will grow with it, and maintain its padding (just like a table would).
yeah, your concept appears really tough to accomplish in CSS alone, for some reason. JQuery could handle it a lot better if you're open to it.
At any rate, here is is another alternative. It uses a clever trick as follows:
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
Check it out here:
http://jsfiddle.net/jplew/yPMVJ/
try this
<div name="outer">
<div name="inner>put your contents here</div>
<div style="clear: both"></div>
</div>
you need a div that has the "clear:both" style (clear both simple makes the div takes up a entire line, nothing can float around it) at the very end of your inner divs so the outer div knows to extend to the end.
Possibly you have floats in the children divs. In that case you can do either of the followings:
Add overflow:auto; to the parent div's style.
Use CSS Clearfix
Add another tag (last tag under the parent div) containing clear:both style like the answer above.
I mocked up a solution on JSfiddle using simple percentages:
http://jsfiddle.net/xLSQX/
Otherwise, as mentioned above pay attention to the overflow: attribute and clear: both.
I want all the divs inside the container to act like table cells and the outer div to act like the element. The height of the outer div to be flexible and adjust to the height of all the content inside the other divs.
Related
I am learning how to vertically align element and found one approach(Floater Div) here:
http://www.vanseodesign.com/css/vertical-centering/
**HTML**
<div id="parent">
<div id="floater"></div>
<div id="child">Content here</div>
</div>
**CSS**
#parent {height: 250px;}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}
Why we need #floater to be floated? Deleting float:left and clear: both still works. What's the benefit of making it floated?
I know there are lots of ways to vertically align element, and seems each of them have some disadvantage like you need to know the height; old IE won't work; multiple lines won't work and so on. But for this approach it put one element to fill up the entire upper half of the parent element. I just wonder why this element need to be floater?
This might not be the best approach to vertically align elements.
For float:left, A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. But in this case since there are no other elements in the document the floater div will start from left even without float:left
The clear property specifies which side(s) of an element other floating elements are not allowed.
clear: both - No floating elements allowed on either the left or the right side
Elements after the floating element will flow around it. To avoid this, we use the clear property.The clear property specifies which sides of an element other floating elements are not allowed.
This makes sure that the child element is not on either left or right of div, but clearing it does not make any changes, you are right, it might though in some cases.
This approach is though very restrictive as you have to know the hieght of child elements and also if there are more elements inside the parent div this will not work.
For much better methods of vertical alignment refer this question
I'm asking this for learning purposes; there aren't any negative aspects on this behaviour, but I just wonder if this could have any negative consequences in the future.
So I have a container div: content_wrap, which has two other div's: side_bar and main_content. The container div is 980px width, and is used to center its contents using margin-left and margin-right.
It's doing this correctly, however, when I was debugging the page (in Firefox), I noticed that the browser renders the div as being 0x0px and renders the parent div off-screen. However, it does position the child divs correctly. See this JSFiddle for an example: http://jsfiddle.net/7fsXp/7/
I Googled this and most of the answers have something to do with floats and are solved by using clear:both, but I don't use any floats. I did notice that if I change the main_content div from position:absolute; to position:relative;, the content_wrap is displayed correctly. Or I can fix it by setting a height for content_wrap.
I don't actually need to be able to see the content_wrap, so there isn't really a problem, as it is doing its job in means of centering the child divs. I just wondered if it would be a bad practice to leave it like this? Is it a bad thing, or does it matter?
Try adding other elements to this HTML and enjoy the horror :D
There are actually many things in your code, that I wouldn't do. First of all, when an element is with position: absolute or position: fixed its layout is "ignored" by other elements or in other words cannot "push" any element and that is why your container is having 0 height. It's like they are ethereal (best explanation ever, I know).
You should check this article on positioning -- http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
The fact that they are in the place you expect them to be is that there are actually no other elements in the HTML and the absolute element is positioned relatively to the body and so is the fixed one (but that's what elements with position: fixed always do). Looks what happens when I add some other content to the parent div -- http://jsfiddle.net/7fsXp/13/
So long story short - you shouldn't form your layout with absolute or fixed elements if you can do it without them.
position: fixed and position: absolute take the elements out of the flow, so using either of these positions on all child divs will collapse the parent div entirely.
If you have content below a collapsed div, it will flow up and over/under that content like this.
You don't need to position the main_content div absolutely, but you'll need to change a few things to top align the sidebar and main_content.
DEMO
Since sidebar is fixed, it's using the document, not the container div as a reference for top, while main_content would use the body (unless you add position: relative to the container). Getting rid of the body's default padding/margin will fix the small alignment difference.
body {
padding: 0;
margin: 0;
}
#main_content {
//remove position: absolute;
margin-top:70px; //top: 70px won't work unless you specify position
}
It depends on what you are willing to do, but because the default position for div is position: static; changing the position: relative; will avoid the collapse of parent div.
I've got several <div>s inside another <div>, and they fit just right, but I would like to add a border to distinguish between them. However, when I add a border or an outline, it shows surrounding the outside of the div. Is there a way to get it so that the border will be inside the edge of the div?
Example: http://jsfiddle.net/5cSke/11/
I would like the inner <div>s to all stay within the outer div, and for the borders not to expand and cover anything outside the inner <div>s.
EDIT (Partial Solution): I was able to find a partial solution by setting the overflow of the containing div to hidden, which prevented the borders from spreading beyond the outer <div>, but not from spreading between the <div>s within it.
That's how the box model works. There is a CSS3 box-sizing: border-box style that will let you do what you want.
Updated Fiddle: http://jsfiddle.net/5cSke/14/
you can make several divs within each other just give specify style for each one using
div id or class
<style>
div {
border : 2px solid red;
}
div #test2 {
border : 1px solid black;
}
</style>
<div id="test1">
main div
<div id="test2">inner div</div>
<br>
</div>
for more information
Nested DIV elements
I don't think there's a way to prevent the border from appearing on the outside of your divs. I would instead recommend setting background colours on your divs in order to distinguish between them.
There might be a new css 3 property to do stuff like that. But there is a more elegant solution. Give each div an rgba value with some opacity. Overlapping (or) nested divs will have a darker background then its parent.
Working Example
Css question here: How do I set the width of a container just wide enough for how many characters are in the container?
Thanks for your help, -Matthew
display: inline-block is an easy way to do this.
float: left is another option.
Make sure an explicit width is not being set, because that will disable the shrink-wrap behaviour.
http://jsfiddle.net/5jyAg/
it depends on the container, if you use a span as the container, it will always be as wide as the characters in it.
but a span is inline element
You can try to put and even Padding into your style. For example if your markup looks like this.
<div>
<p class="paddThis">Your text</p>
</div>
and in your style sheet set the padding of the right and/or left of the text your text will push the left and right border of your container a certain amount of pixels away from you text creating which should accomplish what you are trying to do.
Your style sheet might look like this
.paddThis
{
padding: 0 5px 0 5px;
}
i´ve got elements inside a containing div with a class.
i could use text-align: center on the div and that will center all elements.
how could i position the elements with exact pixels from the left?
(i dont want to use css on the element but on the containing div)
You can use padding-left on the container div. However this will augment the width of the div itself, since you're adding left padding to it. To solve this problem you should use margin-left on the inner divs, for example:
/* apply a margin left to all the divs
* inside div.container
*/
div.container div {
margin-left:20px;
}
The closest you could get with only the div is to play with the padding, but the correct solution would be to apply left/top to the inner elements.
Also, this belongs on doctype.com.
Set position: relative
Set top: ..px
Set left: ..px
I think this solution is prettier than setting margins/paddings.
(I'm typing this on an iPhone can't format it for ya)
Hello this is what your looking for
< div style="position:absolute;height:100px;width:100px;top:100px;left:100px;">
You can put that style on any tag you want Enjoy!
and to be into the middle use I.E
< div style="position:absolute;top:0px;left:50%;">