This site: http://dev.calffl.org
Three bottom widget boxes labeled test, test 2, test 3.
Notice how the box extends down into the footer and overwrites the footer in a bad way?
That needs to go away, and the boxes should be 210px tall, with 90px of overlayed text/transparency anchored to the bottom.
I'm losing my mind apparently.
Your .block have a fixed height, whilst it's children elements have an even higher height, thus overflowing it's parent, and the wrapper too.
By removing the fixed pixel height on the .block, and setting a float on it's wrapper:
.homepageBottomBox-widget-wrapper {
margin: 0 auto;
width: 100%;
float: left;
}
Then the site wrapper will follow suit, although I'm not 100% sure on what you need on the styling of the transparency part. But I've added a picture to see if that's what you're after.
Made an improvement on the transparency by:
Adding position:relative to your widget_sp_image class (or just widget class)
Setting position:absolute;bottom:0px to your widget_sp_image-description class.
Related
What is the best way to reproduce this effect
in any resolution? Is there any way to force this elements (header, content area, menu items and footer) to always have the same relative position to each other, so that they stay always perfectly aligned without ever breaking the curved effect, or should I go for a CSS mask?
So far all the elements are images, except the text.
It's quite simple. To have an element always appear in the centre, add to its css
margin: 0 auto;
As to the footer, first make a background div (with your image set as background) with
width: 100%;
And inside of it put a div with again:
margin: 0 auto;
And then put all these divs and images in the main container with
position: absolute;
bottom: 0px;
From my experience, it is always better to use margins, paddings and fixed widths than relative or fixed positioning when working on a layout.
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.
On this page, I want the main content div - which has an id value of container - to be horizontally centred on the grey background. However I want the black login panel to remain stretch across the entire width of the screen.
In an effort to achieve this, I added the rule:
#container {
margin: 0 auto;
}
But it doesn't work, what am I doing wrong?
Update
Thanks for the answers. It was suggested that I fix the problem by removing the max-width from the body and setting a width on the container.
This centres the container, but causes it to occupy all the available horizontal space. What I want is for the container to be centred with a width of (say) 900px, and the grey background should appear in the "empty" space on the left and right of the container.
you need to specify a width, otherwise the margin won't know how to centre...
like this:
#container {
width: 960px;
margin: 0 auto;
}
EDIT:
Also, remove the max-width on your body!!
The issue is that you have max-width: 960px; on your body element. Non-absolute elements will not size past the boundaries of their parent element.
You should instead be setting max-width (or better width) on the #container element, otherwise the div will automatically size to 100% as it is a block-level element.
I've been working on http://healthimpactnews.com and I need to fix this issue asap.
For some reason, IE, and IE only, squeezes the right-hand sidebar down below the other divs even though all the div columns are floating and within a fixed width container. My browsers create a horizontal scroll bar when the are sized down, but IE just forces the div down, instead.
Anyone know why?
The div with class ct_w is 1000px width;
The first child of that (ct) is also 1000px width,
so it pushes the second child ct_c3 (the right bar) away... (down)
solution:
completely remove the width property of the div with class ct
.ct {
margin: 0px auto;
width: 1000px; /** <--- remove this **/
}
Yes, your container, "ct_w", has a width of 1000px; your left column, "ct" also has a width of 1000px. There is no room left there for your sidebar, "ct_c3". The other browsers are actually being nice by rendering the sidebar where it is. In fact, they're only doing that because you didn't clear your floats, so they don't understand the box model of ct_w.
Use a clearfix on ct_w, set the width of ct to 750px (or 749px for IE7), and make ct float left, then you will see the layout you're looking for.
Try setting the following:
.ct_w {
...
float: left;
width: 750px;
...
}
.ct_c3 {
...
float: right;
...
}
The following seems to work as well:
.ct
{
float:left;
width:750px;
}
And remove the margin part, because it is not needed when floating the toolbar next to it.
I'm trying to make a div assume 100% of it's parent div. The parent div acts as a page wrapper, so it's already assuming 100% of the page width. I've tried adding width: 100%, but this did not seem to work. I'm a little baffled, because this seems like a relatively simply thing to do.
Don't specify a width at all. For a div element (or any block level element for that matter), this will make it assume 100% width regardless what padding/margin settings it has set.
Depending on the box model, explicitly setting 100% width can actually make the element too wide because paddings are calculated into it.
If this doesn't work, there is some other CSS setting interfering and you need to show more of your layout and HTML code.
display: block;
width: auto;
Should work for you.
You need to show more of your existing css code as normally, a div takes by default the whole space available to it, provided it has some content.
Other than that, make sure you set margin and padding of the parent div to 0.
.parent{
margin:0;
padding:0;
overflow:auto;
}
.child{
margin:0;
padding:0;
}