Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Adam Evans
Adam Evans
6,975 Points
Posted by Adam Evans
Adam Evans
6,975 Points

Text Added to CSS Button Changes Alignment

Hello Everyone,

I cannot for the life of me figure this out. I have a grid of 28 squares that I am using as a calendar to track running. I got everything aligned how I would like it, but when I go to add text, it looks like the box's top margin is being increased and all of a sudden it shifts down a bunch. Here is my CSS for the 'day' or each box in my grid: 

#calDisp {
  margin: 0 auto;
  padding: 0 6%
}

.cal {
  display: inline-block;
  text-align: center;
  height: 120px;
  width: 120px;
  margin: 0px auto;
  border: 1px solid black;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 5px 5px 5px #999;
}

.cal:hover {
 border-color: #ff5500;
 background-color: #ddd; 
}

My HTML for the grid is as follows: 

      <section id="calDisp">
        <div class="cal">Text Causing Issue</div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
      </section>

There is other stuff in the CSS and HTML but I am thinking some other part of the CSS may be affecting it but cannot narrow it down.

I wish I could show a screenshot of the issue so it was clearer. The grid is fine when no text inside. Once I add a word, the entire box shifts down almost 80-90px. Any thoughts are greatly appreciated!

8 Answers

Damon Johnson
Damon Johnson
Courses Plus Student 2,775 Points

OK, so I got it to work with the following:

#calDisp {
  margin: 0 auto;
  padding: 5px 0%
}

.cal {
  float: left;
  position: relative;
  display: block;
  padding: 0;
  text-align: center;
  height: 120px;
  width: 120px;
  border: 1px solid black;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 5px 5px 5px #999;
  margin: 5px;
}

.cal:hover {
 border-color: #ff5500;
 background-color: #ddd; 
}

<body>
      <section id="calDisp">
        <div class="cal">Success!</div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div> 
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>
        <div class="cal"></div>       
        <div class="cal"></div>
        <div class="cal"></div>
      </section>
    </body>

I basically made the divs float to the left, positioned them relatively and changed to block.

=)

Damon Johnson
PLUS
Damon Johnson
Courses Plus Student 2,775 Points
Damon Johnson
Damon Johnson
Courses Plus Student 2,775 Points

Hey Adam,

I think that the paragraph (p tag) element has default padding and margins. Have you tried resetting this in your css?

p {
padding: 0;
margin : 0;
}

Hope this helps

=)

Adam Evans
Adam Evans
6,975 Points
Adam Evans
Adam Evans
6,975 Points

That was one of the many things I tried that did not work.. :)

Damon Johnson
Damon Johnson
Courses Plus Student 2,775 Points

Bummer...

How about setting padding to 0 in .cal?

Damon Johnson
Damon Johnson
Courses Plus Student 2,775 Points

If that fails, could you upload you code to:

http://codepen.io/

That would let me play about with your exact code and see I could help out

=)

Adam Evans
Adam Evans
6,975 Points
Adam Evans
Adam Evans
6,975 Points

<p data-height="268" data-theme-id="0" data-slug-hash="FhAIc" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/Alevans/pen/FhAIc/'>FhAIc</a> by Adam (<a href='http://codepen.io/Alevans'>@Alevans</a>) on <a href='http://codepen.io'>CodePen</a>.</p> <script async src="//codepen.io/assets/embed/ei.js"></script>

Not sure how to share this..

Damon Johnson
Damon Johnson
Courses Plus Student 2,775 Points

Sorry its not coming up on the CodePen search function.

Go to your pen, and copy and paste the url

Adam Evans
Adam Evans
6,975 Points
Adam Evans
Adam Evans
6,975 Points

Heyyy that did do it! Thanks!

I went through the "How to Make a Website" and "HTML" on the Web Design track and have basically been altering the website I made to be what I want. I've found it pretty useful for actually understanding the changes I am making rather than just following the video.

I'm currently doing the CSS and am looking forward to the CSS Layout Techniques. I still get confused on when to use display and float. Gotta keep learning!

Damon Johnson
PLUS
Damon Johnson
Courses Plus Student 2,775 Points
Damon Johnson
Damon Johnson
Courses Plus Student 2,775 Points

Good stuff,

Its a good learning curve. I think you're doing the right thing by practicing code in your own projects. I think that helps best in actually understanding what you're doing and whats happening.

This is an awesome resource on css positioning:

http://learnlayout.com/position.html

Happy coding

=)