Usually when I have floating elements inside a container div, I'll have something like this:
<div class="container">
<div style="float: left;">content</div>
<div style="float: left;">content</div>
<div style="clear:both;"></div>
</div>
I find it extremely annoying and ugly to have that <div style="clear:both;"></div> on every fluid piece of layout. So I tried to do something like this (using css but, for simplicity):
<div class="container" style="clear:both;">
<div style="float: left;">content</div>
<div style="float: left;">content</div>
</div>
And did not work. Is it possible to make it work by adding something to the .container class??
.container {
overflow: hidden; // causes the container to wrap its floated children
}
Edit: Using a clearfix is only necessary in certain cases as explained here. overflow: hidden is the superior method.
There is a technique called clearfix that does not require a clearing element, and has been built with a lot of care for cross-browser compatibility. That leads to a lot of browser-specific CSS, but that can be integrated into an existing style sheet.
Related
This is something that has been bugging me since the first time I learned HTML.
<style>
.test{
display:inline-block;
background-color:#aaa;
padding:5px 10px;
margin:0;
border:0;
}
</style>
<div class="test">Hello</div>
<div class="test">Woooorld</div>
<div class="test">HTML</div>
<div class="test">CSS</div>
I will definitely want to keep the elements in different lines, because else it becomes unreadable. But HTML turns the enters into spaces, which ruins the layout. Float causes a whole array of new problems or simply is not viable for what I am trying to do.
Is there really no better solution than to implement some hacky negative margins for everything except the first element?
Different ways to solve this problem.
link: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
1st Way:
<div class="test">Hello</div><div
class="test">Woooorld</div><div
class="test">HTML</div><div
class="test">CSS</div>
or
<div class="test">Hello</div
><div class="test">Woooorld</div
><div class="test">HTML</div
><div class="test">CSS</div>
2nd Way:
<div class="test">Hello</div><!--
--><div class="test">Woooorld</div><!--
--><div class="test">HTML</div>
<div class="test">CSS</div>
3rd Way:
use negative margins.
display: inline-block;
margin-right: -4px;
4th way
Skip the closing tag
<div class="test">Hello
<div class="test">Woooorld
<div class="test">HTML
<div class="test">CSS</div>
5th way
Set the font size to zero for a wrapper div.
6th way
Maybe they don't need to be inline-block at all, maybe they can just be floated one way or another.
Just change your HTML slightly:
<div class="test">asdasd</div
><div class="test">asdasd</div
><div class="test">asdasd</div
><div class="test">asdasd</div>
Demo. As all <div>-s in your current layout are inline-block elements, browsers are treating the whitespace between them as the same-class - inline - elements, allocating some visual space for them.
I would prefer to let the elements float instead of changing the HTML. CSS is for displaying.
Working:
<style>
.test{
display:inline-block;
float: left;
width:50px;
height:50px;
background-color:#aaa;
}
</style>
HTML:
<div class="test">asdasd</div>
<div class="test">asdasd</div>
<div class="test">asdasd</div>
<div class="test">asdasd</div>
My own solution is to have on-the-fly HTML minification through the PHP script - it strips all newlines and tabs from the HTML source before sending it to the browser (unless said whitespace is inside an element that renders whitespace literally, such as a textarea or any element with white-space:pre-wrap or similar)
Also should work...
<div class="test">asdasd</div><!--
--><div class="test">asdasd</div><!--
--><div class="test">asdasd</div><!--
--><div class="test">asdasd</div>
Wrap your divs inside a container div and set the container font-size:0;, then set the child divs font-size:14pt for example, This solves your issue.
And here is a working fiddle
maybe this is a stupid question but I have a doubt about CSS clear propery use.
I have this template: http://onofri.org/example/WebTemplate/
Why if I delete (you can try with firebug) the propery clear: both from the #footcontainer div I obtain that this div is placed at the top (it seems almost below the header and below the two columns)
My idea is this thing happens because the two columns #content and #sidebar are floated to the left and without setting clear: both on the #footcontainer div the browser try to put also this div on the right of the #content* div but have no space and put at the top.
Is this a right intuition or am I missing something?
Tnx
Andrea
This is happening because everytime you float an element, its container loses its auto height.
If you want to prevent that from happening, there are somethings you can do:
Set a given height to the container
Ex:
<div class="my-container" style="height: 100px">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
</div>
Be aware that if you have set a given height, the div won't resize as the content becomes higher than the container.
Append a div with style="clear: both" right after the floated elements
Ex:
<div class="my-container">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
<div style="clear:both"></div>
</div>
Yeah, it works. But only noobs do it like that. It's not elegant and pollutes your code.
Set overflow: hidden to the parent container
<div class="my-container" style="overflow: hidden">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
</div>
This one is great, but you are in danger if you have someting positioned absolutely and have to move it outside the parent div, for example. You'll have an unpleasant surprise.
Use the ClearFix Hack.
This is the way I do it: easy to implement and works like a charm. Check this link out: http://www.positioniseverything.net/easyclearing.html;
If you mind about not having valid CSS (like me), you can target IE browsers with a different stylesheet and conditional comments, for example.
Further resources about the subject:
Quirks Mode Site: CSS Clearing
http://www.quirksmode.org/css/clearing.html
Chris Coyier's ClearFix Tutorial
http://css-tricks.com/snippets/css/clear-fix/
I see you code
your code is too complicated according to me but any way you can used to this css than your problem is solve
Used to this css
#c{position:relative;}
#c:after {
position: absolute;
content: "";
left: 0;
right: 0;
bottom: -42px;
background: url('http://onofri.org/example/WebTemplate/images/footerRight.jpg') no-repeat -3px 0px;
height: 43px;
}
#footerRight{display:none;}
You have no height set on your container. If you change the height of container to the height of its' contents, which in this case is 596 px then when you take away the clear both property on the footer it won't move one iota.
I think it's because if you float an object, the parent object doesn't resize accordingly.
For example, if you had:
<div class="1px-border">
<div class="float">
<h3>TEST</h3>
</div>
</div>
The border would be completely flat, and not resize to the header. You could fix it by having overflow: auto in the container div.
That said, I could be massively wrong.
<div style="float:left;">
column 1
</div>
<div style="float:left;">
column 2
</div>
<div style="clear:both;"></div>
I'm used to writing clear:both. But I heard in Twitter Bootstrap there is something called "clearfix"? On which element should/would I apply "clearfix"?
You probably only have to do:
<div class="container">
<div class="row">
<div class="span6">column 1</div>
<div class="span6">column 2</div>
</div>
</div>
clearfix should not be necessary.
using css you can simple use the after psudeo
.class1:after, .class2:after //append as many as you like
{
clear:both;
*zoom:1;
height:0;
visibility: hidden;
display:block;
}
alternative(providing children are not using the position selector)
(parent-elemts){overflow:hidden;}//bit of a quick fix!
keep unwanted markup out of your html file
Edit: sorry! for some reason the add comment button or upvote button is not working for me tonight.
To append my answer to answer your other question:
twitter bootstrap you say uses a .clearfix class, which is similar to the css I provided below, however their method needs to be added to the element, ie: "element class="clearfix" OR similar, where as css pseduo's we dont need to add this extra bit of code to our document. Take note however, not all browsers support css pseduo's.
I am trying to create a 4 column <div> layout.
Why are the row containers not drawing a border around the respective row?
Also, is this a good approach, as in is my css written well to be fluid and for dynamic resizing of the browser window?
Any suggestions or help would be most appreciated.
Here is my current attempt.
You need to set the overflow to auto when using float. http://jsfiddle.net/gJJHs/
The problem seems to be that you are floating your columns, and when you float things, they take up effectively zero space.
I think the solution is to cancel the float in you "last" class and add a "dummy column" to each row.
This CSS seems to work:
.col
{
float: left;
width: 25%;
}
.last{
clear: left;
}
.row{
border: 1px solid green;
}
Revised HTML (with dummy last column):
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="last" />
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="last" />
</div>
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
As such, the border will seem like it is not bordering anything :( Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
As others have said, if you add overflow: auto; to your .row class, it'll take care of the problem. Here's another article that explains why to use overflow.
http://www.quirksmode.org/css/clearing.html
I hope this helps.
Hristo
it's the float left. That takes the divs "out of flow" and it's drawing the border around empty space essentially
Yet another option, in addition to the other answers, is to add overflow: hidden; to your .row.
The reason for the behavior you saw is that float takes the div outside of the normal flow. The div then essentially takes up no space in the document.
This makes sense if you think about the ostensible purpose of floating an image in order to wrap text around it. The next p tag (for example) is positioned as if the floated image wasn't there, i.e. overlapping the image. Then, the browser wraps the text within the 'p' tag around the image. (If the floated image was not "removed from the flow", the p tag would naturally appear below the image—not giving the desired effect.)
Here's how I'd write the code.
HTML:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="last">8</div>
</div>
CSS:
.col
{
float: left;
width: 25%;
}
.row{
border: 1px solid green;
overflow: hidden; /* "overflow: auto;" works just as well instead */
width:100%; /* Helps older versions of IE */
}
Add a "float:none;clear:both" to your .row and you'll see the rows appropriately. But for the fluid behavior and design that you are looking for, you'll want to apply some javascript (like jQuery Equal Height: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/) to be consistent across browsers without a ton of CSS hacking.
<div style="background-color:black">
<div style="float:right">
Test message
</div>
<div>
This will show 'Test message' with white background because the parent div didn't fit the content.
How can make the div fit to the content? (without using table, or display:table since it's not supported in IE)
You can also do this:
<div style="background-color:black; overflow: auto;">
<div style="float:right">
Test message
</div>
<div>
It's a cleaner way to do the clearfix :)
A common solution is to put a <br style="clear: both;"> after the floating element to clear the float and cause the parent element to wrap the elements.
<div style="background-color:black">
<div style="float:right">
Test message
</div>
<br style="clear: both;">
<div>
Apart from the problem, I'd suggest to put the styles in a separate CSS file, if not realised yet.
Sounds like this is the old clearfix issue. This is almost a total necessity when using css and floats for layouts. See http://www.webtoolkit.info/css-clearfix.html for a brief description and fix. Or for a more in depth look, see here http://www.positioniseverything.net/easyclearing.html