I'm trying to have a background image repeat x and y to the bottom of the page.
The background image pattern div is
#pattern {
height: 3000px;
width: 1000px;
background:url(../images/patterns/pattern1.jpg) repeat;
}
In the html, it resides inside
#wrapper {
position: relative;
width: 1000px;
margin: 0 auto;
text-align: left;
}
The height on #pattern is set to 3000px just so it will show up, otherwise the image will not appear.
I have tried various things such as:
height: 100%;
min-height: 100%;
overflow: hidden;
overflow: auto;
I would like the background image to repeat to the bottom of #wrapper, to the bottom of the page.
Webpage is here:
Thanks so much.
You've set a fixed height on the wrapper, so it'll stop at 3000px, regardless of how much content is in there. Try a min-height instead. That'll keep it at a minimum size so it's visible,but allows it to grow to fit the content in it.
Try giving the #pattern a position:fixed; so it doesn't matter how much content you have to scroll, it won't scroll itself.
Side note: repeat is the default property for background image so no need to declare.
Your HTML is wrong. The #pattern div should contain the rest of the page. You want it to grow with the contents.
Your interior divs are all absolutely positioned, making it impossible for them to influence the height of the container #wrapper, which is where you'd want to put your background image code.
Also, I'm not sure if this is intentional, but #pattern doesn't wrap any of your content, so it's height has to be manually set, since it has no children.
There are two approaches you can take. Use Javascript to determine the combined height of your absolutely positioned divs and set the height of the pattern to that number.
Or, you can use float to arrange your columns, and put a at the end to force the parent container to be that tall.
The div tag containing the #pattern style should start on the first line after the body tag and close at the end of the page just before the close of the body tag.
BTW, remove the height and width attributes or set it to 100% so that it repeats throughout the page.
Related
I currently have two columns, with another column in-between them. What I want is to have the left and right columns extend in height as the centre column has more content added to it.
Something to note is that I cannot set an exact height for the parent div and then have the left and right columns set to "height: 100%". This is because there could be only a small amount of content in the centre column, or a lot.
It looks like you're going to have to implement a Javascript approach. The way I would go about it would be to grab the height of .legs then apply it to .flight_no and .price.
The only other option I can think of would be to "fake it" by giving .flight a background image that would include however your left and right columns are stylistically different, then repeat-y in your CSS. If you do that, the sidebars wouldn't actually have to span the same height.
Something like this, using jQuery, will dynamically set your sidebars to the height of the middle column.
$(document).ready(function() {
$(".flight_no, .price").css("height", $(".legs").height());
});
Edit:
Times have changed -- jQuery is not the juggernaut it once was, and we welcomed Flexbox to the world. See this SO page for column-based solutions:
CSS - Equal Height Columns?
Extending div to correct height, or lets say 100% height of the container, You have to chain height:100% up to the container with fixed height or to the body with another height: 100%;. On the long run, you will probably require this solution.
Since there is no fixed height, I used height: 100% and chained up to the body an html.
body, html { height: 100%; }
.flight
{
float: right;
border: 1px solid green;
height: 100%;
}
Demo
TO give exact height of container to the sidebars, you either have to use fixed height or use javascript.
I have a problem with content from a div, for example if I put a table inside of a div and set a width (width:200px !important)for that div the table it will overwrite that div. So how is possible to keep all content inside that div?
fiddle example:
http://jsfiddle.net/ebG9N/45/
You set the header to white-space: nowrap; therefore, the browser is unable to break the headers, so the width of the table will be bigger than the container div.
You can set, overflow: hidden; to cut the overflowing parts, or overflow: auto; to create a scrollbar, but without them it's the correct rendering.
There are two solutions.
i) IF you want to STRICTLY contain table WITHIN div then overflow:auto; is the way to go.
ii) BUT if you change your mind and want to WRAP div to the width of table then.
display:table; is the way to go.
Generally its bad idea to contain wider element within explicitly known less wider element.
Try using overflow:auto; in the css of the div.
You can't just expect it to somehow fit within a div of any size you wish. What you can do is, at least allow the browser to scroll (overflow: scroll) it using:
div.divano{
width:200px !important;
border:2px solid yellow;
background:#eaeaea;
height:200px;
overflow: scroll;
}
You may also use oveflow: hidden, but it would just hide the parts that are not visible. Also, overflow: scroll, will always show a scroll bar (with or without clipping). You can use overflow: auto to specify that the content should be scrolled only if clipping occurs.
I'm struggling with a client project. All of my divs have no absolute positioning, height:100% for html, body, and container divs, and yet the static-content stops short of its contents (at 910px).
I can change the overflow property to auto, and the background will continue down to the end of the content, but it adds a scroll bar, and the bottom border of the static-content div stays in the same place (at 910px).
UPDATE: Development link was no longer valid, so I removed it. Suffice to say that Animuson's thorough explanation is the valuable part of this thread, and solved the problem of containers not expanding to match their content. – Ty
You used the wrong overflow-y property for clearing, and you should set a min-height instead of a regular height. Try this:
#static-content {
background-color: #FFFFFF;
margin: 0 auto;
min-height: 100%; /* Set to minimum height so overflow doesn't get hidden */
overflow-y: hidden; /* HIDE overflow; I know, it doesn't make much sense */
position: relative;
width: 960px;
}
Floating Content by Itself
Given this green box which has a padding of 20px (for visibility), notice how a single red box floated to the left will expand past the boundary of its parent box. This is because floating content doesn't actually take up any "space" in the visual area. All other elements will expand underneath it, and only text will wrap around it.
Clearing Floated Content in the Parent
In order to counter this and make the green box completely encompass the area of its child red box, we can add overflow: hidden to its styles. This will expand the box down far enough.
Expanding the Parent to 100% Height
You might think that just adding height: 100% is the simplest way to make it expand to where it needs to be.However, the height property specifies an absolute height. Since the content which is floated does not actually take up any vertical space, our overflow: hidden property will cut off all the content that goes past the parent's height.
Using a Minimum Height Instead
Since we want it to expand to at least a 100% height, we can use the min-height property to force it there and still maintain the "automatic" height needed to make the parent green box fully encompass the child red box, letting it push past the 100% only when it needs too.
How You Were Set Up
All elements, by default, are set to overflow: visible so that property didn't really change anything. The only difference you had between this and the first example I provided was that you had a height: 100% set on the element. So the parent was expanding to 100% height but still not encompassing the full height of its child red box.
If you have to use overflow:visible for some reason, there's other way to force container to stretch to contain all floated content. You have to put element with clear:both as a last container's elements. If you ignore ancient IEs (<8) you can do it with very simple css (vide https://css-tricks.com/snippets/css/clear-fix/):
.your-container:after {
content: "";
display: table;
clear: both;
}
If height: 100% doesn't work well for you, you can try this calc function from CSS3:
/* Firefox */
height: -moz-calc(100%);
/* WebKit */
height: -webkit-calc(100%);
/* Standard */
height: calc(100%);
You can try this either with height, or with min-height, as already said. You can with this calc functions also other calculations like:
height: -moz-calc(100% - 50px);
And this is sometimes very useful, as you might guess.
height:100% is the height of the content that flows with your container at hand and is not taking into account your floated content, so that is why the height of your container is stopping short. Remove it and clear your container properly to clear your floated elements within and it will work:
#static-content:before, #static-content:aftr {
display:table;
content:"";
}
#static-content:after {
clear:both;
}
#static-content {
zoom:1; /*ie fix*/
}
You have a float in static-maincontent, which removes it from the regular flow of the content of the document, and hence static-content doesn't care about its height any more, and so won't expand to cover it.
Additionally, remove height:100% for static-content.
READ FOR ANSWER!!!-- Okay so I had the same problem, All that was needed was to remove the "Positioning" Style. Should work perfectly fine.
is it possible to have a div (or other element) resize its height in relation to its width (or the other way around) using CSS? basically, to get it to behave the way an image with a percentage width resizes proportionally as the browser window is resized?
If you want to set a width or height relative to a .parent element and you know the aspect ratio that needs to be maintained, you can do something like this:
.parent{
width: 150px;
}
.child{
width: 100%;
padding-top: 50%; /* outer height will be 75px (150px*0.5) */
}
Note that you are relying on having a height (or width) of 0 and defining it based on the padding only. So, if you want to add any content you will probably need to wrap it within an absolutely positioned div within .child. See this fiddle for an example
Look at this related question. In short: No, it's not possible using only CSS
I want to repeat a background-image for a div vertically till the bottom of the page.
#repeat {
background: url(repeat-image.png) repeat-y;
height: 100%; /* this does not work, but height: 1024px; does */
}
This does not work. I need to do so according to the page design that I have got. Can this be done?
With regards
Vikram
try to set height:100% for your <body> and <html>, too. if there is nothing except this div on your page, 100% height will be 0px without these settings.
For web pages, height is a funny thing. Since web pages expand vertically, the total height of your page can actually be 0. You may consider using min-height for each element that requires at least a certain height. You can use height: 100% to fill the full height of the parent.