- This topic is empty.
-
AuthorPosts
-
June 18, 2014 at 7:45 am #173045
RickyYoder
ParticipantLately I’ve been wondering if it’s good practice to set a maximum width on the <html> and <body> elements.
I’m wondering if it’s okay to do this because if there is a max width to the html and body tags, there is blank space leftover, and with that blank space, only FIXED elements still hit the corners of the browser window if it’s coordinates are 0,0. This would be perfect for fixed sidebars on wider devices, adspace, etc.
Absolute positioned elements, however, still follow the rules and go to the top left/right corners of the constrained <body>.
I’m afraid that this whole business with fixed elements not following this rule is a mistake, and that it will be removed as time goes on.
So is is this practice okay? I want to make sure before I just jump right in. Thanks.
-Ricky YoderJune 18, 2014 at 7:59 am #173047Paulie_D
MemberLately I’ve been wondering if it’s good practice to set a maximum width on the
<html>and<body>elements.Never seen the need when I can just use a wrapper and define the width on that.
June 18, 2014 at 8:04 am #173049ParticipantWell, this method does save you from using a wrapper, meaning less code, which is one of the reasons why I really like this. Instead of wasting time typing out a div tag with inline style or wasting a CSS rule on #wrapper, you just style the tags through CSS.
Not that it’s much more efficient or anything. I’m just saying it looks nicer when there’s a sweet getaround like this.
June 18, 2014 at 8:42 am #173051Memberwasting a CSS rule on #wrapper, you just style the tags through CSS.
What the difference between a CSS rule for a wrapper and for the body.
Nothing…except that ‘body’ is shorter than ‘wrapper’.
By using a wrapper I then have access to using multiple backgrounds on my html and body and wrapper if I so choose.
Also, I can choose to have an element outside my wrapper such a full width header or footer or any other full width item I might want.
You can’t do that if your body isn’t full width.
I suspect in the long run it’s a matter of choice but one ‘extra’ div has never been that much of a hassle to me.
June 18, 2014 at 8:53 am #173054ParticipantOh I know that. I’m just saying that it’s just a teensy bit shorter and whatnot. No huge difference.
In the case of fixed elements still hitting the corners of the window (and not a constrained body), is it something I could take advantage of or something I should avoid?
June 18, 2014 at 9:18 am #173055MemberHere’s what I mean by not being able to do full width bars with the body restricted
http://codepen.io/Paulie-D/pen/kBHIa
In the case of fixed elements still hitting the corners of the window (and not a constrained body), is it something I could take advantage of or something I should avoid?
Depends on your particular requirements…I prefer a wrapper others may not.
June 18, 2014 at 10:15 am #173062ParticipantWell, you technically can have a full width bar (I’m assuming you mean for navigation). You set the position of a div to fixed, then force the width to be the whole width (the actual window width) by setting it’s width to 100%. Unfortunately, this means you must have a fixed position for navbar, which not everybody wants. I found that by editing the reduced test case from my first post.
June 18, 2014 at 12:59 pm #173071MemberWell, you technically can have a full width bar (I’m assuming you mean for navigation).
Actually, no..I meant a full width header (which i suppose you could fix with positioning…or a full width footer or even something full width in the middle of my page with constrained content above and below.
Trying to do that the way you suggest would lead you down a positioning rabbithole that just isn’t worth the hassle.
I like having an ‘inner’ class where I can center and constrain content if required…but there other techniques….it’s all pretty much the same.
June 18, 2014 at 2:05 pm #173080ParticipantOh I see what you mean. Well, again, our methods are very similar. It’s up to preference and what one needs I guess.
June 19, 2014 at 7:18 pm #173210ParticipantThank you for your input on this. I am aware that the things I did in the test case are “bad”–I just wanted to throw something together really quickly. And I used inline CSS just because it’s a test case and not a real website. I use inline styling sparingly. I know the cost of using it. Thank you for pointing it out though.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.