HomeОбразованиеRelated VideosMore From: LearnWebCode

Full Width Background with Fixed Width Content (CSS)

213 ratings | 28011 views
Learn how to mix full width background containers with fixed width content containers. Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Html code for embedding videos on your blog
Text Comments (32)
Richard Abonyi (4 months ago)
https://css-tricks.com/full-browser-width-bars/
Richard Abonyi (4 months ago)
It's a shame that you don't do it semantically without extra markup/bloat.
Sandra Marquez (8 months ago)
Thank you! Such a great technique! =)
Richard Abonyi (4 months ago)
No, it's not. It uses extra markup which is unnecessary and just breaks semantics.
sadaf hasan Hasan (9 months ago)
Wow it’s very helpful thanks very much
Billy Lowe (10 months ago)
Can you "mix" these commands ?
Brian Bacc (1 year ago)
Hey I'm a noob and I really like your videos but, why didn't you simply do <p> width = 50% margin left/right = auto </p within a single div? That's what I did and I can't notice any difference (including with responsiveness) between ours
Brian Bacc (1 year ago)
this is the full code: HTML <div class="intro"> <p class="para-width"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea </p> </div> CSS .para-width { width: 50%; margin: auto; max-width: 700px; } .intro { background-color: blue; padding-top: 40px; padding-bottom: 40px; } Trying to understand the difference between your way and my way. Thanks man! really great videos (i've watched a few)
carl rummenge (1 year ago)
great video code would be great for beginners in html format thanks
ATmane (1 year ago)
that's what i am looking for, thanks a lot (y)
Dinosawer Gweaver (1 year ago)
can you do this with css grids?
Deximilijan Malic (1 year ago)
Thanks Brad ,yours tutorials its one of the best ! I do like this ,but I put in <p> ,and also works ! Like this: <p class="inner" ... Thanks again and keep up with good work!
Rupesh Vaingankar (2 years ago)
Vry nice n simple to understand tutorial Focus on specific topic .. Love it .. Thanks alot .. :)
MuscleSkills (3 years ago)
Do you have any video showing header and footer in width-min:100% . I would like to learn how to do it
Rina White (3 years ago)
I have been trying to find out what all the different web layouts are called.  In music we have many genres and subgenres.  You couldn't say this was an advanced grid layout, for example.  I am sure with all the different layout techniques/methods that they must have names assigned to them.  What is this style of website called?
Thank you for the lesson. GOD bless you.
Saoj1981 (4 years ago)
My divs can't seem to cover the full width of my browser. Is there a code you're using that I'm not seeing in this video?
mohammed nasrallah (4 years ago)
Great! Very helpful!
A A (4 years ago)
Y not just give some padding right and left ?
Ayomide Onalaja (4 years ago)
Great! Very helpful!
3van5 (5 years ago)
do u hv a tut on how make just a full width background? I think it'd be nice to add ur tut resource too. thnx
polas anderson (5 years ago)
This one is good to use too. #intro{position:relative; with: 500px;} and stay in it's place as you showed in the video ;)
thanks again, maybe at the start of your tutorials you could say your first name, like "Hello everyone, Jake-John-Alexander here and today we will learn how to..." just a suggestion, it is kind of weird to call you  "LearnWebode" :D
Does this technique can work somehow if you put background image in the div also full width and the background to be responsive?
M. Francis (5 years ago)
Definitely learned something. Thanks!
The Redds (5 years ago)
Super helpful! Thank You! :)
scream198 (5 years ago)
Hey! I recently discovered your channel and saw a few of your tutorials and they're great. Thanks. About this example, I was wondering if you couldn't just give a class name to the p tag and set the width and the margin to it in the CSS instead of creating the divs? Or is there any downside to that? Also, if I'm saying something very wrong, cut me some slack because I started HTML and CSS very recently eheh.
Aji Rose (6 years ago)
thanks. its very nice
Kazbaran EmBe (6 years ago)
Do you know Javascript? because if you do I would love a tutorial
Paul Elksnis (6 years ago)
Very interesting! Looking forward to seeing the next videos you mentioned :) Thanks!
MickJnr7 (6 years ago)
Yeah, i only have a pretty basic understanding of this. Please do this :)
Ziyo Shams (6 years ago)
Good job dude. If you could explain clearfix in details that would be awesome.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.