Here is the JSFiddle link:
http://jsfiddle.net/stapiagutierrez/48yGU/34/
When I use padding: 10px; on the #middle div, I thought it would make the contained divs inside become smaller to fit the padding.
This is partially true, it's pushed from the top and left/right, but it's overflowing from the bottom.
Any explanation for this, and a solution for this common case? So far, I've used overflow: hidden; but this feels like a hack. But maybe since I'm new to CSS this is how you're supposed to handle it.
You need to add clear after the floats like this: http://jsfiddle.net/48yGU/38/
Edit: the reason its overflowing from the bottom is because float does not have size. so the container thinks there is nothing there and just draws the padding on both sides (thats why it looks line height). what clear does is it sticks to bottom of floats and have size, so its pushing the container bottom to the bottom of the floats.
It's because the floated DIVS are positioned out of the normal flow, in which padding would normally consider the height and width of contained elements.
Related
I'm having an issue where I have a min-height set up in a div above the footer. In order to get the text in the footer to align center, I am using clear:both in the CSS. The only issue is that now there is a large space between the content and the footer?
Here's the site I'm working on:
http://brimbar.com/no_crawl/RiverHollow/about.html
Thanks!
It's because you have that floated image with the giant margin-bottom. clear: both means "no elements should be on either side of this element", so the footer has to be below that 600px margin.
The reason that the footer text isn't centered without clear: both is because it's only centering within the width between the start of the div and the left side of that image (plus its giant margin).
What you should do is change the markup so that your image appears in another column div inside the content div, since you seem to want to display it in its own column rather than floated. If you do this, you won't need the giant margin, nor will you need clear: both on your footer elements.
Here's a demo: http://jsbin.com/uxiqer/1/edit
Note you can use floats or position: absolute to position the .images div on right; I just find position: absolute easier to work with.
If you don't need images to display in their own column then you can simply keep the float on the image and remove that margin-bottom, then the text will wrap nicely around the image and its margin. This is the intended purpose of float. Then without the giant margin overflowing the content div, the footer text can be centered properly without any need for clear: both.
Remove the clear: both and add a specific height to the footer not just min-height. I can't get your text to align but I bet it would if you removed "position:static" on it.
Since you hard-coded the 1550px height on the container itself, the footer is taking up the rest of the space available to it since it only has a "minimum-height" requirement not max.
I'm developing a mobile website that integrates horizontal swiping. Unfortunately this has created a headache when trying to get the rest of my website layout to work.
http://jsfiddle.net/N7eWS/4/ - try resizing your browser window fairly small and you'll see the #footer (red) halfway down the content inside #wrapper (green). This appears to be todo with setting height:100% on most of the elements and then the absolute positioning applied to the horizontal swiping div (swipeview-masterpage-1).
I want it so that #wrapper expands to the height of the content, the #footer sits underneath #wrapper and is always off the bottom of the screen (you should have to scroll to see it).
Is there anyway I can make this work without touching (or perhaps making minor changes to) the swipeview divs? Any ideas would be appreciated!
One of the problems is the position: absolute on #swipeview-masterpage-1 and then another absolute on the parent. Parent absolute elements will not expand to the height of any absolutely positioned children (example).
You also have a random <span> in the mix, which is an inline element and will have a height of 0 anyway. Remove that to make things clearer.
Now to why your footer is appearing in a strange way. Your #wrapper will always be 100% of the parent height, your footer will always exist at 100px (header) + 100%. Disable the min-height property and you will see the wrapper collapse, and the footer sit at 100px. That's why the #wrapper content overlaps the footer.
So most of this site so far uses auto centering (the container and nav have margin-left/right:auto) and things seem to go all well and dandy except for the footer.
When I resize the size of the window everything is filled nicely except when I scroll horizontally the footer seems to be cut off on the right side.I've read that this may be a browser bug. Though it occurs in IE and chrome and firefox so it could just be sloppy coding (I am a big newb).
Here is the css:
#footer {
background-image:url(../Images/footer_bg.jpg);
color: white;
height:300px;
padding-top:20px;
}
/*I have 4 headings with Ps that I want to display horizontally side by side*/
#footerContent{
min-width:1000px;
}
/*So I tried floating <li> inside <ul> and limiting its width, which worked fine */
#footerContent ul{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#footerContent li {float:left; width:250px; }
Just to reiterate it works fine when the browser is full screened or resized. But after you resize and you use the horizantal scrollbar to scroll all the way right then the background image is cut off.
I've tried width:100%, min-width, width:1000px; but none of those seemed to work.
http://postimage.org/image/3so264fnb/
Regarding your comment about Stackoverflow being similar
(at least as of 4-29-2012)
The issue on stackoverflow seems to be that the footer contains another div element, footerwrap, that has a width: 960px set to it, but footer itself has no width setting. A div is basically designed to simply "group" block level content. It is a common misconception that a div expands with it's content. Actually, a div expands to its parent if an explicit width is set on a parent. If there is none, then it fits the browser window. This is what you (and stackoverflow) is experiencing.
To get the div to relate to the content width, you must either:
Explicitly set the width or min-width of the container. So, if stackoverflow set a min-width: 990px (the 960px of the footerwrap + the padding of 15px on each side) on the footer that wraps footerwrap, then its problem is solved.
Set the container div to float, as a floated element wraps its content.
Take a look at this example fiddle. Note the first two div's experience the same issue you are seeing. If you shrink or expand the size of the iframe window in the fiddle, the first two div's will contract or enlarge with it, but still leave blank space on the horizontal scroll. The third and fourth div's have had my fixes above applied. The fifth div is to show the fact that the inner div, if not defined in width, will expand to the width of a container that has an explicit width set.
As a side note, it may work (I have not tested in many browsers, but FF 11 worked) to actually just add a float: left to the body element in those cases where the body does not have a set width. As this example shows, it seems to be effective in causing the first two div's to behave just like the 3rd and 4th divs.
I hope this helps.
Original Answer
It is a little unclear what can be done because there is some information lacking. Here are some things to look for:
Is your background-image wide enough (or can it / should it have a background-repeat: repeat-x applied to make it wider if needed)?
Does your footer width (1000px) match your upper content width? If footer is constrained narrower than what the upper content area (or header, etc.) is allowed to be, then it's background will not align.
That's the best I can do without seeing more of your html and css for the page, and not knowing the size of the image and your intention for how it is to function.
I've got a container that's set to a max-width:780px and height is undeclared. Inside the container, there's an image slideshow. Everything on the page is responsive, so as the width decreases, the image (who's width is set to 100%) adjust's the heights container.
The slideshow change's the images to display:static; and position:absolute; which no longer "holds open" the container because it's not seen as content of the container
Is there any creative solution out there to take the height of a child element that's absolutely positioned?
Example below has NO height declared on the main container.. nothing's holding it open.
http://dhut.ch/test/santos/
Thank you!
Are the images all the same dimensions? If yes, you can use a percentage padding-top on the element that contains the images.
So if your images are all, say, 760px wide by 500px tall, that's 500/760 = .65789
Which as percentage would translate into something like:
#main {
position: relative;
max-width: 760px;
padding-top: 65.789%;
}
The reason this works is because with padding if it's set with a percentage, it is calculated as a percentage of the width. As the element shrinks in width, the height will shrink proportionately and the box will remain in the same ratio of width to height. The images, positioned absolutely, won't be adding to the height of the box.
This'll work as long as your images are all the same aspect ratio and you're not expecting that ratio to change. If you'll be using a lot of random images, this isn't for you.
I recently had a similar problem with an image that I needed to absolute position at the top of a Zurb Foundation templated page in order to pull it out of the flow and reset its dimensions (Image had to stretch to edges of wrapper, instead be enclosed by its parent .row padding). However, of course, this meant that all the fluid responsive elements below it popped right up over the top of the image. Setting a margin-top or positioning the sibling elements below meant a rigid top space that didn't resize with the width of the browser.
To get around it, I placed a duplicate of the image right after the absolute positioned image and set its visibility: hidden; I had to add a little bit of extra margin bottom to make up for the difference in height, but the end result is everything on the page flowing exactly to the height of the image in use.
I've also used the padding trick described by unexplainedBacn above, and it's a great trick as well. It takes a little bit of math, but I voted that answer up. Great solution.
I think you'd better change your approach. For sliders, the best practices is to float child elements of the container, and also use one of the known techniques to prevent parent's great collapse. So, I suggest that you remove the position: absolute CSS rule from images and float them inside your <div id='main'>, then use any of these methods to force it to encompass it's children:
div#main {overflow: hidden;}
div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
Add a <div style='clear: both;'> to the end of your main div container.
Remove the absolute position. I would avoid inline styling as well.
There are a lot of questions regarding side-by-side divs. I didn't miss those. But I need something that spans the whole width of the screen. This is the situation:
I need three divs positioned side-by-side. The left, middle, and right divs we'll call them. The middle div holds the header contents of the site and is a fixed width (800px). I want the left and right div to span the rest of the screen width on either side. So..
<-LEFT-> | MIDDLE | <- RIGHT ->
The reason I want to do it this way is because the middle (content holding) div has a backgrond that is a gradient. Let's say the left side of the gradient is white and the right side is black. I need the Left div to be white so it is a continuation and the Right div to be black. This way it looks like one fluid heading that spans the whole width of the screen.
Thanks.
A solution for this problem I once implemented was using 2 div elements, absolutely positioned, with the center div as an overlay. I have a working example here:
jsFiddle solution
This way, it doesn't matter how wide the screen is: The div's span 50% of your screen, and the middle part is behind the centered div.
Note that you might have to use a javascript workaround for the height-issues.
Do you want content in the left or right divs? If not, Simply stick with your one center div, give it a width and position it using margin: 0 auto; in your css. You can then set the background image of the body tag with an image (say 1px by 2400px) that is half white and half black.
If you want that effect just behind your header, then you could create a div the same height as the heading and give it the following css properties:
position: absolute;
width: 100%;
z-index: -1;
that way it should sit behind your container (middle) div.
You should consider having just one centered div and on the body put a background-image of 1px height and large enough width and centered. That image will have the left half white and the right one black.
Hope this helps, Alin
...WWWWW| DIV |BBBBB...
Anyway I don't think it's possible without using a table.
Usually floatting div are size-fixed and center div is fluid.