CSS width element not doing anything

Question

Thank you for taking the time to answer my question. T his the HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio</title>
    <link href="css/mainpg.css" rel="stylesheet" type="text/css" />
  </head>
  <body class="mainStyles">
  <div id="mainBox">
    <div class="title">
      <h1>Portfolio</h1>
      <h5>2018</h5>
    </div>
  </div>
    <div class="schedulelist">
        <a href="#" class="schedule">Spanish III</a>
        <a href="#" class="schedule">AP Calculus AB</a>
        <a href="#" class="schedule">AP Physics 1</a>
    </div>
    <div class="schedulelist">
      <a href="#" class="schedule">Composition Workshop</a>
      <a href="#" class="schedule">Fitness Basics</a>
      <a href="#" class="schedule">Advisory</a>
    </div>
</body>s
</html>

and the CSS:

.mainStyles{

  font-size: 12pt;
  font-family: Georgia;
  color: black;

  border-style: solid;
  border-color: #a9a2a9;
  border-width: thin;

}

.title{
  text-align: center;
  font-family: courier;
  font-size: 24px;

  width: 400px;
  border-width: thin;
  border-radius: 20px;
  border-style: dotted;
  margin: 45px auto;
}

.schedule{
  width: 100px;
  height: 35px;
  font-family: courier;
  color: black;
  text-align: center;
  text-decoration: none;
  margin: 20px;
  padding: 10px;
  background-color: #ff2d39;
  border: 1px solid white;
  border-radius: 10px;
}

.schedule:hover{
  background-color: #e0dce2;
}

.schedulelist{
  text-align: center;
  width: 1000px;
  margin: 30px auto;
  border: 1px solid black;
}

I'm trying to make all the .schedule elements have equal width and height. I've added the width and height elements in an attempt to do this, but they seem to affect nothing. I'm really new to HTML and CSS and would appreciate any help! Thank you!

FYI I've tried this code in both Firefox and Safari.

score 2 · Accepted Answer · answered Nov 07 '18 at 00:35

2

Try adding display: inline-block; to your .schedule definition. <a> elements are by default display: inline; which makes the CSS width modifier not do anything.

.schedule {
    ..
    display: inline-block;
}

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

answered Nov 07 '18 at 00:35

Rusty Fausak

7,355
1
27
38

Thank you so much! You just saved me hours! – AviouslyAK Nov 07 '18 at 00:39
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction Is probably worth looking through. Things can get kind of confusing when dealing with the way elements flow and layout on the page. Also don't forget to accept the answer if it answered your question :) – Brice Nov 07 '18 at 00:43

score 0 · Answer 2 · answered Nov 07 '18 at 00:39

0

link is not a block element, so you can't describe width and height. Just try add "display: block" to your element.

answered Nov 07 '18 at 00:39

peon123

266
1
8

CSS width element not doing anything

2 Answers2