CODEWITHSUNDEEP
htmlcss
gangwerz
gangwerz

Reputation: 445

Organize Floating Elements into a Dynamic Grid

I am making a sticky note website where I would like to organize the notes into a grid. As the window shrinks, the notes need to reorder themselves to fit the width, and allow for vertical scrolling. Additionally, I only want to use CSS

I currently have the notes set to float left, which allows for most of what I need, but the top row is always offset. I would like the notes to order themselves into columns and rows. I have also tried display: inline-block but that caused the notes to become disorganized.

Some less important questions are:

/*
     * This stylesheet should provide all of the styles for index.html.
     */

html,
body {
  margin: 0;
  padding: 0;
}
/*** HEADER Element Styling ***/

header {
  background-color: #FFFF01;
  font-family: "comic sans ms", cursive, sans-serif;
  width: 100%;
}
header h1 {
  position: relative;
  top: 15px;
  left: 15px;
  margin: 0;
}
header li {
  display: inline-block;
}
header a {
  color: #000;
  text-decoration: none;
}
/*** NAV Element Styling ***/

nav {
  background-color: #333;
  height: 25px;
  padding: 0;
}
nav a {
  text-decoration: none;
  color: #FFFFFF;
}
.navbar-item {
  padding: 5px;
  float: left;
}
.navbar-right {
  float: right;
}
/*** TODO Class Styling ***/

.todo {
  background-color: #FFFF63;
  float: left;
  width: 300px;
  height: 300px;
  margin: 20px;
}
.todo h2 {
  text-align: center;
  font-size: 36px;
}
.todo-body {
  font-size: 24px;
  text-align: left;
  margin: 15px;
}
.todo-body li {
  list-style-type: circle;
}
.todo a {
  color: #010100;
}
/*** DISSMISS-BUTTON Class Styling ***/

.dismiss-button {
  cursor: pointer;
  position: relative;
  float: right;
  top: 5px;
  right: 5px;
  font-size: 24px;
  visibility: hidden;
}
.todo:hover .dismiss-button {
  visibility: visible;
  position: relative;
  align-self: auto;
}
/*** ADD-NOTE CLASS Styling ***/

.add-note-button-container {
  border-radius: 50%;
  width: 65px;
  height: 65px;
  background-color: #FE0000;
  position: fixed;
  bottom: 40px;
  right: 40px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
.add-note-button-container:hover {
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.7);
}
/*** BUTTON Element Styling ***/

button {
  cursor: pointer;
  font-size: 50px;
  border: none;
  color: white;
  display: inline-block;
  background-color: transparent;
  position: relative;
  top: 7px;
  left: 12px;
}
/*** FOOTER Element Styling ***/

footer {
  position: fixed;
  height: 25px;
  width: 100%;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0;
  background-color: #313131;
}
.copyright {
  float: right;
  color: white;
  padding: 5px;
  margin: 0;
}
<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">
  <title>ToDoIt</title>

  <!-- This is a 3rd-party stylesheet for Font Awesome: http://fontawesome.io/ -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" media="screen">

  <link rel="stylesheet" href="style.css" media="screen">
</head>

<body>
  <header>

    <!-- The <i> tag below includes the sticky note icon from Font Awesome -->
    <h1><a href="/"><i class="fa fa-sticky-note-o"></i> ToDoIt</a></h1>

    <nav>
      <ul class="navbar-list">
        <li class="navbar-item"><a href="/">Home</a>
        </li>
        <li class="navbar-item"><a href="/about">About</a>
        </li>
        <li class="navbar-item navbar-right"><a href="#">Log out</a>
        </li>
      </ul>
    </nav>

  </header>

  <main>

    <section class="todo">
      <div class="dismiss-button">&times;</div>
      <h2>buy groceries</h2>
      <div class="todo-body">
        <ul class="todo-list">
          <li>milk</li>
          <li>tea</li>
          <li>flour</li>
          <li>bananas</li>
        </ul>
      </div>
    </section>

    <section class="todo">
      <div class="dismiss-button">&times;</div>
      <h2>grab a beer with Chris</h2>
      <div class="todo-body">
        <p class="indent-wrapped"><span class="where">where:</span> Squirrels</p>
        <p class="indent-wrapped"><span class="when">when:</span> Thursday 9/29, 4:00</p>
      </div>
    </section>

    <section class="todo">
      <div class="dismiss-button">&times;</div>
      <h2>take out the trash</h2>
      <div class="todo-body">
        <p class="indent-wrapped"><span class="when">when:</span> Monday Night</p>
      </div>
    </section>

    <section class="todo">
      <div class="dismiss-button">&times;</div>
      <h2>call the bank re: loan</h2>
      <div class="todo-body">
        <p class="indent-wrapped"><span class="who">who:</span> Betty</p>
        <p>541-757-1111</p>
      </div>
    </section>

    <section class="todo">
      <div class="dismiss-button">&times;</div>
      <h2>paint the bedroom</h2>
      <div class="todo-body">
        <p>probably need 2 gallons (polar-bear-in-a-blizzard white)</p>
      </div>
    </section>

    <div class="add-note-button-container">
      <button id="add-note-button">+</button>
    </div>

  </main>

  <footer>
    <div class="copyright">
      Copyright &copy; 2016
    </div>
  </footer>

</body>

</html>

Upvotes: 0

Views: 231

Answers (2)

Ricky
Ricky

Reputation: 791

If you want to create a dynamic Grid Layout, Consider learning about the css attribute flex, a good quick guide can be found here :- Flex.

On top of that with setting width/height ratios, Use Percentages or vw/vh, Or combine them both, This really helps with fluidity.

For my Parent diff i use vw/vh and then for the child divs i use percentages. This way i have found that the percentages take the value of the parent. I have done a quick snippet to show this.

#parent {
  background-color: red;
  width: 100vw;
  height: 100vh;
  position: relative;
  }
#child1 {
  background-color: orange;
  width: 65%;
  height: 50%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  }
#child2 {
  background-color: green;
  width: 35%;
  height: 75%;
  float: right;
  position: absolute;
  bottom: 0;
  right: 0;
  }
<div id="parent">
  <div id="child1"></div>
  <div id="child2"></div>
</div>

Upvotes: 1

Brian
Brian

Reputation: 2952

It appears to be caused by the UL in your header it's caused by overflow on your nav LI's which are floated which are causing your notes to be pushed out of position with the notes being a fixed 300px width they won't always fill the screen at different widths, you could use a percentage width on the notes instead.

There's still quite a few issues to fix up but a rough example with the percentage widths and UL fixed is here (sorry the naming conventions aren't great on the classes I added): http://plnkr.co/edit/GBuDoMsqleI9vH7AwjwU?p=preview

Comic Sans is being applied to the header and is working in Chrome, perhaps you meant to target the body tag instead?

Removing the margin from .navbar-list floating the <nav> tag, setting 100% width fixes most of the float issues and some of the positioning issues it creates - there's a few more that will still need resolving and probably similar issues with the logo.

Several of these issues are fairly fundamental CSS issues it may be worth checking out some frameworks like twitter bootstrap or foundation as often these will allow you to implement what you wan't without needing to know the finer details of CSS, or if you do want to learn then you can implement it, inspect in browser and experiment with their implementation.

Upvotes: 0

Related Questions