dCode_Understanding CSS Positioning

HTML & CSS
102

Not quite — it’s still missing in your demo Result.

By the way, this post is feeling unloved! :slight_smile:

103

It seems to be in place for me. Maybe you had an old window open.

Must have missed that as the numbers got confusing.:slight_smile:

104

Not really:

1280×1024 82.1 KB

105

Ok, My mistake I had two windows open and lost the changes.:slight_smile:

106

Example 42:

.wrap42 {display:flex;}
.wrap42:before {content:""; margin: 0 -50px 0 100%;}

**Example 43:** 
.wrap43 {display:flex;}
.wrap43:before {content:""; width:100%;}
.wrap43 .box {flex-shrink:0;}
3 Likes
108

Example 44:

.wrap44 {text-align:justify; text-align-last:justify;}
.wrap44:before {content:"\00A0";}
.wrap44 .box {display:inline-block;}
3 Likes
109

Keep them coming. We’ll get to 50 soon.

(I know there are loads that could be done with grid but are basically the same as previous examples but using grid.)

2 Likes
110

Example 45:

.wrap45 {display:flex;}
.wrap45:before {content:""; flex-basis:100%;}
.wrap45 .box {flex-shrink:0;}
1 Like
111

Isn’t that just another way to set the width to 100% as in #43? :wink:

2 Likes
113

Yeah: just another way to skin our cat! :smile_cat:

1 Like
114

I have crazy ideas to put the red box on the right side of the page, but I’m not sure if they can fit your demo without touching the HTML. For example:

.wrap {width:50px; margin-left:auto;}

or

.wrap {float:right;}

115

Yes its a valid approach but I think it is essentially the same as #1 and #2 except you are moving the wrapper. I don’t think it brings anything new to the understanding as this is not a quiz as such.:slight_smile:

Applying the same rules but to different elements doesn’t really teach us anything new which Is why I mentioned before that we could do a lot of the same things we’ve done here but just using grid but I would rather avoid too much duplication.

3 Likes
116

Makes perfect sense! :+1:

3 Likes
117

Example 46 (Not working in Microsoft Edge):

.wrap46 {text-align:end;}
.wrap46 .box {display:inline-block;}
3 Likes
118

OK Added now :slight_smile:

Also added this just for fun :slight_smile:

.wrap47 .box {display:none}
.wrap47:after {	content:"47";display:block;	width:50px;	height:50px; line-height:50px; background:red; text-align:center; font-size:20px; font-weight:bold;color:#fff; margin-left:auto;}
3 Likes
119

Another fake box in place, also just for fun. :smiley:

If you like. :slight_smile:

.wrap48 .box{ visibility:hidden; position:relative}
.wrap48 .box:after{ visibility:visible; position:absolute; top:0; bottom:0; left:calc(100vw - 100% - 37px); width:100%; background:inherit; content:"48"}

(Scrollbar 17px)

Edit)
Forgot the max-width on .wrap. :blush:

.wrap48{ max-width:none}
3 Likes
120

Thanks Erik now added:)

1 Like
121

Couldn’t resist when I finally found a use for the “tab-width”, though it is yet only implemented in Chrome and Firefox:


/* Chrome 42 and Firefox 53 */
.wrap49{ display:table; width:100%; max-width:none; white-space:nowrap; tab-size:calc(100vw - 87px);}
.wrap49:before{ white-space:pre; content:"\09"}
.wrap49 .box{ display:inline-block}
3 Likes
122

Word-spacing is a surprisingly useful property, I think. :slight_smile:

So why not:

/* (just because) */
.wrap50{ max-width:none; word-spacing:calc(100vw - 87px); font-size:0}
.wrap50:before{ display:inline-block; content:""}
.wrap50 .box{ display:inline-block}
3 Likes
123

All added but my brain is starting to hurt :slight_smile:

3 Likes