I've watched a LOT of videos about CSS and yours is by far the clearest and easiest to understand, no long boring introductions! I am so happy I found you, I plan on watching every video you have made on learning css! Thank You So Much!!!
Connor, great question. You need to "clear" the floats of your two paragraphs. You can either add an empty element (such as a div) below the P's in the markup and style them with "clear: both;" or you can use a "clearfix" solution on the container / parent element. I have a video on "Clearing Floats" which should help. Thanks!
You're simply awesome. Brad, your videos helped me a lot, and your voice is cool. >w> Also, your video was 9 minutes 59 seconds, PERFECT TIMING OMFG HOW GOOD ARE YOU?!
for the #nav li , how do you feel about using display: inline-block; as oppose to float-left? update : sorry didn't realize this video was over 7 years old!!!
Is the method in this video the method you use when building a website from scratch? Meaning, do you generally start with the HTML and content, then move on to the styling (CSS)? I'm just starting out and want to learn good, efficient work flow. What works best for you? Perhaps a video series that pulls all this know-how together, showing proper work flow by building a modern website from start to finish would really give perspective and "glue" all the concepts presented in other vids. TY!
I just love your videos! How can you remember what all the code does? Like margin, padding, and so on. How? ;) I hope you will keep up making tutorials, because you are really really good at it!! Sincerely, Robin Lilfelt
@DuoEx - Are you adding a class of "clearfix" to the UL element, and also including the clearfix CSS code provided in the video's description? That should do the trick in virtually every web browser. If it still isn't working maybe you can upload your code somewhere and I can take a look.
@RobinLilfelt Thank you! It's great to know that someone saw this and enjoyed it :) Also, thanks for the compliment; this was just sort of an experiment to see if I could create decent tutorials. I will definitely try to make more after reading your comment!
Where did you learn to code like that? It is beautiful. Fully annotated, everything is inside divs, well written. I am very new to HTML and CSS and I am looking for books on good practices. Any advice? (not codeacademy.com please.)
Love the tuts!! I think I am finally understanding the concept.. But how would I align the menu directly under the 'header' if it was an image? I noticed there are like two line of spaces on there.. I also wanted some text at the very very very top, but was not able to do it.. I know it's prob a simple thing, but can't figure it out.. I firgured out how to get the 'container' to be at the very very top though..
Great tutorial, and great series, and might've been aptly called "for dummies" :-). Would be great if you could annotate the video to explain things like "float". I am wondering what does "float mean", at 2:50 for instance.
Awesome Video, really helped me, keep them up. I just had one problem, when I went to float the two paragraphs by each other, the background of the paragraph would be the same as the body background, as if the container element just vanished with it's white background. I partially fixed it by just making the container height:500px, but i want to use the auto feature. Any Help?
Hey, First of all thank you for the excellent explanations. I browse with Google Chrome, and my operating system and Windows 7 I copied the code of clearfix I also tried with ie 8 and there it does not work Can you help with? Thanks Izik
Thanx for this tutorial it was really very helpful in learning the principles of Web layout for beginners.however moving the navbar to the left corner using #nav{ margin 0; padding 0;} didn't work I had to pt #nav ul{margin 0;padding 0} all the others were perfect thanx
The video is great, but I'm still confused when you clearfix the nav section. I tried it in 3 different browsers and it doesn't change to the way that you did it. Can you help me on this one?
You must use an element located AFTER the elements that are floated in order to clear their floats. But this is exactly what the instructor is doing in this video by using the 'clearfix' method, which consists in inserting an INVISIBLE element (here, a simple 'dot') after the floated elements, and to apply a 'clear' property to it. The advantage of clearing your floats this way is that you apply in fact the 'clearfix' class to the PARENT container of the floated elements (thanks to the pseudo selector ':after'), so that you don't have to rely anymore on a real third element located below (and that could itself contain some meaningful content) to clear your floats.
By a html book and CSS book.Clear:left; clears objects from left of the object. Clear:right; lears object from the right of the object. Clear:both; you should already now. It works well separating the footer, or whatever from everything else.
Just in case someone is watching this tutorial in 2019: it's floating on the left. It turns out the .main div is wide so it looks like it's on the right but it's sticking to the left div (hence it's floating left ;) )
I've watched a LOT of videos about CSS and yours is by far the clearest and easiest to understand, no long boring introductions! I am so happy I found you, I plan on watching every video you have made on learning css! Thank You So Much!!!
Connor, great question. You need to "clear" the floats of your two paragraphs. You can either add an empty element (such as a div) below the P's in the markup and style them with "clear: both;" or you can use a "clearfix" solution on the container / parent element. I have a video on "Clearing Floats" which should help. Thanks!
your tutorials are some of the best work I've seen! you are a very good teacher.
dang. Why is this not so damn popular? but thanks! your tutorial helped me a lot.
That was a very helpful tutorial at a good pace. Thank you for your effort.
You're simply awesome. Brad, your videos helped me a lot, and your voice is cool. >w>
Also, your video was 9 minutes 59 seconds, PERFECT TIMING OMFG HOW GOOD ARE YOU?!
great info More on easy Css. there are some of us there that are dumbfounded by it all. Keep up the good work.
Nice & simple ...just the way I like it!
for the #nav li , how do you feel about using display: inline-block; as oppose to float-left?
update : sorry didn't realize this video was over 7 years old!!!
10x again bro really nice and useful + short in time !
Really like your videos, but just have one question. Why having the width in px instead of %? doesnt that make problems when using a phone to watch?
Thanks! It's a great help! it's simply awesome!
Is the method in this video the method you use when building a website from scratch? Meaning, do you generally start with the HTML and content, then move on to the styling (CSS)? I'm just starting out and want to learn good, efficient work flow. What works best for you? Perhaps a video series that pulls all this know-how together, showing proper work flow by building a modern website from start to finish would really give perspective and "glue" all the concepts presented in other vids. TY!
I just love your videos! How can you remember what all the code does? Like margin, padding, and so on. How? ;)
I hope you will keep up making tutorials, because you are really really good at it!!
Sincerely,
Robin Lilfelt
@DuoEx - Are you adding a class of "clearfix" to the UL element, and also including the clearfix CSS code provided in the video's description?
That should do the trick in virtually every web browser. If it still isn't working maybe you can upload your code somewhere and I can take a look.
@RobinLilfelt Thank you! It's great to know that someone saw this and enjoyed it :) Also, thanks for the compliment; this was just sort of an experiment to see if I could create decent tutorials. I will definitely try to make more after reading your comment!
Where did you learn to code like that? It is beautiful. Fully annotated, everything is inside divs, well written. I am very new to HTML and CSS and I am looking for books on good practices. Any advice? (not codeacademy.com please.)
Love the tuts!! I think I am finally understanding the concept.. But how would I align the menu directly under the 'header' if it was an image? I noticed there are like two line of spaces on there.. I also wanted some text at the very very very top, but was not able to do it.. I know it's prob a simple thing, but can't figure it out.. I firgured out how to get the 'container' to be at the very very top though..
Please I know its late but can you tell me which screen are you using? The resolutions ? I am working on a laptop
i did learn something. thanks dude. subscribed :)
Great tutorial, and great series, and might've been aptly called "for dummies" :-). Would be great if you could annotate the video to explain things like "float". I am wondering what does "float mean", at 2:50 for instance.
Great tutorial, thank you!
LearnWebCode Why you put main and side in Class rather than in an ID? And is it necessary to use Classes in ID? Please explain
Great teacher!
I couldn't get the second column in why is it not separating?? and moving to the side
Awesome Video, really helped me, keep them up. I just had one problem, when I went to float the two paragraphs by each other, the background of the paragraph would be the same as the body background, as if the container element just vanished with it's white background. I partially fixed it by just making the container height:500px, but i want to use the auto feature. Any Help?
This video need more view. This video help me a lot!!
Hey,
First of all thank you for the excellent explanations.
I browse with Google Chrome, and my operating system and Windows
7
I copied the code of clearfix
I also tried with ie 8 and there it does not work Can you help with?
Thanks
Izik
Thanx for this tutorial it was really very helpful in learning the principles of Web layout for beginners.however moving the navbar to the left corner using #nav{ margin 0; padding 0;} didn't work I had to pt #nav ul{margin 0;padding 0} all the others were perfect thanx
awesome man, keep it up
Thanks a lot!! I subscribed!
The video is great, but I'm still confused when you clearfix the nav section. I tried it in 3 different browsers and it doesn't change to the way that you did it. Can you help me on this one?
Hi when you use what is that mean exactly ? what is meta's job in there ?
Thanks for the video it helped me a lot, but I also would like to know how to make this website: 0:18.
Very good
sorry, Why don't we just use {clear: left} for the element after "nav" ? Thanks
You must use an element located AFTER the elements that are floated in order to clear their floats. But this is exactly what the instructor is doing in this video by using the 'clearfix' method, which consists in inserting an INVISIBLE element (here, a simple 'dot') after the floated elements, and to apply a 'clear' property to it. The advantage of clearing your floats this way is that you apply in fact the 'clearfix' class to the PARENT container of the floated elements (thanks to the pseudo selector ':after'), so that you don't have to rely anymore on a real third element located below (and that could itself contain some meaningful content) to clear your floats.
my background color is not working any help
i dont understand the Clearfix part.can u help me ?
+Yasar Yousuf .
it is tricky i think.
do like that. he said it is his preferred method.
+Yasar Yousuf just copy the clearfix code and save it somewhere in your computer... youll need it every now and then.
By a html book and CSS book.Clear:left; clears objects from left of the object. Clear:right; lears object from the right of the object. Clear:both; you should already now. It works well separating the footer, or whatever from everything else.
as a beginner you dont have to worry much about it. just use it.
gradually you will began to understand how it works
.side {
width: 300px;
float: left;
}
why it floats to the right?
Just in case someone is watching this tutorial in 2019: it's floating on the left. It turns out the .main div is wide so it looks like it's on the right but it's sticking to the left div (hence it's floating left ;) )
nevermind, figured it out!! :)
im not understanding this tutorial, sorry, just starts to quick in this one
this is damn old. ... too much things updated
+Hracho Avagyan do you have a link for latest version of css styling?