Here is the bug I am trying to fix:
image of bug http://img26.imageshack.us/img26/9008/bild292.png
I have tried everything and am out of ideas now, here's what it should look like:
ideal output http://img809.imageshack.us/img809/3508/bild293.png
The site is: http://mobilova.de/index.php.
You need to clear your floated element. You can use a clear fix as others have suggested or you can simply assign overflow:hidden or overflow:auto to .inside and #red-box. The only thing keeping #red-box from collapsing is the min-height. You will then be able to adjust the margin you have set on the button element and it will now take effect since it has been cleared.
CSS:
#red-box{
overflow:hidden;
}
.inside{
overflow:hidden;
}
Is it trying to float? Add the following div below it:
<div style="clear: both;"></div>
Otherwise, the height of your button will not push down the rest of the content.
You need to add this clearfix to your CSS:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Then, you need to add clearfix to the classes of div#mf15. This fixed the issue for me.
Related
I need to find a way to clearfix a set of floated elements without extra markup.
For example, I have a 2 columns grid in section#main_features. Each div.feature has width: 50% and is float: left. What I want is to find a way to clearfix the rows without extra html markup (since I want to make a simple semantic grid).
<section id="main_features">
<div class="feature">
...
</div>
<div class="feature">
...
</div>
<div class="feature">
...
</div>
<div class="feature">
...
</div>
</section>
Note that the rows here are just a "concept" (each row is two .feature). I'm using a semantic approach to build this grid, therefore I don't want to need to wrap the columns of each row and then clearfix this wrapper. I'm looking for some trick to clearfix and break the row using only css - or scss, less, etc.
This problem seems to be more complex than it looks.
Thanks in advance.
I have been using the semantic group 'micro clearfix' which I found on CSS Tricks.
.group:after {
content: "";
display: table;
clear: both;
}
The CSS is similar to the above solutions, however the concept is that you can add it to any element which you wish to 'group' together and be followed by a clear. Eg:
<header id="masthead" class="group">
//content
</header>
The above link also has sub-IE8 rules.
EDIT My apologies, I just answered the title of the question, without properly reading your scenario. I would not use floats in this case. Instead, I like to use display: inline-block like so:
#main_features {
font-size: 0; /* this resets the default padding created by the inline-block rule below */
margin: -2%; /* offsets the positive margin below */
}
.feature {
display: inline-block;
vertical-align: top;
width: 46%;
margin: 2%; /* width + (2x margin) = 50%*/
font-size: 12px; /* because it is reset to 0 by parent */
}
The font is set to zero on the parent element because some browsers add padding to an inline-block element. The parent element also has a negative margin to offset that of its children. This allows the content to align with the rest of your page.
I have made a basic demo of this here.
You can use the css :after to do this, just by putting an invisible full stop after it, forcing the clear fix.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Alternatively, I just found this newer one from Beau Smiths answer here
/* For modern browsers */
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.container {
zoom:1;
}
If you have been applying clearfix with a class-name and the appropriate selector (.clearfix), then you can do the same with the selector #main_features
So if your normal clearfix style declarations look like this:
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
...then you can avoid having to apply the clearfix class simply by adding to the selector this way:
.clearfix:after, #main_features:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .clearfix, *:first-child+html #main_features { zoom: 1; } /* IE7 */
...and just leave your markup as-is.
It's an quiet old question but I just stumbled upon it while having a similar question. Anyways I solved it by using the nth-child pseudo selector to clear the float every third child within the container.
.main_features .feature:nth-child(3n) {
clear: left;
}
I'm trying to get a fixed width white <div> on a gray background (body), but everything is shown gray; the white is ignored. Code is on jsbin. Any ideas? I did this on previous websites, and there everything was peachy. I can't see any difference with what I'm doing here.
PS: I had to write the jsbin URL down, and manually type it here, since Firefox refused to copy it from the share popup to the clipboard. This also worked previously :-(
Your containers and sidebars are left floated, but they arent "cleared".
What you do is add a div
<div class="clearBoth"></div>
after your sidebar div.
and then in your css:
.clearBoth {
clear:both;
}
The floats are ruining it.
It is caused by the floats :-)
Basically #container don't have dimension because everything inside it are floated. No dimension = no background to appear
Adding overflow: auto to #container is one way to solve the problem (depends on how you exactly want the whole layout to appear).
body {
background-color: #CCCCCC;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
text-align: center;}
#container {
background-color: #FFFFFF;
display: inline-block;
margin: 0 auto;
text-align: left;
width: 400px; }
try these changes
Your problem is that by spec, contained DIV's are taken out of the flow of the document. Because of this, your container div is considered empty by compliant browsers.
Place the following code at the bottom of your stylesheet:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
Then make the change to your container like so:
<div id="container" class="clearfix">
On this site: http://walkman.pk/aserdus2/tagok.php
I have two background-images on the left and right side, which doesn't appear, and I can't figure it out why ?
Every other page of the website works fine. It seems that some <div> elements are not closed properly. When I watch it with chrome inspector, I see that the content div is very thin, but I don't understand the reason of this.
What should I do to show up the images?
You have only floating elements inside #content, so its height is zero. You can fix this by setting overflow to something other than visible:
#content {
overflow: hidden;
}
Voilà:
That's because both elements with class block are floating and therefore the element with id content has no height (which has the background images). So you need to give height to the content element (height: 250px) should solve the problem.
Add this to your #content {}:
height: 600px; (or however high the images are)
I tried it with Inspect Element and the pictures appeared.
Good luck!
Try
<div id="content">
...
<div style="clear:both"></div>
<!-- CONTENT END -->
</div>
OR
http://www.webtoolkit.info/css-clearfix.html
<div id="content" class="clearfix">
...
<!-- CONTENT END -->
</div>
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
I have a Map<Category, List<Link>> that i'm iterating over in my jsp:
<c:forEach var='entry' items='${categoryToLinkMap}'>
<div class="category_section">
<h2>${entry.key.name}</h2>
<ul>
<c:forEach var='item' items='${entry.value}'>
<li>
${item.label}
</li>
</c:forEach>
</ul>
</div>
</c:forEach>
With the following CSS
.category_section {
float: left;
width: 300px;
height: 200px;
}
What I'm trying to achieve is a maximum of 3 sections horizontally, any more than that wrapping under. My CSS works as I want with the one drawback being I have to set the height or the div sections are all over the place. If I set the height and a category contains many items then the links overlap.
What's the best way to achieve this using CSS? Any thoughts on a different approach? I'm very new to front-end stuff so if it could be done better please let me know.
Edit: Here's a quick mock-up of what I'm trying to do:
a different approach would be to use nested UL's and float left the li's of the first UL in the hierarchy.
with your code use the clearfix css hack to auto expand floated divs:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
What is Logically correct and W3C valid way to clear float?
zoom:1 is not valid by W3C and IE8 don't have hash layout problem
overflow:hidden and overflow:hidden
were not made to do this,as the spec
intended overflow to be used
<div class="clear"/> is not
semantically correct and i don't want to add extra markup.
clearfix hack generates content that
really hasn’t any semantic value.
I've asked many questions and read many articles on this issue but haven't find best way.
Using a clearfix
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
<div class="clear"/> is not semantically correct and i don't want to add extra markup.
That's why often a <br class="clear"> is been used. You basically want to have a linebreak between the float and the next element. True, it's not nice in the markup, but that's the payoff of using floats.
Alternatively you can also just set a clear: both; on the subsequent block element which you'd like to put in the next line.