Why are elements in this CSS canceling each other out (in HTML without inheritance involved but with comments) that aren't related to each other?

Using this class, some of the elements don't display. Which ones display depends on which order I put these elements into. The solution turned out to be that the wrong type of comment method was being used. Using HTML style comments within CSS style element, in an html file, creates all sorts of havoc.

I want all at the same time:

~ Text in a colored box,
~ Box centered on the page,
~ Text 120px from left side margin of the box
~ Tan colored border
~ Box 50% width of page

In the snippet, when the margin is positioned higher in the CSS list so that it works at centering the box, the border turns from tan to black!

The margin:auto is not working to center the box on the page in some of the orderings of CSS.

When the margin is placed later in css after the padding-left so that the border is tan, the 50% width turns to 100% width.

The padding-left stops working, when I have the margin working at centering and the width working at 50%.

I've moved them into so many orders, but I haven't spotted a pattern of what's cancelling out other things and why.

I can't figure out any keywords to search on to learn more of why this is happening, and 3www.school doesn't have an answer that I've found.

The CSS is

<style>
.highlightbox4

background-color:linen;
margin: auto;
font-weight:bold;
color:black;
padding:20px;
width:50%;
border-color:tan; <* use linen color instead? *>
border-style:solid; <* border didn't show up until style was added *>
border-width:5px;
padding-left:120px;

</style>


--

I also created it in the code-creator, but the size inside there doesn't give an idea of whether it's all working or not. (Turns out I didn't know you can run the snippet at the bottom of the question and see whether it's working.)

This snippet should have a brown border & a left margin of 120px. (Addition: The solution is that those are stopped by the html style in the snippet.)

.highlightbox4

background-color:linen;
margin: auto;
font-weight:bold;
color:black;
padding:20px;
width:50%; <* use linen color instead? *>
border-color:tan;
border-style:solid;
border-width:5px; <* another comment *>
padding-left:120px;

<!-- Not added yet box-shadow: 5px 10px; -->


<div class="highlightbox4">
Text that I'm trying to put into a linen colored box, <br> lined up 120px from it's left edge <br> and the box centered in the page <br> with a tan border that's a little thick.
</div>

padding-left: 120px

padding: 20px

padding-left: 20px

2 Answers
2

Try adding:

display: table;


That will center your div (because centering with margin: auto only Works on fixed Width elements. display: table eliminates this.

center

margin: auto

display: table

Edit:

You can find more examples on the great page:Css Centering Things

<table>

table

display

The problem was use of an html comment, instead of the css comment method, inside the css style element.

So for instance the attributes here had this comment on them:

border-color:tan;
border-style:solid; <!-- this is a comment that should be /* */ style instead -->
border-width:5px;


-

The html-style comment was canceling out or confounding properties entered after the comment. Though not all attributes were being canceled out.

Changing those comments to /* which is css's comment style, caused the tags to work correctly.

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.