so I have this project where I was given a screenshot of a website and have to replicate it while using HTML and CSS code purely. But I have gotten myself into a little predicament where my navbar has excess space that I don't want because I want a search bar to go where that excess space is at.
html {
background-color: lightgrey;
font-size: 100%;
}
body{
margin: 5%;
margin-top: 0;
font-family: Georgia, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif;
}
/* Navigation Bar*/
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e9eed0
}
#current a{
background-color: #b8d03b;
color: white;
}
.nav li {
float: left;
border-right: 1px solid #bbb
}
.nav li a {
display: block;
color: #8c8f7d;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Search Bar */
.search {
float: right;
}
/* Heading */
.heading{
background-color: #f6f6f6;
border: 1px solid #b8d03b;
border-bottom:.5px solid #b8d03b;
}
/* Main text area */
.main {
display: block;
background-color: #ffffff;
color: grey;
border: 1px solid #b8d03b;
float: left;
}
.content{
width: 50%;
float: left;
padding: 5px 15px;
}
.middle{
width:30%;
float: left;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}
.sidebar{
width: 10%;
padding: 5px 15px;
float: left;
}
/* Calendar */
.october{
text-align: center;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #cccccc;
text-align: center;
}
.weekdays li {
display: inline-block;
color: #ffffff;
width: 10%;
text-align: center;
}
.days {
text-align: center;
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 10%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
color: #3c8cd7 !important
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Final Project </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header role='banner'>
<nav>
<ul class="nav">
<li id="current">Home </li>
<li>ELA </li>
<li> Photos</li>
<li> About</li>
<li> Contact</li>
</ul>
</nav>
</header>
<div class="search">
<form method="get" action="search-results.php" role="search">
<label for="search"> Search: </label>
<input type="search" size="30">
<input type="submit" value="Search" />
</div>
<div class="heading">
<p><span> News Flash</span> By Guillermo Molina </p>
<p><small>>> Home</small></p>
</div>
<div class="main">
<article class="content">
<p><small>posted on Novermber 16, 2017 by Guillermo Molina</small></p>
<h1>About This Template</h1>
<p><strong>News Flash</strong> Denec leo. Vivamus fermnetum nibh in augue.
Praesent a lacus at erna congue rutrum. Nulla enim erosm porttitor eu, tempus
id, varius non, nib. Duis enim nula luctus eu, dapibus lacinia, venenatis id quam.
Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat.
</p>
<p>Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum
velit, euismod lacinia quam nisl id lorem. Quisque erat.</p>
<h2>A Heading Level 2</h2>
<p>This paragraph is followed by a sample unordered list:</p>
<ul>
<li>Consectetuer adipiscing elit</li>
<li>Metus aliquam pellentesque</li>
<li>Urnanet non molestie semper</li>
<li>Proin gravida orci porttitor</li>
</ul>
<h3>Heading Level 3</h3>
<p>While this is followed by a blockquote:</p>
<blockquote cite="http://www.google.com">
Donec leo, vivamus nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis,
rutrum id, congue, and nibh.
</blockquote>
<p> Comments(33) Permalink </p>
<hr>
<p>TAGS: DOLOR IPSUM SIT AMET DOLOR IPSUM LOREM SIT AMET </p>
</article>
<section class="middle">
<h2>Recent Posts</h2>
<h3>Aliquam Libero</h3>
<p>Nullam ante orci, eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna,
consequat vel, sescipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.More...</p>
<h3>Semper Vestibulum</h3>
<p>DOnec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id,
congue, and nibh More... </p>
</section>
<aside class="sidebar">
<h2>Categories</h2>
Aliquam libero
Consectetuer elit
Metus pellentesque
Suspendisse mauris
Urnanet molestie semper
Proin orci porttitor
<h2>Archives</h2>
September(23)
August(31)
July(31)
June(30)
(31)
<h2>Calendar</h2>
<p class="october">October 2017</p>
<ul class="weekdays">
<li>M</li>
<li>T</li>
<li>W</li>
<li>T</li>
<li>F</li>
<li>S</li>
<li>S</li>
</ul>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</aside>
</div>
</body>
</html>
I'm wondering changes I can make to my code in order to make the search bar be right next to the navbar while getting rid of the excess space that the navbar has.
html {
background-color: lightgrey;
font-size: 100%;
}
body{
margin: 5%;
margin-top: 0;
font-family: Georgia, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif;
}
/* Navigation Bar*/
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e9eed0
}
#current a{
background-color: #b8d03b;
color: white;
}
.nav li {
float: left;
border-right: 1px solid #bbb
}
.nav li a {
display: block;
color: #8c8f7d;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Search Bar */
.search {
float: right;
}
/* Heading */
.heading{
background-color: #f6f6f6;
border: 1px solid #b8d03b;
border-bottom:.5px solid #b8d03b;
}
/* Main text area */
.main {
display: block;
background-color: #ffffff;
color: grey;
border: 1px solid #b8d03b;
float: left;
}
.content{
width: 50%;
float: left;
padding: 5px 15px;
}
.middle{
width:30%;
float: left;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}
.sidebar{
width: 10%;
padding: 5px 15px;
float: left;
}
/* Calendar */
.october{
text-align: center;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #cccccc;
text-align: center;
}
.weekdays li {
display: inline-block;
color: #ffffff;
width: 10%;
text-align: center;
}
.days {
text-align: center;
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 10%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
color: #3c8cd7 !important
}
/** Added ***/
nav{
width: 100%;
}
.navbar{
float: left
}
.search{
float: right;
}
.clearfix{
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Final Project </title>
<link rel="stylesheet" href="style.css">
<style>
nav{
width: 100%;
}
.navbar{
float: left
}
.search{
float: right;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<header role='banner'>
<nav>
<div class="navbar">
<ul class="nav">
<li id="current">Home </li>
<li>ELA </li>
<li> Photos</li>
<li> About</li>
<li> Contact</li>
</ul>
</div>
<div class="search">
<form method="get" action="search-results.php" role="search">
<label for="search"> Search: </label>
<input type="search" size="30">
<input type="submit" value="Search" />
</form>
</div>
<div class="clearfix"></div>
</nav>
</header>
<div class="heading">
<p><span> News Flash</span> By Guillermo Molina </p>
<p><small>>> Home</small></p>
</div>
<div class="main">
<article class="content">
<p><small>posted on Novermber 16, 2017 by Guillermo Molina</small></p>
<h1>About This Template</h1>
<p><strong>News Flash</strong> Denec leo. Vivamus fermnetum nibh in augue.
Praesent a lacus at erna congue rutrum. Nulla enim erosm porttitor eu, tempus
id, varius non, nib. Duis enim nula luctus eu, dapibus lacinia, venenatis id quam.
Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat.
</p>
<p>Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum
velit, euismod lacinia quam nisl id lorem. Quisque erat.</p>
<h2>A Heading Level 2</h2>
<p>This paragraph is followed by a sample unordered list:</p>
<ul>
<li>Consectetuer adipiscing elit</li>
<li>Metus aliquam pellentesque</li>
<li>Urnanet non molestie semper</li>
<li>Proin gravida orci porttitor</li>
</ul>
<h3>Heading Level 3</h3>
<p>While this is followed by a blockquote:</p>
<blockquote cite="http://www.google.com">
Donec leo, vivamus nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis,
rutrum id, congue, and nibh.
</blockquote>
<p> Comments(33) Permalink </p>
<hr>
<p>TAGS: DOLOR IPSUM SIT AMET DOLOR IPSUM LOREM SIT AMET </p>
</article>
<section class="middle">
<h2>Recent Posts</h2>
<h3>Aliquam Libero</h3>
<p>Nullam ante orci, eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna,
consequat vel, sescipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.More...</p>
<h3>Semper Vestibulum</h3>
<p>DOnec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id,
congue, and nibh More... </p>
</section>
<aside class="sidebar">
<h2>Categories</h2>
Aliquam libero
Consectetuer elit
Metus pellentesque
Suspendisse mauris
Urnanet molestie semper
Proin orci porttitor
<h2>Archives</h2>
September(23)
August(31)
July(31)
June(30)
(31)
<h2>Calendar</h2>
<p class="october">October 2017</p>
<ul class="weekdays">
<li>M</li>
<li>T</li>
<li>W</li>
<li>T</li>
<li>F</li>
<li>S</li>
<li>S</li>
</ul>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</aside>
</div>
</body>
</html>
You have to add some more classes,
extra css
nav{
width: 100%;
}
.navbar{
float: left
}
.search{
float: right;
}
.clearfix{
clear: both;
}
And nav html little modified
<nav>
<div class="navbar">
<ul class="nav">
<li id="current">Home </li>
<li>ELA </li>
<li> Photos</li>
<li> About</li>
<li> Contact</li>
</ul>
</div>
<div class="search">
<form method="get" action="search-results.php" role="search">
<label for="search"> Search: </label>
<input type="search" size="30">
<input type="submit" value="Search" />
</form>
</div>
<div class="clearfix"></div>
</nav>
Just use the float:right and float:left and then clear:both.
Check this..
In your CSS rules add this:
header {
display: inline-block;
}
div.search {
line-height: 45px;
}
You only need the first one, the second is purely decorative
Related
My grid was working perfectly until I made some changes, 5 days have passed without resolution with rigorous work, I have simplified it, for an easier read. I have also made sure to add clear fix's to the floats of elements inside the near top grid items.
I have used grid-template-areas and grid-template-columns to adjust the size of the columns and show where each grid item should go. However, when I render the web page all the items are aligned to the far left column, except for my navbar and hero image which have been set to 100% width, they are fine. The desired grid layout is detailed at the bottom of the CSS file standalone and with media queries.
have a good day, thanks for reading (I am a novice)
HTML CODE
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="normalize.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header class="navbar">
<a id="top"></a>
<img class="logo" src="randimage.png" alt="title" style=height:20px;>
<nav class="topnav">
<ul>
<li>Learning journal</li>
<li>Tutorial</li>
<li>Contact me</li>
</ul>
</nav>
</header>
<div class="hero-image">
<div class="hero-text">
<h1>Learning Journal</h1>
<p>This is a log of my journey in learning how to design a web site.</p>
</div>
</div>
<nav class="week-nav">
<h2 class="contenthead">Weekly Posts</h2>
<ol>
<li><a href='#week1'>Introduction to Web Design</a></li>
<li><a href='#week2'>Learning how to make web pages</a></li>
<li><a href='#week3'>Learning about lists, quotes and tables</a></li>
<li><a href='#week4'>CSS basics</a></li>
<li><a href='#week5'>CSS box model & styling text</a></li>
<li><a href='#week6'>Responsive web design</a></li>
<li><a href='#week7'>RWD2</a></li>
<li><a href='#week8'>RWD3</a></li>
<li><a href='#week9'>HTML5 & CSS forms</a></li>
<li><a href='#week10'></a></li>
<li><a href='#week11'></a></li>
<li><a href='#ref'>References</a></li>
</ol>
</nav>
<div class="table">
<table>
<caption><strong>Personal timetable</strong></caption>
<tr>
<th>Day/Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<td>9-10am</td>
<td>e</td>
<td>e</td>
<td>--</td>
</tr>
<tr>
<td>10-11am</td>
<td>e</td>
<td>e</td>
<td>e</td>
</tr>
<tr>
<td>11-12pm</td>
<td>e</td>
<td>e</td>
<td>e</td>
</tr>
<tr>
<td>12-1pm</td>
<td>e</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td>1-2pm</td>
<td>--</td>
<td>e</td>
<td>--</td>
</tr>
<tr>
<td>2-3pm</td>
<td>e</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td>3-4pm</td>
<td>e</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td>4-5pm</td>
<td>e</td>
<td>--</td>
<td>--</td>
</tr>
</table>
</div>
<div class="main">
<main>
<h2>Learning Journal</h2>
<article>
<header class="post">
<a id="week8"></a>
<h3>Week 8:</h3>
<p>Published on<time datetime="2019-12-20"><strong> December 20, 2019</strong></time></p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie aliquet felis sed finibus. Proin eleifend arcu at est euismod eleifend. Ut vulputate lorem eu nisi condimentum suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempor non purus dignissim placerat. Ut commodo, lacus in ultricies mattis, diam augue sollicitudin nisl, sagittis gravida elit tellus eu ex. Nam pellentesque egestas nisi, ac semper nulla sagittis id. Donec ligula elit, aliquet eget placerat in, accumsan sit amet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer lacinia odio ut ornare aliquam. Donec et erat vel sem volutpat lobortis eu vel massa. Nullam sit amet dui ac nibh dignissim mollis eget nec nibh.</p>
</article>
<article>
<header class="post">
<a id="week7"></a>
<h3>Week 7:</h3>
<p>Published on<time datetime="2019-12-18"><strong> December 18, 2019</strong></time></p>
</header>
<h3>Flexible media</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie aliquet felis sed finibus. Proin eleifend arcu at est euismod eleifend. Ut vulputate lorem eu nisi condimentum suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempor non purus dignissim placerat. Ut commodo, lacus in ultricies mattis, diam augue sollicitudin nisl, sagittis gravida elit tellus eu ex. Nam pellentesque egestas nisi, ac semper nulla sagittis id. Donec ligula elit, aliquet eget placerat in, accumsan sit amet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer lacinia odio ut ornare aliquam. Donec et erat vel sem volutpat lobortis eu vel massa. Nullam sit amet dui ac nibh dignissim mollis eget nec nibh.</p>
</article>
<article>
<header class="post">
<a id="week6"></a>
<h3>Week 6:</h3>
<p>Published on<time datetime="2019-12-16"><strong> December 16, 2019</strong></time></p>
</header>
<h3>Week 6 outline:</h3>
<ul>
<li>Reflection & changes</li>
<li>Wireframes</li>
<li>Responsive grid layout workflow</li>
<li>RWD for mobile</li>
<li>Media queries</li>
<li>Making images flexible</li>
<li>Testing responsiveness of web page</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie aliquet felis sed finibus. Proin eleifend arcu at est euismod eleifend. Ut vulputate lorem eu nisi condimentum suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempor non purus dignissim placerat. Ut commodo, lacus in ultricies mattis, diam augue sollicitudin nisl, sagittis gravida elit tellus eu ex. Nam pellentesque egestas nisi, ac semper nulla sagittis id. Donec ligula elit, aliquet eget placerat in, accumsan sit amet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer lacinia odio ut ornare aliquam. Donec et erat vel sem volutpat lobortis eu vel massa. Nullam sit amet dui ac nibh dignissim mollis eget nec nibh.</p>
</article>
<article>
<header class="post">
<a id="week5"></a>
<h3>Week 5:</h3>
<p>Published on<time datetime="2019-12-10"><strong> December 10, 2019</strong></time></p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie aliquet felis sed finibus. Proin eleifend arcu at est euismod eleifend. Ut vulputate lorem eu nisi condimentum suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempor non purus dignissim placerat. Ut commodo, lacus in ultricies mattis, diam augue sollicitudin nisl, sagittis gravida elit tellus eu ex. Nam pellentesque egestas nisi, ac semper nulla sagittis id. Donec ligula elit, aliquet eget placerat in, accumsan sit amet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer lacinia odio ut ornare aliquam. Donec et erat vel sem volutpat lobortis eu vel massa. Nullam sit amet dui ac nibh dignissim mollis eget nec nibh.</p>
</article>
<p>Go to top</p>
</main>
</div>
<div class="aside">
<aside>
<a id="ref"></a>
<h2 class="contenthead">References</h2>
<ul>
<li>Examples of Web Standards</li>
<li>HTML5: Structure, Syntax and Semantics</li>
<li>HTML definitions & concept clarity</li>
<li>HTML elements reference</li>
<li>HTML Lists</li>
<li>Quoting framework</li>
<li>Type, class and ID selectors</li>
</ul>
</aside>
</div>
<div class="footer">
<footer>
Email [myname]<br>
<small>© 2020, fname sname.</small>
</footer>
</div>
</div>
</body>
</html>
CSS CODE
#import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
/*importing google font*/
* {box-sizing: border-box;}
#wrapper {
display: grid;
max-width: 100%;
margin: 0 auto;
}
body {
margin: 0;
padding: 0;
background: #fff;
font-family: "helvetica neue", sans-serif;
font-size: 1em;
}
body {
/*background-image: url("/ci435/images/BG_IMAGE.png");*/
/*background-repeat: repeat;*/
/*un-comment these when you have created round boxes for each element containing raw text*/
}
.navbar {
max-width: 100%;
padding: 1em 1em;
background: #000;
height: 3em;
width: 100%;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
a { text-decoration: none; color: #2c3ad1; }
a:hover { text-decoration: underline; }
a:visited { color: #5c13bd; }
a:active { color: #e8d05a; }
.topnav {
height: 3em;
font-weight: bold;
list-style: none;
float: right;
}
main {
clear: left;
}
.topnav li {
display: inline-block;
text-transform: uppercase;
line-height: 1.2em;
font-size: 0.7em;
text-indent: 3em;
}
.topnav ul {
position: relative;
bottom: 2.5em;
right: 1.6em;
}
.topnav a:link { color: lightgrey;}
.topnav a:hover {
color: #fff;
border-bottom: 1000px #fff
}
.topnav a:visited { color: #fff; }
.logo {
height: 20px;
width: 100%;
float: left;
}
.navbar:after {
content: "";
visibility: hidden;
display: block;
clear: both;
}
table {
background-color: #FFF;
border: solid 4px #4682B4;
border-spacing: 0;
text-align: center;
}
tbody tr:nth-child(even) {
background-color: #B0C4DE;
}
th {
background-color: #4682B4;
padding: 3px;
}
caption {
font-size: 1.3em;
padding-bottom: 0.5em;
/*space between caption and the table underneath*/
}
.hero-image {
background-image: linear-gradient(to bottom, rgba(0, 175, 255, 0.4), rgba(117, 19, 93, 0.73)), url("/ci435/images/bannerImages/lj.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
width: 100%;
height: 70vh;
/*justify-content: center;*/
}
.hero-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/*GRID LAYOUT*/
.navbar {
grid-area: navbar;
}
.hero-image {
grid-area: hero;
}
.week-nav {
grid-area: week-nav;
}
.table {
grid-area: table;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
/*LAYOUT STYLES*/
#wrapper {
display: grid;
grid-template-areas:
"navbar"
"hero"
"week-nav"
"table"
"main"
"aside"
"footer";
}
#media (min-width: 750px) {
#wrapper {
grid-template-columns: 3fr 7fr;
grid-template-areas:
"navbar navbar"
"hero hero"
"week-nav table"
"week-nav main"
"aside main"
"footer footer";
}
}
#media (min-width: 1000px) {
#wrapper {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"navbar navbar navbar"
"hero hero hero"
"week-nav table aside"
"week-nav main aside"
"footer footer footer";
}
}
#media (max-width: 500px) {
table {
display:none;
}
}
It looks like your issues are coming from your css selectors.
First, your grid isn't getting applied because in your css, you use an id selector (#wrapper), but in your html you give it the class, not id, "wrapper". Changing either the html to an id or the css to a class will fix this - if you think it is a wrapper pattern you will reuse then set it as a class, otherwise I'd recommend changing the html to set id="wrapper".
Next, the selectors you use to assign the grid-areas for main, aside, and footer are all the tag selectors. The issue here is that each of your main, aside, and footer elements are wrapped in divs inside of wrapper, so hierarchically it's actually #wrapper -> div container -> main/aside/footer. The grid-area attributes of each main/aside/footer are therefore unused as they look in their immediate parent, the div container, for the grid-template-areas when it is really in the #wrapper. To fix this, you can either move the grid-area attributes in your css from the tag selector to the div container selector, or if the div containers are otherwise unused, remove them entirely.
Here is the modified css to work with grid:
#import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
/*importing google font*/
* {
box-sizing: border-box;
}
#wrapper {
display: grid;
max-width: 100%;
margin: 0 auto;
}
body {
margin: 0;
padding: 0;
background: #fff;
font-family: "helvetica neue", sans-serif;
font-size: 1em;
}
body {
/*background-image: url("/ci435/images/BG_IMAGE.png");*/
/*background-repeat: repeat;*/
/*un-comment these when you have created round boxes for each element containing raw text*/
}
.navbar {
grid-area: navbar;
max-width: 100%;
padding: 1em 1em;
background: #000;
height: 3em;
width: 100%;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
a {
text-decoration: none;
color: #2c3ad1;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #5c13bd;
}
a:active {
color: #e8d05a;
}
.topnav {
height: 3em;
font-weight: bold;
list-style: none;
float: right;
}
main {
clear: left;
}
.topnav li {
display: inline-block;
text-transform: uppercase;
line-height: 1.2em;
font-size: 0.7em;
text-indent: 3em;
}
.topnav ul {
position: relative;
bottom: 2.5em;
right: 1.6em;
}
.topnav a:link {
color: lightgrey;
}
.topnav a:hover {
color: #fff;
border-bottom: 1000px #fff;
}
.topnav a:visited {
color: #fff;
}
.logo {
height: 20px;
width: 100%;
float: left;
}
.navbar:after {
content: "";
visibility: hidden;
display: block;
clear: both;
}
table {
background-color: #fff;
border: solid 4px #4682b4;
border-spacing: 0;
text-align: center;
}
tbody tr:nth-child(even) {
background-color: #b0c4de;
}
th {
background-color: #4682b4;
padding: 3px;
}
caption {
font-size: 1.3em;
padding-bottom: 0.5em;
/*space between caption and the table underneath*/
}
.hero-image {
background-image: linear-gradient(
to bottom,
rgba(0, 175, 255, 0.4),
rgba(117, 19, 93, 0.73)
),
url("/ci435/images/bannerImages/lj.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
width: 100%;
height: 70vh;
/*justify-content: center;*/
}
.hero-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/*GRID LAYOUT*/
.navbar {
grid-area: navbar;
}
.hero-image {
grid-area: hero;
}
.week-nav {
grid-area: week-nav;
}
.table {
grid-area: table;
}
.main {
grid-area: main;
}
.aside {
grid-area: aside;
}
.footer {
grid-area: footer;
}
/*LAYOUT STYLES*/
.wrapper {
display: grid;
grid-template-areas:
"navbar"
"hero"
"week-nav"
"table"
"main"
"aside"
"footer";
}
#media (min-width: 750px) {
.wrapper {
grid-template-columns: 3fr 7fr;
grid-template-areas:
"navbar navbar"
"hero hero"
"week-nav table"
"week-nav main"
"aside main"
"footer footer";
}
}
#media (min-width: 1000px) {
.wrapper {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"navbar navbar navbar"
"hero hero hero"
"week-nav table aside"
"week-nav main aside"
"footer footer footer";
}
}
#media (max-width: 500px) {
table {
display: none;
}
}
Hope this helps!
I am creating an responsive web page. I have two articles floated left and two asides floated right. I would like the two asides to align vertically at the top with the first article. Originally the asides aligned perfectly with the articles as in the HTML I put the asides in between the two articles.
But when making the page responsive, I found that when I tried to collapse the asides to the bottom of the page, beneath the articles, they showed up in the middle of the two articles when I wanted the asides to show up underneath the two articles. So I moved the asides to the bottom of the page in my HTML, and thus my problem was created.
I have tried to clear the floats and to display both the articles and asides with inline-block but I wasn't able to make it work.
EDIT: A person suggested (and then deleted their response?) absolute positioning the asides. I have tried to do this, but I feel like it messes up the responsive design so I would like to avoid it if possible.
Here is the JSfiddle.
#charset"utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End of CSS reset */
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* General styles */
/* Background pattern from Subtle Patterns, by Atle Mo: http://subtlepatterns.com/green-cup/ */
body {
line-height: 1.4;
background-image: url(../images/green_cup.png);
}
.wrapper {
width: 960px;
/* 960px; */
margin: 0 auto;
}
/* Header styles */
header {
font-family:'Playfair Display', serif;
font-size: 23px;
}
.header-text {
margin: 0 auto;
width: 800px;
font-family:'Playfair Display', serif;
text-align: center;
color: #1d464f;
font-size: 2.1em;
/* 50px; */
}
.header-text-below {
margin: 0 auto;
width: 800px;
text-align: center;
font-family:'Merriweather', serif;
font-size: 1.1em;
/* 25px; */
color: #256139;
padding-bottom: 10px;
}
/* End Header styles */
/* Nav */
nav {
width: 100%;
background-color: white;
border-bottom: 4px solid #78605C;
height: 60px;
}
nav ul {
padding-top: 7px;
margin-left: 19%;
}
nav li {
float: left;
display: block;
text-align: center;
list-style-type: none;
width: 19%;
}
nav a {
display: block;
font-family:'Playfair Display', serif;
color: #2A879C;
text-decoration: none;
font-size: 30px;
}
nav a:hover, nav a:focus, nav a:active {
color: #78605C;
}
/* Typography */
h1 {
color: #1d464f;
}
.article-header {
color: #1d464f;
padding-top: 4px;
font-size: 35px;
}
p {
font-family:'Merriweather', serif;
line-height: 1.4em;
font-size: 1em;
}
.date-circle {
font-family:'Merriweather', serif;
border-radius: 50%;
background-color: #78605C;
color: white;
height: 60px;
width: 60px;
float: left;
font-size: 14px;
text-align: center;
padding-top: 20px;
margin-right: 10px;
margin-bottom: 5px;
clear: both;
}
.read-more a {
color: #78605C;
font-family:'Merriweather', serif;
text-decoration: none;
font-weight: bold;
}
.featured {
color: #256139;
font-family:'Merriweather', serif;
font-weight: bold;
font-size: 20px;
}
/* End Typography */
img {
max-width: 100%;
height: auto;
}
/* Articles */
article {
float: left;
display: inline-block;
width: 67.39%;
/* 620px / 960px = 67.39%, target / context = result */
padding: 10px;
padding-top: 10px;
background-color: white;
}
article:nth-of-type(2) {
margin-bottom: 20px;
}
.clear {
clear: left;
}
/* Borders of articles and asides */
article:nth-of-type(1) {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-color: #DED8AA;
border-width: 4px;
}
article:nth-of-type(2) {
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-color: #DED8AA;
border-width: 4px;
}
aside:nth-of-type(1) {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-color: #DED8AA;
border-width: 4px;
}
aside:nth-of-type(2) {
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-color: #DED8AA;
border-width: 4px;
}
/* End borders */
/* Aside, right side div */
aside {
float: right;
width: 31.25%;
/* 300px / 960px = 31.25%, target / context = result */
padding: 10px;
padding-top: 10px;
background-color: white;
}
/* Font awesome styling, social media icons from: http://fortawesome.github.io/Font-Awesome/ */
.iconContact {
width: 235px;
margin: 0 auto;
}
.iconContact a {
color: #2A879C;
transition: color 0.3s ease;
text-align: center;
float: left;
display: inline-block;
padding: 10px;
}
.iconContact a:hover {
color: #78605C;
}
/* Media queries
Your blog web page should be usable at the following sizes at a minimum:
i. Smartphone – portrait (320px wide)
ii. Smartphone – landscape (480px wide)
iii. Tablet – portrait (768px wide)
iv. Tablet – landscape(1024px wide)
v. Desktop – widths wider than 1024px
*/
#media only screen and (max-width: 1080px) {
main {
width: 90%;
margin: 0 auto;
}
.article-header {
padding-top: 8px;
font-size: 1.2em;
/* 35px; */
}
#media only screen and (max-width: 980px) {
.wrapper {
width: 80%;
/* 960px; */
margin: 0 auto;
}
nav ul {
padding-top: 7px;
margin-left: 0;
}
nav li {
float: left;
display: block;
text-align: center;
list-style-type: none;
width: 25%;
}
.header-text {
margin: 0 auto;
width: 80%;
/* 800px; */
font-family:'Playfair Display', serif;
text-align: center;
color: #1d464f;
font-size: 2.1em;
/* 50px; */
}
.header-text-below {
margin: 0 auto;
width: 80%;
/* 800px; */
text-align: center;
font-family:'Merriweather', serif;
font-size: 1.1em;
/* 25px; */
color: #256139;
padding-bottom: 10px;
}
main {
width: 100%;
margin: 0 auto;
}
.article-header {
padding-top: 8px;
font-size: 1.2em;
/* 35px; */
}
.iconContact a {
padding: 6px;
}
}
#media only screen and (max-width: 920px) {
.iconContact a {
padding: 4px;
}
}
#media only screen and (max-width: 890px) {
.header-text-below {
font-size: 1em;
/* 25px; */
}
}
#media only screen and (max-width: 860px) {
.iconContact a {
padding: 3px;
}
#media only screen and (max-width: 830px) {
.iconContact a {
padding: 2px;
}
}
#media only screen and (max-width: 800px) {
.header-text-below {
font-size: 0.9em;
/* 25px; */
}
.iconContact a {
padding: 1px;
}
#media only screen and (max-width: 890px) {
.header-text-below {
font-size: 1em;
/* 25px; */
}
}
#media only screen and (max-width: 768px) {
aside {
float: none;
width: 100%;
}
article {
width: 100%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A Healthy Zest; A food blog begins</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<!-- Responsive media queries -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Recipes
</li>
<li>Contact
</li>
</ul>
</nav>
<div class="wrapper">
<header>
<h1 class="header-text"> A Healthy Zest </h1>
<h2 class="header-text-below"> Carefully curated recipes for those on the go </h2>
</header>
<main>
<!-- Articles, left hand side -->
<article>
<header>
<div class="date-circle">May 02</div>
<h1 class="article-header">Organic Italian pizza</h1>
</header>
<!--- Image in blog post, figure -->
<figure>
<img src="images/pizza-600.jpg" alt="Delicious Italian Cheese and Tomato Pizza" width="600" height="400">
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat lectus quis tellus venenatis pellentesque. Vestibulum et aliquam ipsum. Suspendisse dapibus nibh arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed posuere urna ut tortor vulputate porttitor. Maecenas eget ultrices felis, at luctus justo. Etiam blandit placerat lacus vel tristique. Suspendisse ultrices iaculis eros sed molestie. Nulla eget ante eleifend, vulputate nunc in, congue orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin id tellus dolor. Aenean maximus eros porttitor erat consequat, vel iaculis dui faucibus. Vestibulum aliquet lorem at mi pretium ultricies. Suspendisse tempor pulvinar rutrum. Morbi consequat eget nunc id lobortis. Pellentesque ut tincidunt lectus. In hac habitasse platea dictumst. Duis gravida neque sit amet nunc vestibulum, non interdum ante dictum. Fusce semper pharetra lectus nec auctor. Sed dignissim cursus leo, et porttitor sem porta quis. Etiam facilisis volutpat neque, vitae rutrum purus fermentum vitae. Donec sed nunc dolor. Sed sed rutrum mi. Sed malesuada lobortis aliquet. Praesent vel nisl in massa dictum varius. Nullam nec magna arcu. Vivamus at dolor id neque iaculis rhoncus. Suspendisse aliquet libero felis, vitae tincidunt lectus placerat a. Duis a dictum lacus. Donec ut libero diam. Phasellus scelerisque mattis felis, ut malesuada neque pellentesque et. In arcu sem, convallis ac fermentum sed, consequat et tellus. Donec eu orci quis sapien aliquet porttitor sit amet eu metus. Etiam non sodales risus. Suspendisse placerat sem eu dolor porta tempor.</p>
<p class="read-more"> Read more...
</p>
</article>
<article>
<header>
<div class="date-circle">April 08</div>
<h1 class="article-header">Healthy whole-grain sandwich</h1>
</header>
<!--- Image in blog post, figure -->
<figure>
<img src="images/sandwich-600.jpg" alt="Healthy sandwich with lettuce, egg and cream cheese" width="600" height="400">
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat lectus quis tellus venenatis pellentesque. Vestibulum et aliquam ipsum. Suspendisse dapibus nibh arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed posuere urna ut tortor vulputate porttitor. Maecenas eget ultrices felis, at luctus justo. Etiam blandit placerat lacus vel tristique. Suspendisse ultrices iaculis eros sed molestie. Nulla eget ante eleifend, vulputate nunc in, congue orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin id tellus dolor. Aenean maximus eros porttitor erat consequat, vel iaculis dui faucibus. Vestibulum aliquet lorem at mi pretium ultricies. Suspendisse tempor pulvinar rutrum. Morbi consequat eget nunc id lobortis. Pellentesque ut tincidunt lectus. In hac habitasse platea dictumst. Duis gravida neque sit amet nunc vestibulum, non interdum ante dictum. Fusce semper pharetra lectus nec auctor. Sed dignissim cursus leo, et porttitor sem porta quis. Etiam facilisis volutpat neque, vitae rutrum purus fermentum vitae. Donec sed nunc dolor. Sed sed rutrum mi. Sed malesuada lobortis aliquet. Praesent vel nisl in massa dictum varius. Nullam nec magna arcu. Vivamus at dolor id neque iaculis rhoncus. Suspendisse aliquet libero felis, vitae tincidunt lectus placerat a. Duis a dictum lacus. Donec ut libero diam. Phasellus scelerisque mattis felis, ut malesuada neque pellentesque et. In arcu sem, convallis ac fermentum sed, consequat et tellus. Donec eu orci quis sapien aliquet porttitor sit amet eu metus. Etiam non sodales risus. Suspendisse placerat sem eu dolor porta tempor.</p>
<p class="read-more">
Read more...
</p>
</article>
<!-- Aside, right sidebar, author bio-->
<aside>
<!-- Social media icons -->
<div class="iconContact">
<a href="#">
<i class="fa fa-facebook fa-3x"></i>
</a>
</div>
<div class="iconContact">
<a href="#">
<i class="fa fa-twitter fa-3x"></i>
</a>
</div>
<div class="iconContact">
<a href="#">
<i class="fa fa-instagram fa-3x"></i>
</a>
</div>
<div class="iconContact">
<a href="#">
<i class="fa fa-pinterest fa-3x"></i>
</a>
</div>
<!-- Social media icons end -->
<figure>
<img src="images/author-300.png" alt="Picture of the author of the food blog" width="300" height="294">
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat lectus quis tellus venenatis pellentesque. Vestibulum et aliquam ipsum. Suspendisse dapibus nibh arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed posuere urna ut tortor vulputate porttitor. Maecenas eget ultrices felis, at luctus justo. Etiam blandit placerat lacus vel tristique.</p>
</aside>
<!-- Aside, right sidebar, featured posts -->
<aside>
<h1 class="featured">Featured Posts</h1>
<a href="#">
<figure>
<img src="images/smoothie-300.jpg" alt="Delicious Green Smoothie with bananas and strawberries on the side" width="300" height="200">
</figure>
</a>
<a href="#">
<figure>
<img src="images/oatmeal-300.jpg" alt="Healthy oatmeal with bananas and nuts sprinkled on top" width="300" height="200">
</figure>
</a>
</aside>
<div class="clear"></div>
</div>
<!-- end wrapper -->
</main>
<footer class="clear"></footer>
</body>
</html>
I suggest using the flexible box model to accomplish what you want.
Remove all floats.
Turn your containing element <main> into a flexbox container:
main {
display: flex;
}
Put all of your left side content into a <div id="left"> and all of your right side content into <div id="right">.
Now lets remove the grow and shrink properties from these divs:
#left, #right {
flex-grow: 0;
flex-shrink: 0;
}
Now when you want to use a mobile layout, you can have your media queries set flex-direction: column; and flex-grow: 1; and your right side content will drop down underneath your left side content.
You will probably need to move some of your attributes that you gave to each article and aside into their respective left/right column tag.
Here is a jsfiddle
This is a great reference for flexboxes.
I'm trying to create a layout - with a left floating div with vertical video/speaker/information divs and a right floating div with chapters - where the containers for chapters and information both cover the rest of the remaining height, with vertical scroll.
An example layout can be found at http://codepen.io/westis/pen/NPLwmy, with the HTML and CSS below. The embedded video is just an example video.
html, body {
font-family: arial, helvetica;
height: 100%;
margin: 0;
}
.title {
font-size: 1.5em;
padding: 0.5em;
margin-top: 0;
margin-bottom: 1em;
border-bottom: 3px solid #000;
text-transform: uppercase;
}
.main-container {
height: 100%;
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
}
.left {
width: 59%;
margin-right: 2%;
float: left;
flex-direction: column;
display: flex;
position:relative;
flex-grow: 1;
}
.right {
float: right;
width: 39%;
background: #ff8100;
flex-direction: column;
display: flex;
position:relative;
flex-grow: 1;
}
.video {
position: relative;
padding-bottom: 57.25%;
padding-top: 25px;
height: 0;
z-index: 99;
flex: 1 1 auto;
}
.video iframe, .video video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.speaker-container {
display: block;
width: 100%;
flex: 1 0 auto;
background: #ccc;
}
.speaker {
display: block;
float: left;
padding: 0.5em;
line-height: 1.5em;
}
.main-container h2 {
font-size: 1.5em;
line-height: 1.5;
font-style: normal;
font-weight: 400;
margin: 0;
}
.info-container {
overflow-y: auto;
flex: 1 0.5 auto;
margin-top: 1em;
}
.info {
background: #739bd2;
padding: 0.5em;
}
.chapter-container {
min-height: 200px;
overflow-y: auto;
}
.chapter-list {
padding: 0;
border-bottom: 1px solid #444;
margin: 0;
list-style: none;
}
.chapter {
display: block;
}
.chapter a {
padding: 0.5em 1em;
border-top: 1px solid #000;
text-decoration: none;
color: #000;
display: block;
}
h2 {
flex: 0 0 auto;
}
footer {
clear: both;
background: #000;
color: #fff;
padding: 1em;
}
<h1 class="title">Agenda title</h1>
<div class="main-container">
<div class="left">
<div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/lbtxvWsNERY?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
<div class="speaker-container">
<div class="speaker">Some name
</div>
</div>
<div class="info-container">
<div class="info scrollbox">
<h2 class="info-title">Chapter 1</h2>
<div class="info-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at lobortis sapien. Vivamus lacinia egestas diam et faucibus. Curabitur ac mi fermentum, sodales arcu a, consectetur ipsum. Cras blandit lorem quis erat viverra, at iaculis enim consectetur. Vestibulum vel fermentum erat. Nam at justo ac elit pellentesque semper. Vivamus fringilla mattis nisl ut convallis. Nullam urna sem, pharetra sit amet hendrerit convallis, facilisis sed tortor. Integer suscipit hendrerit sollicitudin. Phasellus tristique orci enim, sit amet varius nulla faucibus quis.</p>
<p>Fusce massa quam, eleifend a ligula ut, porttitor suscipit turpis. Fusce id metus vitae nisi efficitur consequat in vitae arcu. Phasellus euismod hendrerit euismod. Vivamus maximus, nibh in dignissim viverra, massa eros lobortis lorem, at mollis elit purus at felis. Sed iaculis sed lacus a tristique. Mauris porta sodales massa, vel ultricies eros tristique a. Phasellus dolor justo, porta egestas elementum nec, interdum ut orci. Donec id orci nisl. Quisque sed erat nisi. Etiam ultrices nulla sit amet augue ultrices, ut ornare urna mattis.</p>
<p>Sed tortor ante, bibendum nec justo vel, efficitur tincidunt ex. Vestibulum condimentum neque et tincidunt dignissim. Maecenas eu erat ligula. Morbi quis dui a tortor hendrerit euismod. Aenean nibh odio, maximus sed nibh vitae, sagittis egestas sem. Fusce sapien nulla, malesuada molestie eros et, tristique lobortis libero. Quisque eget purus tortor. Sed eros odio, ultrices id ornare non, varius eu tellus. Morbi ante lectus, aliquam fermentum ligula sed, hendrerit luctus turpis. Duis sem neque, tincidunt ut gravida nec, lobortis at eros. Proin ullamcorper dui eu feugiat egestas. Nulla facilisi. Suspendisse a mollis arcu.</p></div>
</div>
</div>
</div>
<div class="right">
<h2>Chapters</h2>
<div class="chapter-container">
<ul class="chapter-list">
<li class="chapter">chapter 1</li>
<li class="chapter">chapter 2</li>
<li class="chapter">chapter 3</li>
<li class="chapter">chapter 4</li>
<li class="chapter">chapter 5</li>
<li class="chapter">chapter 6</li>
<li class="chapter">chapter 7</li>
<li class="chapter">chapter 8</li>
<li class="chapter">chapter 9</li>
<li class="chapter">chapter 10</li>
<li class="chapter">chapter 11</li>
<li class="chapter">chapter 12</li>
<li class="chapter">chapter 13</li>
<li class="chapter">chapter 14</li>
<li class="chapter">chapter 15</li>
<li class="chapter">chapter 16</li>
<li class="chapter">chapter 17</li>
<li class="chapter">chapter 18</li>
<li class="chapter">chapter 19</li>
<li class="chapter">chapter 20</li>
</ul>
</div>
</div>
</div>
<footer>Some footer</footer>
Using flex I have more or less accomplished what I want. But my questions are:
Is it possible to set a min-height to a flex-item, so that the flex
container increases beyond 100% height? As it is now, the info
container below the video and speaker container disappears when
browser is not tall enough.
Also, I seem to need to put flex-shrink to 0 for the
speaker-container div, or else it does not always show. But when
decreasing the browser height, this means that the
speaker-container (flex item) displays on top of the footer. How
can I avoid that?
The issue that CSS flexbox doesn't work properly in IE 10 and below probably
means I cannot accomplish this kind of layout for those
browsers? Some users will use IE9/IE10 so I would either need a fallback or they'd have to accept only having a page scroll.
I am trying to create a layout with the header and footer at 100% width while the container has a width of 940px. I have seen an example of this on blogs and news websites. Instead of floating the contained content, it has the appearance of being anchored to the top and bottom of the page.
Also the website I am creating has only a few pages so I've placed the navigation within the header. The navigation is centered by using absolute positioning.
When I shrink the window (in any browser) everything stays in its place except that I see a white background covering the content below the header. I don't know why this is happening but I think the dropdown menu might have caused a problem. Thanks
Here's my CSS code:
body,html,ul,li{
margin:0;
padding:0;
color:#000;
}
#wrap-head {
width:100%;
margin:0 auto;
background-image:url('header-bg.png');
}
#header {
width: 940px;
height: 140px;
max-height:130px;
position: relative;
margin-left:auto;
margin-right:auto;
padding: 0;
clear:both;
background-color: white;
}
.logo {
position: absolute;
top:0;
left:0;
}
#nav {
position:absolute;
top:48px;
left:470px;
}
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
/* Clear floats */
float:left;
z-index:5;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:6px;
color:#fff;
background:#0066ff;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#0066ff;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
left:0px;
background:#ccc;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#0066ff;
text-decoration:underline;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#333;
}
/*-- MAIN BODY STYLES --*/
#wrap-body {
width:100%;
margin:0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.875em;
background-color: black;
overflow:hidden;
}
h2 {
margin:0 0 1em;
}
#container {
width:940px;
margin:0 auto;
overflow:hidden;
background-color: #666666;
}
#content {
float:left;
width:640px;
padding:5px 10px;
background-color:#666666;
}
#sidebar {
float:right;
width:260px;
padding:5px 10px;
background:#CCC;
}
#footer {
clear:both;
padding:5px 10px;
background:#333;
}
#footer p {
margin:0;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
* html #footer {
height:1px;
}
#footercontent {
margin-left:auto;
margin-right: auto;
width: 940px;
height:126px;
padding:0px;
clear:both;
}
Here's the HTML
<body>
<div id="wrap-head">
<div id="header">
<img class="logo" src="logotest.gif" width="280" height="110" />
<ul id="nav">
<li>
HOME
</li>
<li>
ABOUT IMHS
<ul>
<li>
Introduction
</li>
<li>
Mission Statement
</li>
<li>
Member Profiles
</li>
</ul>
</li>
<li>
NEWS
</li>
<li>
FEATURES
<ul>
<li>
Articles
</li>
<li>
Book Reviews
</li>
<li>
Monthly Feature
</li>
<li>
IMH Schoolhouse
</li>
</ul>
</li>
<li>
LINKS
</li>
</ul>
</div>
</div>
<!--END OF NAVIGATION-->
<!--END OF NAVIGATION-->
<div id="wrap-body">
<div id="container">
<div id="content">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h3>Consectetuer adipiscing elit</h3>
<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div id="sidebar">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
</div>
</div>
<div id="footer">
<div id="footercontent">
<p>aaaaa aaaa </p>
</div>
</div>
</div>
</body>
Thanks
you should give the min-width to your body
body{
min-width:940px;
}
or see the live demo with your updated code:- http://jsfiddle.net/WnecH/1/
I am getting the following validation errors:
Line 63, Column 7: End tag for body seen but there were unclosed elements.
</body>
Line 19, Column 25: Unclosed element section.<section id="content"
I am using a HTML5 validator and I suspect this error is why my sidebar is not aligning.
CSS:
html{
height:100%;
}
body{
width:960px;
height:100%;
margin:0 auto;
}
p,h1,h2{
margin:25px;
}
header{
width:100%;
border-bottom:1px solid green;
}
header #logo{
height:90px;
width:150px;
border:1px solid red;
}
header nav{
width:100%;
height:45px;
border:1px solid red;
}
header nav ul{
float:left;
}
header nav ul li{
display:inline;
}
header nav li a{
float:left;
text-decoration: none;
margin-left:15px;
}
#content{
float:left;
width:705px;
height:100%;
border:1px solid red;
}
#showcase{
position: relative;
width:705px;
padding:20px 0px 20px 20px;
}
#showcase ul{
float:left;
display:block;
margin-left:-20px;
margin-bottom:20px;
width:200px;
border:1px solid green;
list-style:none;
}
#showcase ul li h3{
margin: 0 0 0 -15px;
letter-spacing: -0.25px;
margin: 4px 0px 3px 0px;
text-indent: 3px;
}
#showcase ul li h3 a {
color: #010101;
text-decoration: none;
}
#showcase ul li h3 a:hover {
color: #4fbcd8;
}
#showcase ul p {
height:70px;
margin:0 0 0 -15px;
line-height: 1.6em;
padding-left: 3px;
}
#showcase ul img{
width:175px;
height:137px;
background-color:pink;
}
#sidebar{
float:right;
height:100%;
width:225px;
border:1px solid red;
}
#box_one, #box_two, #box_three{
height:100px;
border-bottom:1px solid #ccc;
}
footer{
clear:both;
height:24px;
border:1px solid red;
}
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Template 2011</title>
<link rel="stylesheet" href="_assets/css/style.css">
</head>
<body>
<header>
<div id="logo">Template Here</div>
<nav>
<ul>
<li>Page One</li>
<li>Page Two</li>
<li>Page Three</li>
<li>Page Four</li>
</ul>
</nav>
</header>
<section id="content">
<h1>Main Content Section</h1>
<p>Content</p>
<section id="showcase">
<h1>My Work</h1>
<ul><!-- Showcase One -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
</li>
</ul>
<ul><!-- Showcase Two -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
</li>
</ul>
<ul><!-- Showcase Three -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
</li>
</ul>
</section>
<section id="sidebar">
<div id="box_one">
<p>Box One</p>
</div>
<div id="box_two">
<p>Box Two</p>
</div>
<div id="box_three">
<p>Box Three</p>
</div>
</section>
<footer>
<p>This is the footer</p>
</footer>
</body>
add a </section> closing-tag on line 48 just above the other </section> . it is missing there
The following portion of code seems to be missing an end section tag:
<p>Content</p>
<section id="showcase">
<h1>My Work</h1>
<ul><!-- Showcase One -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum...</p>
</li>
</ul>
<ul><!-- Showcase Two -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum....</p>
</li>
</ul>
<ul><!-- Showcase Three -->
<li>
<img src="#" alt="#" />
<br/>
<h3>Photography</h3>
<p>Lorem ipsum...</p>
</li>
</ul>