I'm already spending way too much time about two divs placed inside the footer that are placed outside the container for some reason. Checked my HTML and CSS over and over but can't see what's wrong with it.
It's probably a floating/clearing issue or some little typo in my code but I just can't find it. Any help solving this is really appreciated.
The page can be found at http://nionwebdesign.com/dev/check. It's about the 'Bestellen' and 'Info' parts that are placed outside the white container.
Thanks in advance!
Probably you have them floated. Parent elements are never to expand to contain floated elements. To have this do what you want, add overflow:auto to the "container" parent element.
Here you can find a description of the problem and commented solutions:
http://www.quirksmode.org/css/clearing.html
This SO answer lists all the best solutions, starting with the more recent "micro-clearfix" one from 2011.
The overflow: hidden solution isn't without its problems, which you may or may not run into depending on your page layout.
What methods of ‘clearfix’ can I use?
Related
Does anyone know how I can stop two divs from overlapping?
I have a .box.active div however the text on this is overlapping into another div
thanks for any help in advance!
If DIVS are overlapping then the general principles is your code has made them do that in the first place. Add position relative to the classes on your div tags to start with along with Display block.
.yourdivclass {display:block}
.yourdivclass {display:inline-block}
Some other possibilities:
Set widths on elements?
Have you used FLEX? This can cause this often if your code has not been completed correctly?
Generally, we need more code to solve issues so if this does not help - provide some code in your question and I can help further.
Hope this helps.
I am faced with getting a rather complex web app to work in HTML/CSS. I am finding many issues with the flexbox, which seems like it would solve my problems. I'm trying to understand what I'm doing wrong or what the flexbox limitations are. I am only working in Chrome so that helps.
I keep seeing two issues:
- the boxes don't understand how to accommodate heights/widths of children contained inside
- child boxes aren't contained by parents. Image of this issue:
Instead of posting code here is a JSFiddle: http://jsfiddle.net/dex3703/ryCQq/
Isn't fully complete but you get the idea I hope. The CSS is combined from three different files.
Thanks!
Figured it out. All containers must be set to display: box (or -webkit-box, etc). If you want a box inside a box, they all must be boxes. Hope this helps someone!
I use overflow: hidden on my site to get control over ending floats.
Which up to now always have worked perfectly.
I know there are several different approaches of ending floats but the overflow trick normally works best.
However this time I cannot get it right.
If you look at the following page and try to adjust the volume you'll see that the volume control goes under my header.
http://pieterhordijk.com/sandbox/html5-audio-api/mp3-format
The problem is in the #content-container div
When I remove the overflow the volume control goes over my header (which is what I want).
But I can't just drop the overflow or I have to result to another solution to control the floats, which is not something I want to do unless REALLY necessary.
Anybody has a solution to this problem?
You've already selected an answer, but there are some issues that should be pointed out. First, clearing a <br> is not semantic, it adds extra code and can cause issues in some browsers.
Next, you should not use the overflow method of clearing floats now that CSS3 is becoming more prevalent. It causes issues with any new parameters that display effects outside the boundaries of the container. At a minimum both box and text shadows will be cut off if you are using the overflow method.
You really should use the clearfix method. It's simple to implement, does not require any additional mark up, and does not cause issues with any CSS3 properties.
Good reading -
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/
You could give the snippets div clear:both. You have the element in there anyway, and I assume you wouldn't want it to wrap around the nav, so it's not just adding unsemantic elements/classes for the heck of it.
I have been trying for 2 hours to get my footer to stay at the bottom.
I have been trying "Matthew James Taylors" technique, but no luck.
Anyone see what I am missing or doing wrong?
Here is a Live Example : http://glustik.com/essex/index.html
Any help would be GREAT!
I would attached the CSS Code with the { } but it always breaks for me.
I feel like the CSS to fix this will still be problematic, I would be tempted to rewrite the whole thing: HTML markup and CSS, otherwise I suspect there will be more trouble down the road.
Here are some things that are most likely giving you trouble:
Duplicate id values (as mentioned)
Unnecessary absolute positioning
Hard-coded height values on several divs
Unnecessary use of "clearfix" divs
Overuse of negative margins to compensate for padding on other elements (always problematic)
Minor but relevant: use of classes like floatRight, just as bad as using inline styles.
I think in general, instead of trying to control the positioning and height of everything - just let the normal content flow dictate it. Naturally, the last element in your markup (footer) should be on the bottom without all these over-thought restrictions.
Best of luck!
EDIT: Apparently I've come off as unhelpful, so I felt I should add a direct response: For a quick fix, to simply get the footer on the bottom:
Remove the height and bottom padding from #mainBody
(tested in FF4 and IE8). There will still be some padding issues within the footer, but that can be resolved in a number of ways depending on how you'd like to approach it. Once again, good luck with your project.
You have the footer positioned absolutely in #container, which is positioned relatively. therefore, its being positioned at the bottom of #container.
try moving it out of #container, or remove the relative positioning from #container
Because all of the content inside your main container (#mainBody) is floated, the container's only way to determine it's height is via the "height" property, which is set to 100px;. The footer is correctly rendering right below the 100 pixel height of the main container.
You have three options:
you can either properly clear your main container so that its height is dynamic based on its content using a clearfix like this
or you can set the height of the main container to something larger. I changed it to 700px and the footer rendered well below the main body.
or you can remove the height altogether, which will probably be the best solution in the long-run. Thanks to #Gaby aka G. Petrioli for pointing this out.
I've been doing this a long time and have never heard of this method. That doesn't make it bad, but the currently accepted version in my circles comes from Ryan Fait (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/)
If you load this up in Chrome and disable the position:relative from the container it does properly glue the footer to the bottom of the page. That signals a problem to me, because it's contrary to what the tutorial says. Regardless, it accomplishes your goal.
You should take at least a look at Compass. It makes CSS so much easier. For your particular question, take a look at:
http://compass-style.org/reference/compass/layout/sticky_footer/
Make the following changes and it rendered fine in Chrome for me:
remove bottom:0; from #footer
change padding-bottom:167px; in #mainBody to the desired location (I used 455px and it looked pretty good)
I don't usually post a link to my site when asking questions, though I don't see another way around it. I apologize in advance.
I'm having difficulties with a specific page. The page consists of Team Members, where each member is its own DIV (also each team member is coincidentally a separate post in Wordpress).
For some reason, the DIVs wrapping each post are clearing left, but no clearing attributes are assigned!
The page is located here: http://engineercreativity.com/samples/comsense/?page_id=15
Please, if you can help, I'd love to hear any input.
Thanks a lot!
Amit
Divs are floating on horizontal axis and not vertically, What you are essentially looking for is a Masonry Plugin, its for jquery and should easily solve your problem.
http://desandro.com/resources/jquery-masonry/
edit:
your divs are not clearing on left, please see the computed layout
the whitespace is not because of divs clearing left, the whitespace is because of line height. When you are having two floating elements in a row, then the row will take height equal to the bigger element, so essentially each row will have white space below the smaller div. This is similar to a HTML Table.
Akinator's fix didn't work for me in FF on Win XP. If you change your float on the "team-member" class to float: left it will fix it. It is being caused by your static image being float left and the rest of the divs around it being float right.
If I understood your question correctly, you have a margin-bottom of 15px in the class .team-member, this gives and extra white space.
It should be set to 0 (or not set)
Is this what you ment?