zgangwer20 zgangwer20 - 2 months ago 10
CSS Question

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:


  • Why isn't Comic Sans taking effect

  • How do I remove the extra white space along the right side.



HTML:

<!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>





CSS:

/*
* 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;

}

Answer

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.