DEMO
I've been trying to create to lists which the one floats to the left and the second floats to the right, and after them there's a content of the site like in the demo.
But the content goes up and I want to make him go lower. I tried the <br> but I'm sure that there's a better way to solve this problem.
Thanks in advance!
At first, you can't do lists with <div>, only with <dl>, <ul> or <ol> tags. You should read w3schools LISTS.
Back to your problem - you could use the clear:both which specifies what sides are allowed to float elements.
Float makes a lot of problem in the start for everyone, but when you understand the material, like in math - it's easy to use. I recommend you read this article. It explains very well what you need to know about floats; CSS Tricks - ALL ABOUT FLOATS.
Related
Let's just start with saying I understand the box model. Throughout my short time as a developer, I've tried to stick very closely to semantic html and use responsive design practices. I recently got a job at a new company as Jr. Developer, and my Sr. is religiously against padding. Like he doesn't want it used in any case whatsoever. He wants me to use set heights and widths on everything, and if I need to simulate padding, I have to add a child div using margins. For example:
<div class="caption" style="padding: 5px;">
Caption
</div>
Would need to become
<div class="caption">
<div class="captionContainer" style="margin:5px;">
Caption
</div>
</div>
I've tried to figure out why this would be, and how I could possibly explain why I think that's bad, but it doesn't work. It just seems so wrong to me. He's said that it's because padding stretches the width of an element, to which I responded with box-sizing:border-box.
I have to do what he says, but sometimes we talk about it, and he does seem somewhat receptive to my suggestions, but I don't think I'm saying the right things. Is it actually better? If it's not, why?
This question may get closed for being kinda discussion-y but this has been driving me crazy, and I don't know where else to turn.
Thanks in advance!
It's anything but better. There is no sense in trying to add padding to a box using other methods when a CSS property made for this exact purpose, padding, has existed since pretty much forever.
Anyway, one counter-example I can think of is the fact that adjoining vertical margins can collapse.
There are several ways to cancel margin collapse (heck, giving an element padding is one!), but these methods aren't designed for preventing margin collapse as much as they do so as a side effect, and there is no simple "off switch" for collapsing.
Authors who don't understand the nature and the purpose of collapsing will find themselves having a world of trouble dealing with it. If you're going to use margins to simulate padding you may be in for a hard time. It's not worth it.
Your given markup is a prime example of when margin collapse can happen unexpectedly and cause headaches: if there are no other styles on your .caption element (like borders or padding), the margins of .captionContainer will combine with those of .caption, resulting in something like this happening. In the same vein, it's a great counter-example of when trying to simulate padding using margins ends up backfiring.
Compared to the potential issues caused by margin collapse, I honestly find your suggestion of using box-sizing: border-box a good case against using margins to simulate padding, while preserving the exact widths that you need because it's designed to solve that problem. Browser support is fairly decent too (IE8+), so unless you're designing for really old browsers, it should be OK to use it.
There are several other potential pitfalls of using margins to do things that padding was clearly made to do, but margin collapse is one of the biggest issues you'll face.
Explain him this way:
Margin is on the outside of block elements while padding is on the inside.
Use margin to separate the block from things outside it, and padding to move the contents away from the edges of the block.
I have never had a problem with this in the past. For one reason or another, I cannot figure out how to do the following (jsFiddle included).
Add bullets to the list (they are not showing up).
Add styling to the list, so that the bullets of the list do not over lap the border of the div container of which they are inside.
These are both very basic desires, however something is just not right with what I am producing.
Please take a look here for more details.
Thank you,
Evan
You should add a padding-left to your <ul>, as the bullet points are being chopped off.
Demo: http://jsfiddle.net/DyeUy/11/
This article is a bit dated, but still a great one to look at for help with lists: http://www.alistapart.com/articles/taminglists/
Everyone knows that there are problems with the float CSS property: there are text jogs in some browsers, you have to clear them to pull parent elements around a floated div, etc.
Let's assume I build a layout and float everything, and I'm careful to control for the browser-specific bugs. Are there disadvantage to using float for everything? Will the page take longer to render, or is there a better practice?
I'm trying to improve my CSS layout building technique.
#kevin; float is not a bad practice; it depends on how you are using it & what the needs of the design are. There is no need to use it on everything when there is no need & it comes from experience.
Every browser renders float correctly.
yes if you use clear:both in your markup like this
<div style="clear:both"></div>
it's increase your markup which increase your page loading time.
. SO, use overflow:hidden in your css to clear it.
Floating everything can make for a great deal of inconsistency; depending on how wide a screen is and how tall certain elements are rendered, you can end up with a hodgepodge of screen jag.
For example, widening the screen would cause more elements to fit on the top line, so they would jump up. Items not in the top line will slide down, and then catch on the corner of an element slightly taller than everything before it.
Float is a handy tool, but it's no panacea; use with caution. Make yourself a sandbox site, and use something like Chrome's developer tools, or Firefox w/ Firebug to see what results you get when floating it all.
I dislike using floats because of these clearing issues. I generally use display:inline-block, and for my IE6/7 stylesheet for the same rules, I put zoom:1; display:inline
With inline-block, block elements flow like inline elements, while behaving like blocks. This I feel is more intuitive than breaking out of the flow like floats do.
I use this kind of layout on my twitter client: https://timshomepage.net/twitter
And here's the uncompressed stylesheet: https://static.timshomepage.net/css/twitter.css
I'm currently using 'float:left' to all of my tags when slicing. Whats wrong with it?
I think, the pros is I need not to do "clearing hacks" at all.
Sorry for my poor english.
I think by slicing he means starting a new line, it is true that adding float left to everything with the appropiate width will indeed induce a new line, what should happen if something needed to be of a negative margin, or float right, it would break your markup, you should check out your knowledge of tree structure in html, and avoid using floats where not necessary, instead use margins, relative positioning, or absolute, pages designed all in float are hard to appear correct in all major browsers as different broswers treat float irrespectively.
I stumbled upon this article
http://www.thefloatingfrog.co.uk/css/my-hatred-of-br-clearall/
When would one need to use that ?
Why is it evil ?
I don't understand the substitute syntax can you explain ?
Setting clear to both with not allow other elements to float on either the left or right side of the element. The class below is an easy way to add this anywhere.
.clear {
clear:both;
}
So when you want to clear something (that is, if you were to float the next element to the left, it would be below the current element and to the left, instead of left of it) you'd simply add the .clear class.
The problem with the following code is that if later on you decide that you don't want to clear everything after the 'something' class, then you have to go through your HTML and remove the br clear="all" wherever you have that 'something' class.
<div class="something">Cool content.</div>
<br clear="all">
<div class="other">Cool content again.</div>
Instead you could do something like this:
.something {
float: left;
}
.other {
clear :both;
float: left;
}
<div class="something">Hi!</div>
<div class="other">Hi again from below!</div>
That way if later on you decide to float all blocks with the 'other' class then you can just remove the 'clear:both;' from the CSS once.
I was about to post something snarky about you not reading the article, but when I saw that it was just a page of vitriolic rage with no explanation, I figured I'd answer.
It's because there are better ways of doing what you want to do -- namely, by using CSS in the way he does in the article, he has separated the semantics of the elements he's displaying from how he's displaying them. Why is this a big deal? Well, for one, he can more easily transform how his page looks when it's shown on different platforms (mobile, desktop) and media (screen, print, a screen reader for the blind), simply by editing CSS and not having to touch the document itself. This feature of CSS is pure gold.
On the other hand, if you use a construct such as this, you put in a hard constraint about your document's presentation that sticks around no matter what media or platform you're dealing with. What makes him so mad? Because once a developer has come in before him and used <br clear="all">, he has to take it out in order to get the benefits I just mentioned. That's why it's so frustrating. One bad developer can disable a whole host of development scenarios for every other developer who comes after.
As far as CSS goes, I have to say that it's a very difficult subject to just pick up without reading all about how it works. It's hard to explain how the clear attribute works if you don't understand floats. I had quite a hard time myself until I bought a great book on the subject.
When you have floated elements, the parent element can't calculate it's dimensions effectively and sizes incorrectly. Other items that follow floated items may also sit out of position. By clearing an element at the end of your floats, you correct alter this behaviour.
EDIT
Actually correct is probably the wrong word to use as this is what is supposed to happen and using the word correct suggests it is broken.
The author is just going off on a crazy rant about how the same thing can be accomplished using CSS on the DIV elements themselves. He's saying that br class="clear" is unnecessary.
It's also not a good practice because it mixes content with presentation. If a web designer wanted to re-theme the web application, he or she would need to modify the HTML to pull out all of the br clear elements, whereas if this was done as the author suggested, then the CSS files could be swapped out independently of the HTML, making their jobs easier and giving them one less thing to rant and rave about.
The rant is of course justified, as these simple, silly lines of code can actually cause a lot of headaches.
The idea is that your markup describes the information, and the CSS formats that information.
A dummy tag to clear floats isnt semantic, as it's only purpose is for layout reasons. There are other semantic ways of clearing floats that keep this separation. As commented below but here for clarity this is a good resource for semantically clearing floats http://css-tricks.com/the-how-and-why-of-clearing-floats/