Why Does Visual Studio 2013 Recognize CSS3 Display: Flexbox, But Not Flex

Why does Visual Studio 2013 recognize CSS3 display: flexbox, but not flex?

VS2013 needs to have Update 5 installed and that will fix the CSS validation issue.

Why this nested css code does not work?

There is some strange character in front of the .footer a rule. Try copying the code to jsbin.com and you'll see it marked by a red dot. This happens to me a lot when copying from jsfiddle. If the char is removed, all is good.

Here is your fiddle, without that character.

how to precisely adjust children divs to parent div

div {  border: 1px;  box-sizing: border-box; /* which give padding and border from inside */  border-style: double;}
/* i have used below code to clear the floats    or you can also use <div class="clear"></div> to clear the floats*/
#first:after,#first:before {  content: '';  display: table;  clear: both;}
div#first > div {  width: 33.33%; /* changed the width from 33% to 33.33% */  background: red;  float: left;  display: block;}

<div id="main">  <div id="first"> <!-- no need to add because i have cleared the floats and also by default div is a block element it will take 100% -->    <div>1</div>    <div>2</div>    <div>3</div>  </div></div>

2 images in row responsive

You can also use flexbox, something like this

.row {  display: flex;  align-items: center;  justify-content: center;  }

<body style="background-color: #f6f6f6">
<div dir="ltr" class="page-content center" style="min-width: 400px; min-height: 400px; margin: auto; width: 58%; padding: 20px;">
    <!-- Logo -->    <!--<p style="text-align: center;">-->        <div class="row">            <div class="col-50">             <img src="http://i64.tinypic.com/2ni7hjk.jpg" />            </div>            <div class="col-50">                <img src="http://i68.tinypic.com/dunp0.png"/>                <span style="font-size: 40px; color: #4c4c4c; font-family: Calibri;">logoeri</span>                <br />                <span style="font-size: 12px; color: #4c4c4c; font-family: 'Helvetica Neue',sans-serif;">logo company is here</span>            </div>         </div>
    <!-- Header -->
    <div id="Header" style="font-family: 'Helvetica Neue',sans-serif; text-align: center; font-size: 30px; padding: 20px; color: white; background-color: #3eb780">    the header is here    </div>

    <!-- Center Container -->
    <div style="font-family: 'Helvetica Neue',sans-serif; background: white;padding: 20px; font-size: 14px; font-family: Arial; direction: ltr; text-align: left;">           <p>    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

    </p>

        <!-- Footer -->        <div style="text-align: center; color: #a2a2a2">            <div style="width: 90%; margin: auto; padding: 20px;">                Do not reply<br />

            </div>        </div>        </div>    </div>

What methods of ‘clearfix’ can I use?

Depending upon the design being produced, each of the below clearfix CSS solutions has its own benefits.

The clearfix does have useful applications but it has also been used as a hack. Before you use a clearfix perhaps these modern css solutions can be useful:

css flexbox
css grid

Modern Clearfix Solutions

Container with `overflow: auto;`

The simplest way to clear floated elements is using the style overflow: auto on the containing element. This solution works in every modern browsers.

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

One downside, using certain combinations of margin and padding on the external element can cause scrollbars to appear but this can be solved by placing the margin and padding on another parent containing element.

Using ‘overflow: hidden’ is also a clearfix solution, but will not have scrollbars, however using hidden will crop any content positioned outside of the containing element.

Note: The floated element is an img tag in this example, but could be any html element.

Clearfix Reloaded

Thierry Koblentz on CSSMojo wrote: The very latest clearfix reloaded. He noted that by dropping support for oldIE, the solution can be simplified to one css statement. Additionally, using display: block (instead of display: table) allows margins to collapse properly when elements with clearfix are siblings.

.container::after {
  content: "";
  display: block;
  clear: both;
}

This is the most modern version of the clearfix.

⋮

Older Clearfix Solutions

The below solutions are not necessary for modern browsers, but may be useful for targeting older browsers.

Note that these solutions rely upon browser bugs and therefore should be used only if none of the above solutions work for you.

They are listed roughly in chronological order.

"Beat That ClearFix", a clearfix for modern browsers

Thierry Koblentz' of CSS Mojo has pointed out that when targeting modern browsers, we can now drop the zoom and ::before property/values and simply use:

.container::after {
    content: "";
    display: table;
    clear: both;
}

This solution does not support for IE 6/7 …on purpose!

Thierry also offers: "A word of caution: if you start a new project from scratch, go for it, but don’t swap this technique with the one you have now, because even though you do not support oldIE, your existing rules prevent collapsing margins."

Micro Clearfix

The most recent and globally adopted clearfix solution, the Micro Clearfix by Nicolas Gallagher.

Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

Overflow Property

This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.

http://www.quirksmode.org/css/clearing.html
- explains how to resolve common issues related to this technique, namely, setting width: 100% on the container.

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

Rather than using the display property to set "hasLayout" for IE, other properties can be used for triggering "hasLayout" for an element.

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

Another way to clear floats using the overflow property is to use the underscore hack. IE will apply the values prefixed with the underscore, other browsers will not. The zoom property triggers hasLayout in IE:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

While this works... it is not ideal to use hacks.

PIE: Easy Clearing Method

This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.

This solution is quite old, but you can learn all about Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html

Element using "clear" property

The quick and dirty solution (with some drawbacks) for when you’re quickly slapping something together:

<br style="clear: both" /> <!-- So dirty! -->

Drawbacks

It's not responsive and thus may not provide the desired effect if layout styles change based upon media queries. A solution in pure CSS is more ideal.
It adds html markup without necessarily adding any semantic value.
It requires a inline definition and solution for each instance rather than a class reference to a single solution of a “clearfix” in the css and class references to it in the html.
It makes code difficult to work with for others as they may have to write more hacks to work around it.
In the future when you need/want to use another clearfix solution, you won't have to go back and remove every <br style="clear: both" /> tag littered around the markup.

Why is the center tag deprecated in HTML?

The <center> element was deprecated because it defines the presentation of its contents — it does not describe its contents.

One method of centering is to set the margin-left and margin-right properties of the element to auto, and then set the parent element’s text-align property to center. This guarantees that the element will be centered in all modern browsers.

What are :horizontal and :vertical pseudo selectors for?

Seems to be a WebKit-only creation

:horizontal – The horizontal pseudo-class applies to any scrollbar
pieces that have a horizontal orientation.

:vertical – The vertical pseudo-class applies to any scrollbar pieces
that have a vertical orientation.

I found reference to these pseudo classes here and here.

Why Does Visual Studio 2013 Recognize CSS3 Display: Flexbox, But Not Flex