I have a div nested inside another. The parent div contains the title for a drop down menu. The inner div contains the choices. I have them in different divs so that I can add a scroll to the inner div without it causing the title to scroll. I have borders around both. The inner div looks to be 1px narrower on each of the sides. How do I make the child div exactly the same width as the parent div?
That's what width:inherit; is for.
What's your code like?
Try this, it should work:
width: 100%;
Related
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.
I have a parent div that has a bunch of child divs inside it. I want the child divs to be horizontally laid out beside each other. Which means the parent div can not be set to an exact width amount as the image amount will change all the time. So I presumed setting the parent div to width:100% then the children div items inside it I would float:left.
It will only work if I give the parent div a set width that matches the width of all the child divs inside it. Is there a way to have it 100% and lay the children divs out side by side horizontally inside the parent.
Take a look at this example fiddle - is this what you want?
Essentially, you just need to declare the following on your wrapper div, thats all
#wrapper{
white-space:nowrap;
overflow:hidden; /* whatever suits you - could be scroll as well*/
}
you don't need to float the images, as they are no block-level elements per default.
I'm creating a horizontal menu bar.
There is an outer div that contains inner divs (each of these divs is the individual menu item).
I use float: left for styling on these inner divs to display them horizontally instead of vertically.
The problem is that the menu bar has uneven space on the left and right, hence the overall menu bar doesn't appear to be centralized... i.e the first menu item on left has lesser space from left border and the space between last menu item on right and the right border is more.
I want equal margin/padding on the left and right to make the menu bar display in center.
I tried setting margin-left: auto; margin-right: auto on the outer div and then on the inner div as well. Both don't seem to help.
Already had a look here: How to horizontally center a <div> in another <div>?
However this particular answer is to center just one div, what I have is a collection of horizontal divs (menu items) that need to be centralized.
Any help is appreciated.
If your menu items aren't complex (like no fixed sizes or sub-elements), try adding the following styles:
#outer {
text-align: center;
}
.menu-item {
display: inline; /* replace 'float:left' with this */
}
DEMO
Otherwise you'll need a wrapper for the inner elements that has a fixed width:
#wrapper {
margin: 0 auto; /* center in outer DIV */
width: /* sum of widths of inner elements */;
}
DEMO
NOTE: Semantically its better to style menu items using a list, as in the DEMOs.
Firstly if all your menu items have specified widths and display:inline which is default, you wouldn't need a float to line them up.
But supposing you do, when you set a float, your elements are removed from the natural flow of the document, and hence margin:auto will not work to center it. What you could do in this case is create another container div of specified width for the menu items, within which you could use float to line them up.
Now what's left is to center this one container div within your outer div, which you have already seen how to solve. For example, you could use the margin:auto technique on the container div to center it. Make sure you have text-align:center for the outer div.
I want to increase the size of the outter div when the height of the inner div increases.
height:auto seems to be working only when the contents are added its expanding.. it doesnt seems to be expanding when the inside div height is more.Is there any solution for this in css?
Try to put overflow: hidden in the parent div or otherwise float it. Surely you have your inner div floated and then parent div doesn't consider it to expand its height. If this is the case, both solutions should work.
I have a container div .parent with a fixed width 500px which contains a lot of child divs .child.
The problem is that the child divs are getting auto wrapped, in my case i want them to continue in one line even if they'll be hidden and after that i'll add custom buttons to horizontally scroll the .parent div.
Demo: http://jsbin.com/egohi3
How to achieve that with keeping the floating?
Thanks
Make the parent element have white-space:nowrap and the child elements to be display:inline-block (instead of floating). Here is a modified example: http://jsfiddle.net/7we5q/
#Phrogz's answer will work. You could also add another wrapper <div> inside "parent" and give it both "overflow: hidden" and a huge width (like "width: 100000px;").