Internal CSS not overriding external CSS for class

Question

I need my "column" class in the internal CSS to float center while the external CSS has it set to left.

Here is my CSS file:

body { text-align: center; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }  
#report { width: 1269px; margin:  auto; float: left;
}

div.column{  margin-top: 10px; padding: 0px 0px; float: left; }
div.first{ padding-right: 8px; border-right: 1px grey solid; }
div.second{  margin-left: 8px; 
}
...

Here is my HTML with internal CSS:

    <!DOCTYPE html>
<html>
<head>
<title>Dual Server Report</title>
<link rel="stylesheet" type="text/css" href="ServerReport.css">
    <style type="text/css">
    div.column{ float: center; }
    </style>
</head>
<body>
<div id="report">
<h1>Automated PowerShell Install Report</h1>
<h2>This report was ran: 07/07/2015 09:03:21</h2>

    <div class="column">
...

I checked out these three similar questions but nothing I tried worked.
Internal Stylesheet NOT overriding External stylesheet?
“Inner” CSS Not Overriding “Outer” CSS
Overriding External CSS

Edit:
I remembered looking up the "float" property yesterday but I did not remember what I found; I feel pretty silly for posting this before going to double check. It makes sense that float would not have a center property.

I'll leave this up in case anyone in the future makes a similar mistake. Thanks to everyone who answered for being so respectful in pointing out this error I should have found on my own.

Try loading your "external" CSS file after the "internal" one. And for your "you learn something new every day" lesson, read developer.mozilla.org/en-US/docs/Web/CSS/Specificity — j08691
– j08691, Commented Jul 7, 2015 at 14:32

TylerH · Accepted Answer · 2015-07-07 14:59:01Z

3

The property value of float: center does not exist.

The float property has four values: left, right, none, and inherit.

edited Jul 7, 2015 at 14:59

TylerH

21.3k84 gold badges84 silver badges122 bronze badges

answered Jul 7, 2015 at 14:33

Jacques Cornat

1,6521 gold badge20 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NickSS Over a year ago

Well I definitely feel silly now. Thanks CitizenDelta & Tyler, and everyone else for taking the time to point this out. Just one of those things I should have known but it's been so long I forgot.

mad_manny · Accepted Answer · 2015-07-07 14:36:36Z

0

The only valid values for float are: left, right, none, inherit.

So this code will be skipped and not override the css file. Please look here for more information on the float property.

answered Jul 7, 2015 at 14:36

mad_manny

1,09116 silver badges28 bronze badges

Comments

waders group · Accepted Answer · 2015-07-07 15:05:43Z

0

There is nothing like float: center in CSS

Another way to do it

Change your CSS under the html page

div.column
{
 float: none;
 margin: auto;
 width: 200px; /* set the width (Except 'auto') */ 
}

answered Jul 7, 2015 at 15:05

waders group

5283 silver badges7 bronze badges

Collectives™ on Stack Overflow

Internal CSS not overriding external CSS for class

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related