Is CSS Broken? DIV Margin Issues

[JTeagle]

I've been having some problems with getting what I wanted out of divs, and I am forced to come to the conclusion that CSS is broken. I've attached an HTML file to demonstrate the problems - you will need to edit its source HTML and follow the instructions to see the problems. I fully accept that *I* may be the problem rather than CSS, and at least all major browsers are suffering the same problem, but I really feel that CSS is at fault here and I was wondering what others thought? One challenge is to get a box to fit within the browser window (no scrolling required) with a 10 pixel border *all* around (no matter what size the browser window becomes), and another challenge is to get a fixed-width box to anchor itself to the right side of the browser window so that it is unaffected by scrolling (i.e., fixed positioning). In neither case are you allowed to use tables, and for the right-anchored box you're not allowed to use a fixed left position / margin (in other words, changing the width of the browser should keep the box anchored to the right). (This is not homework, BTW, I left school / college / university years ago! It's just what caused me to write this post.)

css_issues.html

[niche]

CSS is not broken. Please post your css and html in a new post using the code tags and we'll be glad to help you.

[dsonesuk]

When using positioning, the very least you should use is one vertical property, along with a horizontal property, usually top and left.

[JTeagle]

When using positioning, the very least you should use is one vertical property, along with a horizontal property, usually top and left.

If you're trying to position a div relative to the left / top edge of the window, then left: and top: would work; so should margin-left: and margin-top:. My issue is more with margin-right: on a page that wants to adapt to any browser width (rather than use a fixed content width), you can't use left: for a right-anchored div - so you should be able to use margin-right: to inset it from the right edge instead. That's what seems to be not working for fixed-position divs.

[dsonesuk]

If you wish to have to element, positioned top, right you would obviously use top, and right, if you use 100% height/width for fixed positioned element you woud get exact width and height of browser viewport window, plus that of any margins used.margin-left: auto; does not, or ever forced a block element to the right, only when used together with margin-right: auto; it will centre the element horizontal, but if either side is substituted with any value other than auto, it breaks, and returns to 0 value, and the other-side takes on the measurement assigned to it. To fill the entire screen you would use top:0; left:0; right:0; bottom:0; this tells it to fill the space available to it, and if margins are used the edge of this element is forced inward away from browser viewport window edges. it is not fixed to actual size of browser viewport window itself, using 100% width/height.

[JTeagle]

margin-left: auto; does not, or ever forced a block element to the right, only when used together with margin-right: auto; it will centre the element horizontal, but if either side is substituted with any value other than auto, it breaks, and returns to 0 value, and the other-side takes on the measurement assigned to it.

(Funny you should use the word 'breaks' - kind of my point, isn't it?) I consider that a failing, if we're going to say it's not a bug. If you supply a margin-right value, and a fixed div width, then margin-left:auto should be perfectly capable of calculating the remaining space of the current window and pushing the div to the right side.

and if margins are used the edge of this element is forced inward away from browser viewport window edges.

No - that's one of the problems, as the samples showed. It does not obey margin-right when you use width:100%.

[dsonesuk]

???? but why use margin-left: auto; to move it the right, in the first place, that is what float is for, it breaks/fails because you are trying to make it do something its not clearly intended for. if athletes started the hundred metres at the 50metres from the finish line, they would finish the race a lot faster, but rules state for 100metre race they start at the start line, this is the same for margins, margins with auto, left and right used on block element with fixed width will centre this element within a parent element by using a value on both sides that is equal. else 'auto' will be ignored and any value set will apply a margin on the outside of the element to the value you specified. by default every element position is determine by the left edge of browser window, as when you add elements they will always show to the left side. AS STATED BEFORE, your browser window is 1024px wide, you create a block element using position: fixed; and use width:100%; that elements width will be 1024px in width, you now apply margin: 0 50px; which gives you 1024px + 2 x 50 = 1124px width, this elements left edge will start at the leftmost edge of browser window, it will show the left margin of 50px, pushing the 100% width (1024px) element to the right with the remaining 50px margin at the end, the position fixed element is completely undetectable by the browser window, so no scroll bar appears and it just moves beyond rightmost edge.

[ShadowMage]

I think dsonesuk may be overthinking this a little bit (no offense, dsonesuk )

another challenge is to get a fixed-width box to anchor itself to the right side of the browser window so that it is unaffected by scrolling (i.e., fixed positioning).

This one's easy:

#fixed_right {  position: fixed;  /*width and height*/  right: 0px;  top: 0px;}

This will fix the element to the top right corner of the browser window. If the window is resized, it will remain in the top right corner.

One challenge is to get a box to fit within the browser window (no scrolling required) with a 10 pixel border *all* around (no matter what size the browser window becomes)

This one's not so easy. At least, not if you want to support older browsers. Any browser that supports CSS 3 is a simple fix with box-sizing:

#fitted_box {  box-sizing: border-box;  height: 100%;  width: 100%;  border: 10px solid black;}

I'm not even sure if it's possible to do for other browsers.Unless, by "border", you're actually referring to a margin. In which case, you could change the border color to transparent or use padding, but for the sake of older browsers it would be best to use something like what dsonesuk is suggesting. Make the element fixed position and set the top/left/bottom/right to 10px and it should work (I think).

[dsonesuk]

#fixtop { position:fixed; left:0; top:0; right:0; /*margin:10px; with or without margin your choice*/}.right, .left {height:100px; width:100px;}.right {float:right; background-color:#CC3333;}.left {float:left; background-color:#000033;}<div id="fixtop"><div class="left"></div><div class="right"></div></div>

[ShadowMage]

Well, I honestly didn't think using the margin with fixed positioning would work, but it does (at least in FF). At any rate, I think we've proven that CSS is, in fact, not broken. At least, not this part of it (yes, there are certain parts of CSS that are "broken" but these are slowly being "fixed").

[JTeagle]

This one's easy:

#fixed_right {  position: fixed;  /*width and height*/  right: 0px;  top: 0px;}

This will fix the element to the top right corner of the browser window. If the window is resized, it will remain in the top right corner.

Agreed. (And yes, I meant margin, not border; slip of the tongue.) The problem was that I had started to think of margin-right and its counterparts as being on the *outside* of the element, thus being used to position it (because of the business of width being just the width of the content, and margin-left:auto / margin-right:auto centering horizontally); once I realised my mistake and corrected that, suddenly things worked. I did say right from the start that I accepted *I* might be the problem {:v) I still think auto could be more intelligent, but since there are other ways to achieve things it really doesn't matter. So no, CSS isn't broken, my brain was.

[dsonesuk]

just to point out if you use below, without left:0; and you had not zeroed the margins of the body, because the body has by default about a 10px margin, it would appear 20px from left edge. #fixtop { position:fixed; top:0; right:0; margin:10px; /*with or without margin your choice*/} by setting left:0; you force it with margin applied to start from the browser left edge, that is why you should use at least left and top properties, and the rest if required.

[JTeagle]

just to point out if you use below, without left:0; and you had not zeroed the margins of the body, because the body has by default about a 10px margin, it would appear 20px from left edge. #fixtop { position:fixed; top:0; right:0; margin:10px; /*with or without margin your choice*/} by setting left:0; you force it with margin applied to start from the browser left edge, that is why you should use at least left and top properties, and the rest if required.

Yes, that is very similar to what I hit with one of the items in the original attached HTML file; I was setting margins to 0 and wondering why I was getting offsets; but I had not set left and top, so it was anybody's guess. Consider that a lesson learned. It's a relief to know I won't have to resort to a fixed content width.