Consider the following piece of code:
HTML:
<div>
<img src="http://placehold.it/600x150" />
</div>
CSS:
div { max-width: 200px }
img { max-width: 100% }
The image will never be wider than 200px, regardless of its native size. So far so good.
Here's the fiddle: http://jsfiddle.net/PeAAb/
However, if the parent element has its display set to table:
div { max-width: 200px; display: table }
the image magically expands to its native width, expanding the table with it.
Here's the fiddle: http://jsfiddle.net/PeAAb/1/
Same happens with an actual table: http://jsfiddle.net/PeAAb/2/
Question: Is this expected behavior? If so, what can be done to work around this issue?
Setting the parent's width (even a percentage-based width) instead of max-width correctly squeezes the image back into its box, but is not a solution. I need the parent to be fluid (I'm using this for the main structure of the site, so that I can have the sidebar HTML appear after the main content in the source, but with the sidebar being fixed width).
Also, setting table-layout to fixed seems to have no effect here.
The problem here is that a table (or a div set to behave like a table) is not a block element, and max-width only applies to block elements. My only suggestion to you is to wrap the table element in a div with display: block; set.
Here's the fiddle in case you're interested: http://jsfiddle.net/PeAAb/4/
I know this is pretty late, but found the answer, which turned out to be pretty simple and super easy, table-layout: fixed.
Found here: http://blog.room34.com/archives/5042
Anyway, this is for those looking for an answer to this conundrum as I was.
Related
On a simple markup:
<div class="line">
<div class="content_width">Content</div>
</div>
with CSS:
.line {
background: yellow;
}
.content_width {
width: 500px;
}
yellow background is wide as a browser window, so if window width is less than 500 and you scroll to the right you can see it was cut off. How to make browser render this correctly? Test Fiddle
I think the .line should, as a parent element, take the maximum width of its children, but maybe I am wrong. I could set the width to the .line, too, but I would like to see more elegant solution, without setting additional widths, because the site is responsive and this is only an IE8 issue.
I thought first this was an IE problem, but I see now same happens in other browsers. I could not notice that because the site is responsive.
Try giving a:
display: inline-block;
To the .line class.
While I know this works, I can't point you to an official documentation why it does. Perhaps someone else can come up with an explanation + better solution.
I want to achieve that result as my web app layout:
I create application for mobile usage first. I want to fixed top menu that stretch to it content and content at the bottom of this menu. Content height can be very long but I want to use overflow-y: auto;. I use CSS display: table; for container and display: table-row; for menu and content to solve this problem. JSFiddle example here.
Which pros and cons should I expect? I.e. mobile browsers interoperability, performance issues and so on.
I had this exact same issue and I solved it in exactly the same way you did. The only issue I ran into was that the row on the bottom:
#content {
display: table-row;
height: 100%;
}
IE will not respect this and it will see height:100%; and instead of taking of the remaining space of the table like every other browser it will be equal to 100% of the entire table causing your layout to render incorrectly. The only way i found to solve this was to use a bit of jquery with a window resize function to basically only fire when it's IE and apply a pixel value height to the #content based on what it should be.
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'm using a two column layout with a sticky footer.
I'm trying to make the sidebar use 100% height, even when there's not much content on the page.
I've used two techniques to do this. The first is a CSS sticky footer (http://www.cssstickyfooter.com/) and the second is faux columns (http://www.alistapart.com/articles/fauxcolumns/).
Faux columns is working well to keep two columns equal height, and to expand either one as required.
My challenge is that if you look at this example (http://visuals.customstudio.co.uk/atc/sidebar/) you'll see that the sidebar is not extending to the full height of the page.
I've tried another technique as detailed here (http://stackoverflow.com/a/6838338/557002), which you can see here (http://visuals.customstudio.co.uk/atc/sidebar/about.html) but this means that if the sidebar has more content that the main area, it's not seen.
Any ideas of how I can make both columns increase the page height as required, and extend all the way to the footer will be massively appreciated.
Thanks in advance,
Tom
I think I know what you mean - but the solution deviates from faux columns. I think you want to make the right column will always appear to fill the vertical height of the inner container.
To do this just use the background image on the <div id="outer" /> element. Like so:
#outer {
url(../images/faux-columns.png) repeat-y center top;
}
Hope that helps!
what about giving your .main-centre a min-height ? i don't know if i get you right but this looks good for me.
btw many of your paddings and margins are obsolete and could result into cross-browser problems.
I think that the problem as with your about.html is with this css code:
.main-wide {
overflow: auto;
padding-bottom: 266px; /* footer height */
}
When you tried to extend your sidebar it is hidden by the overflow of .main-wide try with giving custom width to the sidebar and main-wide, for example:
.main-wide {
width:75%; //or whatever you want in ratio or pixels
overflow: auto;
padding-bottom: 266px; /* footer height */
}
and
.sidebar{ //any sidebar class
width:25%;
min-height:300px; //or as your wish
}
P.S. : I am not a professional web developer, but have little knowledge. Hope it will help you.
On a customer website, I have to add a background image for only a contained region of the page (its real content part).
The problem is, if the content is short enough, then the image will be clipped. How would be possible to have the image completely visible? I have tried to add the "overflow" CSS attribute but unfortunately it did not help me.
Here is an example of the website I have to work on: http://www.sfp-pensioen.nl/werknemer/welkom The background image is on the div element with id="content".
On the specific link that I am sending it is not an issue because the content is long enough, but if you remove elements using firebug then the problem will become obvious.
ps: IE6 must be supported.
Following on from Graham's answer:
"height" in ie6 acts like "min-height" across other browsers.
min-height: 50px;
_height: 50px;
The example above will provide a cross browser minimum height of 50px. ie6 will read "_height" where other browsers will not. If you don't hacks, use a conditional statement.
Rich
you could either give a height to the id #content
or
apply the background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; to #mainContent instead of #content
overflow for background-images is impossible, but you could set a min-height for content (or set the image in another div with lower z-index and position it abolutely to appear at the place you want - but thats a very bad solution)
The overflow attribute controls what happens to the div when the content is too big to fit - if you have a fixed-size div with some content that might overflow, you generally want the auto option. overflow has no effect on a background image.
For your case, it sounds like you want to specify a min-height on the content div. Note that this isn't supported by older browsers like IE6, which you may or may not care about. There are plenty of ways to work around this, though.
What you want is the 100% height you can achieve this with the following.
html {
height: 100%;
}
body {
height: 100%;
}
#content {
height: 100%;
}
You need the min-height and the body needs a height so every child element of the body will follow the rule.
Also by adding min-height: 100%; to all css rules will solve all your problems for any grade A browser.
If you know the #sidebar or #main will always have a visual height the same or larger than the background image then you can simply add the background image to:
.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}
instead of where it is an the moment on #content