I have a div in my page. I set it's width to 500px. but sometimes it's content get space more than 500px. so I set it's min-width property to 500px.
it expect that is takes 500px by default and take longer according to it's content. but it takes whole of the page's width by default.
But if I replace the Div by a Table, it works correctly.
Does anybody know the reason?
Please see the demo.
Demo.
You have to set in css like
min-width: 200px;
width: auto;
float: left;
Normal block and things like tables, floats, inline blocks etc. use different algorithms of calculating width. For the normal block, the width is usually the available width of the container, and min-width is taken into account only if the container is narrower than it. For the latter things, the width algorithm is shrink-to-fit.
But there are several ways to make the normal div behave like a table.
Related
So if I take a div and add this to it:
<div class="dongs">test</div>
<div class="dongs">test</div>
<div class="dongs">test</div>
.dongs {
background-color: blue;
max-width: 500px;
display: inline-block;
}
It will make the div's line up beside each other with a blue background BUT the max width will
appear to not be working for some reason.
The reason why I need max-width to work is because if I have those beside each other and lets say
a user comes a long with a small browser it will resize the div's and squish them in so that they
are smalled which is what max-width does. Allows the container to become smaller but not larger.
However, if I remove the inline-block; the div's wont be next to each other BUT the max-width
will work and they will resize. Please, I need help. Thanks
EDIT: I did research a lot but cannot seem to find the answer. I did see one stackoverflow post but
it did not make sense to me and didnt help. Here
You can achieve what you want by using the below code:
.dongs {
background-color: blue;
max-width: 33%;
display: inline-block;
}
Explanation: Since we are not setting any explicit width at start, the browser will assign the minimum width required to fit the contents of the element for all the elements (like you can see for the 2nd and 3rd div's the width is different based on content). However, setting the max-width: 33% means that the browser at any point of time would only allocate a maximum of 1/3rd of the parent element's (or body if no other parent) width to this element. So, if the content is anything more it would start wrapping around.
You would also want to set either overflow: hidden; or word-wrap: break-word; in addition. The first makes the overflowing content get hidden (would be helpful when they are very lengthy words) while the second break's lengthy words and then wraps it around to the next lines. Either one can be used depending on the needs.
Demo | W3C Spec for Min/Max Width
I believe it's because you haven't specify the actual width, and instead of using display: inline-block, it would be better to use float: left and add some margin if you need any space between those div. But, don't forget to change the width property.
Check out my JSFiddle...
I am using a table based layout (using display: table properties). The container has a dynamic height (I have set min and max height properties on the container). All the inner elements within the container have their heights set to 100%. The idea being that they will always fill the available space.
The problem I am having is that elements that have display: table-cell will continue to expand above the 100% allocated space if they contain content that is taller than them. This happens even if I set overflow: auto.
I have created a jsfiddle to demonstrate the issue. Please see here:
http://jsfiddle.net/eSRA8/
In this example, the max-height of the container is 300px, but an inner element called .tall-content has a height of 400px. This makes the container grow taller than its max-height.
In Chrome this actually works how I want it to. However it does not work in Firefox or IE.
Please note that since the container height is dynamic, I can't set a fixed height on any of the inner elements (unless it is possible to use jQuery to assign the correct height on document load and on window resize, but this would need to respect the min and max height settings of the container).
Does anyone have any idea how I can achieve the desired result? I would like to keep as much of the existing structure as I can but if the same result can be achieved in a slightly different way then I'm open to that. Either way it needs to work the same in all browsers.
That looks to be a limitation of display:table;
You may be able to put the "container" in another div with max-height:300px;overflow:auto;
Here's some info which might explain why you are having difficulty:
http://www.w3.org/TR/CSS21/tables.html#height-layout
I'm building a responsive webpage and have set all outer wrappers (inlcuding body) to 100% width. The problem is that some elements 100% width is going outside the wrappers?
Please, take a look on this page : http://test.ufeed.se/
Size your browser to under 1000 px width. scroll down a bit and then use the horizontal scroll. You will see that some of the elements are outside the wrapper, why?
Do I maybe have to remove px from 100% width like this :
width: calc(100% - 16px);
to remove paddings (that takes extra space)?
padding makes elements bigger if you are not using box-sizing: border-box
Its because of the box model. Basically the width is set to 100% and then the margin, borders and padding add on to that pushing content outside of where you want it.
Yes you can remove the padding and that should resolve the problem, but as block level elements automatically take up the full width available you should just be able to remove the width and it will work as intended.
You can also use box-sizing: border-box; which tells the browser to include padding within the width calculation.
Without actually looking at your code I think these are the best solutions to your problem. If you want more specific help replicate the problem in a jsFiddle.
Learn about width: auto and the difference between width:auto and width:100%
If a container already has a width and you're thinking about setting a width of 100% on a descendant then NOPE what you really need is auto ;) Whatever the padding, border and box model, the result will be the same and what you intended.
* { box-sizing: border-box } and its prefixes (and boxsizing.htc polyfill for IE6-7 if needed) is also neat but it has huge consequences on your layout. I mean, it's a choice you've to make for your whole project. width: auto is useful in more particular situations.
i think this width element should be a %px element
.postContainer .createdDateCon {
width: 150px;
}
I am trying to convert my table design to css div design.
What does not work:
1.)
The black div will have list items therefore I need scrollbars which is shown at the moment. Thats fine.
But I do not want to limit the height to 400px. My former design had 100% for the height so it takes all vertical space on the screen.
2.) The red div (rightContent) should have a fixed width of 200px; When I set this what do I have to set, that the leftContent takes all horizontal space.
Above all in the old table layout were no outer vertical scrollbar visible around the whole layout.
I tested this on IE9
http://jsfiddle.net/pEMwP/4/
For Question1:
If you want a scrollbar, you should not set the height property to auto. Instead you can dynamically set the Div height via Javascript like this.
document.getElementById("ListData").style.height=<your Size>;
For Question 2:
If you want to set height to Red Div. You can specify like this.
height: 200px;
overflow:hidden;
this will limit the div to 200px. Now you can increase your other div/divs width to occupy this space .
If I was starting something like this from scratch I'd rethink the layout so I didn't have such tight constraints, but as you're converting an existing site I appreciate this might not be an option.
You could use the display: table;, display: table-row; and display: table-cell; declarations to get a semantically correct (it's not tabular data, right?) structure which behaves just like the oft misused <table> of yore. Admittedly, you'd have to implement some work-around for IE6&7 (probably 2-3% of users), but perhaps you could accept that it's usable but imperfect in those browsers?
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
I have this:
http://jsfiddle.net/UHrLH/1/
I set the height on the box element to auto, but min-height is 200px;
Now if i try to make more content in the first box, the height expands but it creates a big white space under it. I do not want that, i want to have the box under eachother like you can see above, where the height on all boxes is 200px
See the issue here:
http://jsfiddle.net/UHrLH/2/
http://jsfiddle.net/chricholson/UHrLH/10/
This will give you boxes inline but unfortunately the pairs will not extend to match the height of it's partner. To do this you will need to use tables or a javscript overwrite to capture the height. Also, bear in mind display: inline-block will not work on divs in IE7 and below, it would work on a span though: http://www.quirksmode.org/css/display.html#t03
http://jsfiddle.net/UHrLH/11/
I have added an additional div if that is ok for you...
<div class="box_Container">