I have this situation for a academic interview. It's a challenge and instead of spinning my wheels, for monday's final interview, I need help.
I have the following givens:
HTML PAGE that I cannot touch
CSS file where I do everything
An image that represents what the final product needs to be
Now, I'm not asking anyone to do this for me, but rather guide me to complete the task like I would if we were at work collaborating. Help me to think and pair program.
This is a finalist interview that I've been selected for academia. It would be a swan song for my career... but I want to show them that I can reach out for help and work together vice sit there guessing and struggling.
Here's the image:
Here's the HTML that cannot be touched:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- page BEGIN -->
<div class="page-wrapper">
<!-- header BEGIN -->
<div class="page-header-wrapper wrapper">
<header class="page-header inner">
<nav class="main-nav">
<ul class="main-nav-menu menu">
<li class="menu-item">
<a class="menu-link active-path" href="/">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/">News</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/">Features</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/">Events</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/">Contact</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/">About</a>
</li>
</ul>
</nav>
</header>
</div>
<!-- header END -->
<!-- content BEGIN -->
<main class="content">
<!-- top feature BEGIN -->
<div class="top-feature-wrapper wrapper">
<section class="top-feature inner">
<header class="top-feature-header">
<h1>Top Feature</h1>
</header>
<article>
<img class="top-feature-image" src="img/top-feature.png" alt="Top feature placeholder image">
<header class="top-feature-story-header">
<h2>Some text goes here...and here...and here</h2>
<h3>By the great people of...</h3>
</header>
</article>
</section>
</div>
<!-- top feature END -->
<!-- featured stories BEGIN -->
<div class="featured-stories-wrapper wrapper">
<section class="featured-stories inner">
<header class="featured-stories-header">
<h1>Featured<br> Stories</h1>
</header>
<ul>
<li>
<article class="featured-story">
<img class="featured-story-image" src="img/feature.png" alt="Featured story placeholder image">
<span class="story-type">Feature</span>
<header class="featured-story-header">
<h2>Earth Week events begin next week</h2>
<h3>Some text goes here... </h3>
</header>
</article>
</li>
<li>
<article class="featured-story">
<img class="featured-story-image" src="img/feature.png" alt="Featured story placeholder image">
<span class="story-type">Photo Collection</span>
<header class="featured-story-header">
<h2>Photo: 'Big Data' kickoff</h2>
<h3>Some text goes here... </h3>
</header>
</article>
</li>
<li>
<article class="featured-story">
<img class="featured-story-image" src="img/feature.png" alt="Featured story placeholder image">
<span class="story-type">Feature</span>
<header class="featured-story-header">
<h2>Holocaust Survivor to Speak</h2>
<h3>Some text goes here... </h3>
</header>
</article>
</li>
<li>
<article class="featured-story">
<img class="featured-story-image" src="img/feature.png" alt="Featured story placeholder image">
<span class="story-type">Photo Collection</span>
<header class="featured-story-header">
<h2>'Beautiful Terror' on display through April 22</h2>
<h3>Some text goes here... </h3>
</header>
</article>
</li>
</ul>
</section>
</div>
<!-- featured stories END -->
</main>
<!-- content END -->
</div>
<!-- page END -->
</body>
</html>
And now the CSS file that I've been working on.
#charset "utf-8";
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 100;
}
/* headings */
h1, h2, h3, h4, h5, h6 {
line-height: 1.4em;
margin: 20px 0 .4em;
color: #000;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1.1em;
}
h6 {
font-size: 1em;
}
/* Main Settings/RESET */
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
/* This disables text size adjustment on iPhone */
-webkit-text-size-adjust: none;
margin: 0;
padding: 0;
}
/* Set HTML5 elements to BLOCK */
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {
display: block;
}
/* NAVBAR */
.main-nav {
list-style: none;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #fff;
height:38px;
}
.main-nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
width: 100%;
}
.main-nav li {
margin: 0px;
}
.main-nav li a {
padding: 10px;
font-weight: normal;
font-size: 22px;
text-decoration: none;
color: #003f87;
background-color: #fff;
float: left
}
.main-nav li a:hover {
color: #FFFFFF;
background-color: #35af3b;
}
/************************************************************************************
GENERAL STYLING
*************************************************************************************/
body {
background: #fff;
font: 1.05em/150% Arial, Helvetica, sans-serif;
color: #cccccc;
}
a {
color: #026acb;
text-decoration: none;
outline: none;
}
a:hover {
text-decoration: underline;
background-color: #c6db01;
}
p {
margin: 0 0 1.2em;
padding: 0;
}
/* DIV STRUCTURE */
.page-wrapper > .page-header-wrapper {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
div .top-feature-wrapper {
padding-bottom: 60px;
}
div .top-feature-story-header {
padding-left: 10px;
}
div .top-feature-image {
margin-bottom: -30px;
}
div .featured-stories-wrapper .featured-stories {
background-color: #f1f1f1;
}
div .top-feature-wrapper h1 {
font-size: 42px;
padding-left: 10px;
color: #003f87;
}
div .featured-stories-wrapper h1 {
font-size: 42px;
padding-left: 10px;
color: #003f87;
}
div .featured-stories ul {
list-style: none;
}
/* HEADERS */
header h2 {
top: -30px;
padding-left: 10px;
background-color: #0097de;
line-height: 35pt;
width: 750px;
font-size: 22px;
color: #fff;
}
header h3 {
top: -30px;
padding-left: 10px;
background-color: #003f87;
line-height: 35pt;
font-family: "Times New Roman", Georgia, Serif;
width: 300px;
font-size: 18px;
font-style: italic;
color: #fff;
}
/* list */
ul, ol {
margin: 1em 0 1.4em 24px;
padding: 0;
line-height: 140%;
}
li {
margin: 0 0 .5em 0;
padding: 0;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
.page-wrapper {
border-top: #003f87 solid 10px;
}
/************************************************************************************
HEADER
*************************************************************************************/
header {
position: relative;
}
/* Active Link */
.main-nav .menu-link.active-path {
color: #FFFFFF;
background-color: #35af3b;
}
/* Flexible Images */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
/* Media Queries */
#media screen and (max-width: 650px) {
#header {
height: auto;
}
page-header-wrapper {
height: auto;
}
#main-nav {
position: static;
}
#site-description {
margin: 0 0 15px;
position: static;
}
#content {
width: auto;
float: none;
margin: 20px 0;
}
}
#media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
#main-nav a {
font-size: 90%;
padding: 10px 8px;
}
}
The CSS I was given was up to this comment:
/* Main Settings/RESET */
Here's the problem...
When you run this, and you'll need normalize.min.css... everything is PULLED TO THE LEFT. I have tried like heck to center the page-wrapper using the obvious code:
max-width: 1920px; --the width of the image
margin: 0 auto;
But it will not move!
So, I'm seeking not the solution, per se, but collab to help me "see" the solution. Force me to work the problem as you would and I'll post UPDATE 1, UPDATE 2, etc...
Thank you everyone and I will acknowledge Stackoverflow's assistance at my finalist interview at 1PM PDT. This has to go with me, and I'll need to explain the CSS as well.
Help me work the problem and allow me to LEARN.
OF NOTE: They recommend using SASS or LESS, but it's not required. Perhaps therein lies the "solution".
UPDATE 1: Solution for center is:
body {
background: #fff;
font: 1.05em/150% Arial, Helvetica, sans-serif;
color: #cccccc;
/* Added the following which WORKED! */
display: flex;
justify-content: center;
}
UPDATE 2:
This solution from Adrian works correctly as well.
https://codepen.io/anon/pen/qPjeRE
I've tried both: Each has it's benefits... with VXp's, which I like immediately, it was quick and just looks great. Only issue and this is not a roadblock, but the blue strip across the top, no longer extends full with of the browser. Again, it's a non-issue...and will not hurt me.
The only issue with Adrian's is that when I placed the code in my code here on my machine, the menu dropped to a SIDEBAR menu, list style but with no bullets.
It actually look cool! I need to vote for both of you because both of your solutions work well and I will acknowledge.
Secondly, I need to adjust the FEATURE stories so that they are side-by-side and I used list-style: none; but they remain, the way they look.
I know that list-style moves ul's to side-by-side but I need to understand CSS Specificity. I'm using ALL CLASSES and elements to isolate which is needed. This is a real challenge to understand.
I know that ID's take priority, elements are next then classes.
I truly appreciate everyone's help... Oh, another answer just came in. I'll save this and look.
UPDATE 3: SUCCESS!!! Now for the responsiveness factor...
EVERYONE! Please see the completed CSS and give it a try. With help from Adrian and VXp, I've been successful.
BUT the following roadblocks remain:
1. The bottom GRAY does NOT extend left and right
2. The page is NOT responsive and again, I cannot use BOOTSTRAP and cannot touch the HTML code at all.
3. I've incorporated FLEXBOX and find it is working, but... nothing is responsive. That is my final roadblock.
I've fixed the bottom FEATURED STORIES section from research from Adrian and VXp's solutions.
NOW; the main.css solution thus far:
#charset "utf-8";
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 100;
}
/* headings */
h1, h2, h3, h4, h5, h6 {
line-height: 1.4em;
margin: 20px 0 .4em;
color: #000;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1.1em;
}
h6 {
font-size: 1em;
}
/* Main Settings/RESET */
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
/* This disables text size adjustment on iPhone */
-webkit-text-size-adjust: none;
margin: 0;
padding: 0;
}
/* Set HTML5 elements to BLOCK */
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {
display: block;
}
/* NAVBAR */
.main-nav {
list-style: none;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #fff;
height: 43px;
}
.main-nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
width: 100%;
}
.main-nav li {
margin: 0px;
}
.main-nav li a {
padding: 10px;
font-weight: normal;
font-size: 22px;
text-decoration: none;
color: #003f87;
background-color: #fff;
float: left
}
.main-nav li a:hover {
color: #FFFFFF;
background-color: #35af3b;
}
/************************************************************************************
GENERAL STYLING
*************************************************************************************/
body {
background: #fff;
font: 1.05em/150% Arial, Helvetica, sans-serif;
color: #cccccc;
display: flex;
justify-content: center;
border-top: #003f87 solid 10px;
}
a {
color: #026acb;
text-decoration: none;
outline: none;
}
a:hover {
text-decoration: underline;
background-color: #c6db01;
}
p {
margin: 0 0 1.2em;
padding: 0;
}
/* DIV STRUCTURE */
/* Added on 9302017 */
div .featured-stories-wrapper {
}
/* Added on 9292017 */
div .top-feature-wrapper {
padding-bottom: 60px;
}
div .top-feature-story-header h2 {
padding-left: 10px;
background-color: #0097de;
width: 750px;
font-size: 22px;
color: #fff;
margin-left: 20px;
}
div .top-feature-story-header h3 {
padding-left: 10px;
background-color: #003f87;
font-family: "Times New Roman", Georgia, Serif;
width: 300px;
font-size: 18px;
font-style: italic;
color: #fff;
margin-left: 20px;
}
div .top-feature-image {
margin-bottom: -30px;
}
/* Featured Stories */
div .featured-stories-wrapper {
background-color: #f1f1f1;
}
div .top-feature-wrapper h1 {
font-size: 42px;
background-color: #c6db02;
color: #003f87;
width: 400px;
padding-top: 10px;
padding-left: 30px;
padding-right: 14px;
padding-bottom: 10px;
-webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
clip-path: polygon(100% 0, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
}
div .featured-stories-wrapper h1 {
font-size: 42px;
padding-left: 10px;
color: #003f87;
}
header.featured-story-header h2 {
width: 210px;
line-height: 1.3em;
color: #000;
font-size: 22px;
}
header.featured-story-header h3 {
width: 215px;
line-height: 1.5em;
color: #000;
font-size: 16px;
}
/* span for GREEN POLYGON */
span.story-type {
position:relative;
top: -36px;
margin-left: -18px;
background-color: #c6db02;
color: #003f87;
text-align:right;
font-size: 18px;
padding-top: 10px;
padding-left: 30px;
padding-right: 14px;
padding-bottom: 10px;
-webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%, 10% 50%, 0% 0%);
clip-path: polygon(100% 0, 100% 100%, 0% 100%, 10% 50%, 0% 0%);
}
div .featured-stories ul {
list-style: none;
column-count: 4;
column-gap: 38px;
width: 1050px;
}
div .featured-stories ul li {
width: 200px;
}
/************************************************************************************
FEATURED STORIES
*************************************************************************************/
/* HEADERS */
header h2 {
top: -30px;
padding-left: 10px;
line-height: 35pt;
}
header h3 {
top: -30px;
padding-left: 10px;
line-height: 35pt;
}
/* list */
ul, ol {
margin: 1em 0 1.4em 24px;
padding: 0;
line-height: 140%;
}
li {
margin: 0 0 .5em 0;
padding: 0;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
/************************************************************************************
HEADER
*************************************************************************************/
header {
position: relative;
}
/* Active Link */
.main-nav .menu-link.active-path {
color: #FFFFFF;
background-color: #35af3b;
}
/* Flexible Images */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
/* Media Queries */
#media screen and (max-width: 650px) {
header {
height: auto;
}
.page-wrapper {
width: 980px;
margin: 0 auto;
}
.page-header-wrapper {
height: auto;
}
.main-nav {
position: static;
}
.featured-stories-wrapper {
margin: 0 0 15px;
position: static;
}
.content {
width: auto;
float: none;
margin: 20px 0;
}
}
#media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
#main-nav a {
font-size: 90%;
padding: 10px 8px;
}
}
You can use the power of flexbox on the parent to make the magic happen.
body {
display: flex;
justify-content: center;
}
Since the div.page-wrapper is the only direct child of the parent body, this works like a charm.
Perhaps your monitor is full HD and setting the page to its full width doesn't seem to work for you. Set the wrapper to smaller width, like this:
/************************************************************************************
STRUCTURE
*************************************************************************************/
body {
border-top: #003f87 solid 10px;
}
.page-wrapper {
width: 1260px;
margin:auto;
}
The only difference would be, that you have to move border-top to Body element for it to cover full screen.
Demo: https://codepen.io/anon/pen/qPjeRE
edit:
Some extra code to help you with your further tasks:
/************************************************************************************
STRUCTURE
*************************************************************************************/
body { border-top: #003f87 solid 10px;}
.page-wrapper {width: 1260px; margin:auto;}
.featured-story {width: 22%; float:left; margin:1%; border: 1px dashed #f00; }
.featured-story h2, .featured-story h3 {width: auto; font-size: 15px; line-height: 25px; background: none;color: black; }
.featured-story h2 {font-weight: bold;}
.featured-story h3 {font-style:normal;}
DEMO: https://codepen.io/anon/pen/xXrvmV?editors=1100
I see other users are addressing solutions to your problem. I wanted to stress this point that you tried:
I have tried like heck to center the page-wrapper using the obvious
code:
max-width: 1920px; --the width of the image margin: 0 auto; But it
will not move!
You have a good point, but the wrong target and the wrong size. The page-wrapper div is covering the whole width of the viewport, so you can't center it. You can center it's children, there's a .content div that wraps all the content (but the header). You can center it using the margin technique you tried:
.content {
max-width: 800px;
margin: 0 auto;
}
You need to set a width or max-width smaller than the viewport width, and set both margins left and right to auto. You can use both width and max-width to keep it responsive:
.content {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
Remember that it only works to center block elements.
So here's the snippet with .content as showed before:
#charset "utf-8";
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 100;
}
/* headings */
h1, h2, h3, h4, h5, h6 {
line-height: 1.4em;
margin: 20px 0 .4em;
color: #000;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1.1em;
}
h6 {
font-size: 1em;
}
/* Main Settings/RESET */
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
/* This disables text size adjustment on iPhone */
-webkit-text-size-adjust: none;
margin: 0;
padding: 0;
}
/* Set HTML5 elements to BLOCK */
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {
display: block;
}
/* NAVBAR */
.main-nav {
list-style: none;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #fff;
height:38px;
}
.main-nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
width: 100%;
}
.main-nav li {
margin: 0px;
}
.main-nav li a {
padding: 10px;
font-weight: normal;
font-size: 22px;
text-decoration: none;
color: #003f87;
background-color: #fff;
float: left
}
.main-nav li a:hover {
color: #FFFFFF;
background-color: #35af3b;
}
/************************************************************************************
GENERAL STYLING
*************************************************************************************/
html,body {
background: #fff;
font: 1.05em/150% Arial, Helvetica, sans-serif;
color: #cccccc;
}
a {
color: #026acb;
text-decoration: none;
outline: none;
}
a:hover {
text-decoration: underline;
background-color: #c6db01;
}
p {
margin: 0 0 1.2em;
padding: 0;
}
/* DIV STRUCTURE */
.content {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.page-wrapper > .page-header-wrapper {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
div .top-feature-wrapper {
padding-bottom: 60px;
}
div .top-feature-story-header {
padding-left: 10px;
}
div .top-feature-image {
margin-bottom: -30px;
}
div .featured-stories-wrapper .featured-stories {
background-color: #f1f1f1;
}
div .top-feature-wrapper h1 {
font-size: 42px;
padding-left: 10px;
color: #003f87;
}
div .featured-stories-wrapper h1 {
font-size: 42px;
padding-left: 10px;
color: #003f87;
}
div .featured-stories ul {
list-style: none;
}
/* HEADERS */
header h2 {
top: -30px;
padding-left: 10px;
background-color: #0097de;
line-height: 35pt;
width: 750px;
font-size: 22px;
color: #fff;
}
header h3 {
top: -30px;
padding-left: 10px;
background-color: #003f87;
line-height: 35pt;
font-family: "Times New Roman", Georgia, Serif;
width: 300px;
font-size: 18px;
font-style: italic;
color: #fff;
}
/* list */
ul, ol {
margin: 1em 0 1.4em 24px;
padding: 0;
line-height: 140%;
}
li {
margin: 0 0 .5em 0;
padding: 0;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
.page-wrapper {
border-top: #003f87 solid 10px;
}
/************************************************************************************
HEADER
*************************************************************************************/
header {
position: relative;
}
/* Active Link */
.main-nav .menu-link.active-path {
color: #FFFFFF;
background-color: #35af3b;
}
/* Flexible Images */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
/* Media Queries */
#media screen and (max-width: 650px) {
#header {
height: auto;
}
page-header-wrapper {
height: auto;
}
#main-nav {
position: static;
}
#site-description {
margin: 0 0 15px;
position: static;
}
#content {
width: auto;
float: none;
margin: 20px 0;
}
}
#media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
#main-nav a {
font-size: 90%;
padding: 10px 8px;
}
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<!-- Your css file
<link rel="stylesheet" href="css/main.css">
-->
</head>
<body>
<!-- page BEGIN -->
<div class="page-wrapper">
<!-- header BEGIN -->
<div class="page-header-wrapper wrapper">
<header class="page-header inner">
<nav class="main-nav">
<ul class="main-nav-menu menu">
<li class="menu-item">
<a class="menu-link active-path" href="/">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/">News</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/">Features</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/">Events</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/">Contact</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/">About</a>
</li>
</ul>
</nav>
</header>
</div>
<!-- header END -->
<!-- content BEGIN -->
<main class="content">
<!-- top feature BEGIN -->
<div class="top-feature-wrapper wrapper">
<section class="top-feature inner">
<header class="top-feature-header">
<h1>Top Feature</h1>
</header>
<article>
<img class="top-feature-image" src="https://placeimg.com/800/480/nature" alt="Top feature placeholder image">
<header class="top-feature-story-header">
<h2>Some text goes here...and here...and here</h2>
<h3>By the great people of...</h3>
</header>
</article>
</section>
</div>
<!-- top feature END -->
<!-- featured stories BEGIN -->
<div class="featured-stories-wrapper wrapper">
<section class="featured-stories inner">
<header class="featured-stories-header">
<h1>Featured<br> Stories</h1>
</header>
<ul>
<li>
<article class="featured-story">
<img class="featured-story-image" src="https://placeimg.com/200/200/people" alt="Featured story placeholder image">
<span class="story-type">Feature</span>
<header class="featured-story-header">
<h2>Earth Week events begin next week</h2>
<h3>Some text goes here... </h3>
</header>
</article>
</li>
<li>
<article class="featured-story">
<img class="featured-story-image" src="https://placeimg.com/200/200/people" alt="Featured story placeholder image">
<span class="story-type">Photo Collection</span>
<header class="featured-story-header">
<h2>Photo: 'Big Data' kickoff</h2>
<h3>Some text goes here... </h3>
</header>
</article>
</li>
<li>
<article class="featured-story">
<img class="featured-story-image" src="https://placeimg.com/200/200/people" alt="Featured story placeholder image">
<span class="story-type">Feature</span>
<header class="featured-story-header">
<h2>Holocaust Survivor to Speak</h2>
<h3>Some text goes here... </h3>
</header>
</article>
</li>
<li>
<article class="featured-story">
<img class="featured-story-image" src="https://placeimg.com/200/200/people" alt="Featured story placeholder image">
<span class="story-type">Photo Collection</span>
<header class="featured-story-header">
<h2>'Beautiful Terror' on display through April 22</h2>
<h3>Some text goes here... </h3>
</header>
</article>
</li>
</ul>
</section>
</div>
<!-- featured stories END -->
</main>
<!-- content END -->
</div>
<!-- page END -->
</body>
</html>
You can center the header too:
.content, .page-header-wrapper {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
Flexbox is a good solution, but it lacks support in older browsers (https://www.w3schools.com/css/css3_flexbox.asp), so it's good to cover both aproaches.
I previously had an issue with floating 3 divs in my footer area which got resolved here by re-ordering the divs and adding an 'overflow:hidden' to my enclosing footer div. Now though I seem to have an extra space (like an extra return) coming between the preceding div and my footer. Just wondering what would be causing this - I had previously set a top margin of 10px to my footer div. Have now removed this but still a large extra space. Ideally I want to set the space (height) to 1opx.
Thanks for any suggestions. Here's the html...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>K Blondel Design :: Carpentry & Funiture Design :: Brighton</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="oneColFixCtr.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Abel|Cutive+Mono|Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="subcontainer">
<div class="header">
<div id="mainNav">
<ul id="mainNav">
<li>Home</li>
<li>About Us</li>
<li>Our Work </li>
<li>Contact Us </li>
</ul>
</div>
<div class="contact">
E : click here
<br />
T : 07585 607521
</div>
</div>
<div class="lineborder">
</div>
<div class="sidebar-logo"><img src="Images/k-blondel-design-logo.png" width="64" height="108" alt="K Blondel Design logo" />
</div>
<div id="contentright">
<div class="galleryimg"><div class="photo"><img src="Images/winebar-furniture-01.jpg" width="145" height="200" alt="Winchester winebar" /></div></div>
<div class="galleryimg"><div class="photo"><img src="Images/wooden-outdoor-seating.jpg" width="145" height="200" alt="Winchester winebar" /></div></div>
<div class="galleryimg"><div class="photo"><img src="Images/wooden-shelving.jpg" width="145" height="200" alt="Winchester winebar" /></div></div>
<div class="galleryimg"><div class="photo"><img src="Images/wooden-winerack.jpg" width="145" height="200" alt="Winchester winebar" /></div></div>
</div>
<div id="content">
<h1>Instructions </h1>
<p>At K Blondel Design we aim to fill the gap between the over exuberant furniture maker and the general carpenter. Trained in the art of creating affordable and elegant solutions to 3D problems.</p>
<p>As a small business we are able to deliver a personal one to one design service, talking through various design and material possibilities and arriving at an affordable, bespoke and stylish solution.</p>
<p>From design through to construction and installation we specialise in storage solutions, furniture and interiors for both the domestic and commercial markets. </p>
<p>Based in Brighton we have 20 years' design and commercial experience and an ever-growing client list spanning Sussex, Hampshire, London and Kent.</p>
<!-- end .content -->
</div>
<div class="lineborder"></div>
<div id="footer">
<div class="footercolleft">
Carpentry<br/>
Furniture Design<br/>
Interior Design & Decoration
</div>
<div class="footercoladdress">
Copyright © 2014 Kevin Blondel Design<br />1 Park Terrace, Brighton BN1 0GT
</div>
<div class="footercolright">
Storage Solutions<br/>
Decking & Wooden Flooring<br/>
Shop Fitting / Commercial Interiors
</div>
</div>
<!-- end .subcontainer --></div>
<!-- end .container --></div>
</body>
</html>
and the css...
#charset "UTF-8";
body {
font: 100%/1.4;
background-color:#FFF;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 10px;
padding-left: 40px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
h1 {
font-family: 'Abel', Arial, sans-serif;
font-size:24px;
font-weight: normal;
}
h2 {
font-family: 'Abel', Arial, sans-serif;
font-size:18px;
}
p {
font-family: 'Cutive Mono', Georgia, serif;
font-size:13px;
line-height:1.4em;
font-weight:600;
}
#home #homelink,
#aboutus #aboutuslink,
#ourwork #ourworklink,
#contactus #contactuslink {
font-family: 'Abel', Arial, sans-serif;
color: #494949;
font-size:17px;
text-decoration:none;
border-bottom: solid 6px #494949;
}
#mainNav {
margin: 0;
padding: 0;
list-style: none;
}
#mainNav li {
float: left;
padding: 50px 14px 0 14px;
}
#mainNav a {
font-family: 'Abel', Arial, sans-serif;
color: #494949;
font-size:17px;
text-decoration:none;
padding: 0 20px 0 20px;
}
#mainNav a:hover {
color:#FFF;
background-color: #494949;
}
img {
border: none;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #494949;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #494949;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
width: 1352px;
background-image:url(Images/sktchbook-bgd.jpg);
background-repeat:no-repeat;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
.header {
width: 950px;
height: 72px;
margin-left:90px;
margin-right: 90px;
}
.header img{
border:none;
}
.lineborder {
width: 950px;
background-color:#494949;
height: 1px;
margin-left:110px;
margin-right:110px;
}
.contact {
float: right;
padding: 27px 0 0 0;
font-family: 'Abel', Arial, sans-serif;
color: #494949;
font-size:17px;
}
.sidebar-logo {
float: left;
width: 70px;
}
.subcontainer {
width: 1150px;
min-height: 880px;
margin: 0 auto;
/* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
#content {
padding: 40px 0;
width: 420px;
margin-left:90px;
margin-right:90px;
min-height:475px;
}
#contentright {
float: right;
padding: 40px 0;
width: 420px;
margin-right:90px;
}
.galleryimg {
display: inline-block;
vertical-align: top;
margin: 0 40px 30px 0;
}
.photo {
-moz-box-shadow: 2px 2px 2px 0px #888;
-webkit-box-shadow: 2px 2px 2px 0px #888;
box-shadow: 2px 2px 2px 0px #888;
}
.photo img {
border: 10px solid #fff;
background-color: #fff;
position: relative;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#footer {
padding: 0 0 0 20px;
width: 950px;
height: 150px;
margin-left:90px;
margin-right: 90px;
font-family: 'Abel', Arial, sans-serif;
color: #494949;
font-size:14px;
line-height: 1.5em;
overflow:hidden;
}
#footer a {
text-decoration:none;
padding: 0 5px 0 5px;
}
#footer a:hover {
color:#FFF;
background-color: #494949;
}
.footercolleft {
padding: 0;
margin: 0;
float: left;
width: 200px;
overflow:hidden;
}
.footercolright {
padding: 0;
width: 200px;
overflow:hidden;
}
.footercoladdress {
float:right;
padding: 0 5px 0 5px;
text-align: right;
width:250px;
}
It's coming from the bottom padding on #contentright:
You can fix that by setting the bottom padding to 0:
#contentright {
/* Your existing styles plus...*/
padding-bottom: 0;
}
Then you can apply your 10px margin-top back to your footer:
#footer {
/* Your existing styles plus...*/
margin-top: 10px;
}
Demo
I'm trying to float a div to the right of my footer after 2 other divs (ie 3 columns) and want them to line up horizontally but the one I'm floating right keeps dropping down below the 2 on the left. Can anyone help with this?
Here's the code...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>K Blondel Design :: Carpentry & Funiture Design :: Brighton</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="oneColFixCtr.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Abel|Cutive+Mono|Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="subcontainer">
<div class="header">
<div id="mainNav">
<ul id="mainNav">
<li>Home</li>
<li>About Us</li>
<li>Our Work </li>
<li>Contact Us </li>
</ul>
</div>
<div class="contact">
E : click here
<br />
T : 07585 607521
</div>
</div>
<div class="lineborder">
</div>
<div class="sidebar-logo"><img src="Images/k-blondel-design-logo.png" width="64" height="108" alt="K Blondel Design logo" />
</div>
<div id="contentright">
<div class="galleryimg"><div class="photo"><img src="Images/winebar-furniture-01.jpg" width="145" height="200" alt="Winchester winebar" /></div></div>
<div class="galleryimg"><div class="photo"><img src="Images/wooden-outdoor-seating.jpg" width="145" height="200" alt="Winchester winebar" /></div></div>
<div class="galleryimg"><div class="photo"><img src="Images/wooden-shelving.jpg" width="145" height="200" alt="Winchester winebar" /></div></div>
<div class="galleryimg"><div class="photo"><img src="Images/wooden-winerack.jpg" width="145" height="200" alt="Winchester winebar" /></div></div>
</div>
<div id="content">
<h1>Instructions </h1>
<p>At K Blondel Design we aim to fill the gap between the over exuberant furniture maker and the general carpenter. Trained in the art of creating affordable and elegant solutions to 3D problems.</p>
<p>As a small business we are able to deliver a personal one to one design service, talking through various design and material possibilities and arriving at an affordable, bespoke and stylish solution.</p>
<p>From design through to construction and installation we specialise in storage solutions, furniture and interiors for both the domestic and commercial markets. </p>
<p>Based in Brighton we have 20 years' design and commercial experience and an ever-growing client list spanning Sussex, Hampshire, London and Kent.</p>
<p>
<!-- end .content --></p>
</div>
<div class="lineborder"></div>
<div id="footer">
<div class="footercolleft">
Carpentry<br/>
Furniture Design<br/>
Interior Design & Decoration
</div>
<div class="footercolright">
Storage Solutions<br/>
Decking & Wooden Flooring<br/>
Shop Fitting / Commercial Interiors
</div>
<div class="footercoladdress">
Copyright © 2014 Kevin Blondel Design<br />1 Park Terrace, Brighton BN1 0GT
</div>
</div>
<!-- end .subcontainer --></div>
<!-- end .container --></div>
</body>
</html>
and here's the css...
#charset "UTF-8";
body {
font: 100%/1.4;
background-color:#FFF;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 10px;
padding-left: 40px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
h1 {
font-family: 'Abel', Arial, sans-serif;
font-size:24px;
font-weight: normal;
}
h2 {
font-family: 'Abel', Arial, sans-serif;
font-size:18px;
}
p {
font-family: 'Cutive Mono', Georgia, serif;
font-size:13px;
line-height:1.4em;
font-weight:600;
}
#home #homelink,
#aboutus #aboutuslink,
#ourwork #ourworklink,
#contactus #contactuslink {
font-family: 'Abel', Arial, sans-serif;
color: #494949;
font-size:17px;
text-decoration:none;
border-bottom: solid 6px #494949;
}
#mainNav {
margin: 0;
padding: 0;
list-style: none;
}
#mainNav li {
float: left;
padding: 50px 14px 0 14px;
}
#mainNav a {
font-family: 'Abel', Arial, sans-serif;
color: #494949;
font-size:17px;
text-decoration:none;
padding: 0 20px 0 20px;
}
#mainNav a:hover {
color:#FFF;
background-color: #494949;
}
img {
border: none;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #494949;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #494949;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
width: 1352px;
background-image:url(Images/sktchbook-bgd.jpg);
background-repeat:no-repeat;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
.header {
width: 950px;
height: 72px;
margin-left:90px;
margin-right: 90px;
}
.header img{
border:none;
}
.lineborder {
width: 950px;
background-color:#494949;
height: 1px;
margin-left:110px;
margin-right:110px;
}
.contact {
float: right;
padding: 27px 0 0 0;
font-family: 'Abel', Arial, sans-serif;
color: #494949;
font-size:17px;
}
.sidebar-logo {
float: left;
width: 70px;
}
.subcontainer {
width: 1150px;
min-height: 880px;
margin: 0 auto;
/* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
#content {
padding: 40px 0;
width: 420px;
margin-left:90px;
margin-right:90px;
min-height:475px;
}
#contentright {
float: right;
padding: 40px 0;
width: 420px;
margin-right:90px;
}
.galleryimg {
display: inline-block;
vertical-align: top;
margin: 0 40px 30px 0;
}
.photo {
-moz-box-shadow: 2px 2px 2px 0px #888;
-webkit-box-shadow: 2px 2px 2px 0px #888;
box-shadow: 2px 2px 2px 0px #888;
}
.photo img {
border: 10px solid #fff;
background-color: #fff;
position: relative;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#footer {
padding: 10px 0 0 20px;
width: 950px;
height: 150px;
margin-left:90px;
margin-right: 90px;
font-family: 'Abel', Arial, sans-serif;
color: #494949;
font-size:14px;
line-height: 1.5em;
}
#footer a {
text-decoration:none;
padding: 0 5px 0 5px;
}
#footer a:hover {
color:#FFF;
background-color: #494949;
}
.footercolleft {
padding: 0;
margin: 0;
float: left;
width: 200px;
overflow:hidden;
}
.footercolright {
padding: 0;
width: 200px;
overflow:hidden;
}
.footercoladdress {
float:right;
padding: 0 5px 0 5px;
text-align: right;
width:250px;
}
Many thanks!
When floating two items to the right, the one that comes first will actually go to the far right. And since you aren't floating the 'middle' column, it has a margin on the right that pushes the address column down.
DEMO
Switch the order of your html:
<div id="footer">
<div class="footercolleft">
Carpentry<br/>
Furniture Design<br/>
Interior Design & Decoration
</div>
<div class="footercoladdress">
Copyright © 2014 Kevin Blondel Design<br />1 Park Terrace, Brighton BN1 0GT
</div>
<div class="footercolright">
Storage Solutions<br/>
Decking & Wooden Flooring<br/>
Shop Fitting / Commercial Interiors
</div>
</div>
Thanks for the above comments. It was fixed as suggested above by re-ordering the html so that the right floating div came in between the 2 left hand columns. I also added another 'overflow: hidden' to the #footer properties.