For my example, I'm copying the styles and structure from the new Marvel App site. I'm wanting to accomplish the way they have an element 'house' their logo and their navigation. As you can see from their source, as well as mine, there seems to be a lot of elements at play with this method. There are two things I want to know:
1.) What's causing my copied code not being able to mimic the way Marvel has it? What am I doing wrong?
2.) Can this be simplified with less, more manageable code?
My code that I copied, for practice purposes, is below along with a link to the codepen.
HTML
<div class="header-bar-wrapper headroom headroom--top" id="header">
<div class="height-100 pageWrap">
<nav class="navHeight">
<a href="#" class="float-left height-100">
<div class="display-table height-100">
<div class="display-tableCell verticalAlign-middle">
<svg version="1.1" id="Layer_1" class="display-block" width="40px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#00E06A;}
</style>
<rect class="st0" width="100" height="100"/>
</svg>
</div>
</div>
</a>
<div class="navigation-links">
<div class="display-table height-100">
<div class="display-tableCell verticalAlign-middle">
<div class="breakPointM-inline breakPoint-textAlign-right">
<div class="navigation-link-wrapper wrapper-one breakPointM-marginRight-m breakPointL-paddingRight-s">
Features
</div>
<div class="navigation-link-wrapper wrapper-one breakPointM-marginRight-m breakPointL-paddingRight-s">
Pricing
</div
<div class="navigation-link-wrapper wrapper-one breakPointM-marginRight-m breakPointL-paddingRight-s">
Blog
</div
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
CSS
.header-bar-wrapper {
min-height: 70px;
z-index: 200;
top: 0;
left: 0;
height: 10%;
width: 100%;
display: block;
background-color: black;
}
.pageWrap:after, .breakPointM-inline:after {
content: "";
display: table;
width: 100%;
clear: both;
}
.pageWrap:before, .breakPointM-inline:before {
content: "";
display: table;
width: 100%;
}
.pageWrap {
margin-left: auto;
margin-right: auto;
}
.navHeight {
height: 100%;
}
.float-left {
float: left;
}
.height-100 {
height: 100%;
}
.width-90, .pageWrap {
width: 90%;
}
.display-block {
display: block;
}
.display-table {
display: table;
width: 100%;
}
.display-tableCell {
display: table-cell;
}
.verticalAlign-middle {
vertical-align: middle;
}
.navigation-links {
z-index: 300;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
float: right;
position: relative;
}
.breakPointM-inline {
font-size: 16px;
}
.navigation-link-wrapper {
transform: translateY(0);
margin-bottom: 0;
text-align: left;
vertical-align: middle;
display: inline-block;
position: relative;
}
.breakPointM-marginRight-m {
margin-right: 20px;
}
CodePen
I've played around a little with this, supported only HTML5 and CSS3.
Dont bother pasting into codepen or jsfiddle, test it locally on actual browser.
I've colored the green area for your logo image
You'll notice what I've done in the CSS is simply centered the anchor tags inside the list item elements using the CSS transform:translate.
and floated the list items to the right of the nav element.. let me know what you think.
HTML
<head>
<title> Alternative </title>
<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<header>
<div id="logo"></div>
<nav>
<ul>
<li> Home </li>
<li> About </li>
<li> Contact </li>
</ul>
</nav>
</header>
</body>
CSS
* {
margin:0;
padding:0;
}
html, body {
width:100%;
height:100%;
}
header {
height:15%;
position:relative;
}
#logo {
background-color:green;
width:20%;
height:100%;
float:left;
}
nav {
width:80%;
height:100%;
float:left;
}
li {
width:20%;
float:right;
height:100%;
position:relative;
list-style-type:none;
}
a {
text-decoration:none;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
Copying and pasting code directly from another website most of the time is a horrible idea, mainly for a few reasons:
1 . You don't acquire the necessary skills to tackle problems which are not solvable by copy and paste.
2.You don't gain insight on how exactly the code works, neither you can see properly which framework they are using in order to construct the given website.
3 . Regarding your question 1, if you have to copy the entire source code and you are wondering what is not right...everything you've done is wrong.
4 . In my opinion it can be done it more easily manageable code because "table" is horribly outdated.
I hope my answer helped in some way.
Related
I am trying to code a basic HTML navigation header for fun and teach myself some CSS/HTML but I cannot get things to arrange in the way I had intended.
I would like to have a logo on the far left, some links to pages in the middle and a user icon on the right, here is a moc idea:
This is the result of butchering code together :(
I think for my idea to work I need to create 3 element locations inside one overall container.
Something like this but I can't seem to find a efficient way of doing so:
This is my current CSS code:
html {
height:100%;
background-color: #f8f8ff;
min-width: 800px;
max-width: 1000px;
margin: auto;
}
body {
background-color: #FFF;
}
.topnav-logo{
float:left;
background-color: #f8f8ff;
margin: 0;
padding: 0;
}
.topnav-profile{
float:right;
background-color: #f8f8ff;
}
.topnav{
background-color: #f8f8ff;
margin: 0;
padding: 0;
width: auto;
}
ul.topnav {
list-style-type: none;
overflow: hidden;
}
/* Float the list items side by side */
ul.topnav li {
float: left;
line-height: 110px;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: RGB(120,200,250);
padding: 0px 10px;
text-decoration: none;
transition: 0.3s;
font-size: 30px;
}
and the HMTL to go with it currently looks like this:
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<title> </title>
</head>
<body>
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a>
</ul>
body content
</body>
Thanks for the length read and any help is appreciated :)
Edit: So many great replies, thanks all! Sorry for the late feed-back, NYE distractions :(
Just for clarification, I am not looking to put physical visable lines between the logo, links and the profile. I am only using those images as a demonstration as to where I would like each element container. I am looking to align the link text and the profile image as follows:
Links: vertical middle, horizontal middle
Profile img: vertical middle, horizontal right.
Since you're doing for fun i think this is simplest as it gets :)
I didnt do all the tweaking for perfect layout but here is what i think you wanted.
Simply make 3 inline blocks give them text-align:left , center and right and width 33% approx ( including Borders and stuffs) so they take nett 33% each block.
UPDATE for vertical alignment .
div{
display: inline-block;
width:32%;
height: 50px;
line-height:50px;
background-color: pink;
}
.left{
text-align: left;
}
.middle{
text-align: center;
}
.right{
text-align: right;
}
<div class="left">
<span>Logo here on far left</span>
</div>
<div class="middle">
<span>link1</span>
<span>link2</span>
<span>link3</span>
</div>
<div class="right">
<span>User Icon on far right</span>
</div>
Please try this:
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<title> </title>
</head>
<body>
<div class="header">
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<li><a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a></li>
</ul>
</div>
body content
</body>
</html>
Here is css:
html {
height:100%;
background-color: #f8f8ff;
min-width: 800px;
max-width: 1000px;
margin: auto;
}
body {
background-color: #FFF;
}
.header{
display:inline-block;
}
.topnav-logo{
background-color: #f8f8ff;
margin: 0;
padding: 0;
}
.topnav-profile{
background-color: #f8f8ff;
}
.topnav{
background-color: #f8f8ff;
margin: 0;
padding: 0;
width: auto;
}
ul.topnav {
list-style-type: none;
overflow: hidden;
}
ul.topnav li a {
color: RGB(120,200,250);
padding: 0px 10px;
text-decoration: none;
transition: 0.3s;
font-size: 30px;
}
Give necessary padding and margin.
Try this -
Make a container like structure with 3 divs aligned in the same line for Top navigation. You have 2 options to align - (i) use display:inline-block or (ii) float
<div class="container">
<div class="nav-container">
<div class="left">
<a>
<img width="100" height="100" src="https://cdn2.iconfinder.com/data/icons/social-media-8/512/image3.png" alt="site-logo"></a>
</div>
<div class="mid">
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div class="right">
<a class="topnav-profile" href="index.html"><img width="100" height="100" src="http://www.aspirehire.co.uk/aspirehire-co-uk/_img/profile.svg" alt="user profile"></a>
</div>
</div>
</div>
CSS -
.container {
position:relative;
width:80%;
margin:0 auto;
border:1px solid #cccccc;
}
.nav-container {
border:1px solid #cccccc;
height:100px;
}
.left {
float:left;
border:1px solid #cccccc;
width:20%;
height:100%;
}
.mid {
float:left;
border:1px solid #cccccc;
width:59%;
height:100%;
}
.right {
float:right;
width:20%;
height:100%;
border:1px solid #cccccc;
}
See Fiddle
the your super close to the way I usually handle that. If you put your entire nav-bar in a div tag or even better a nav tag and give it an appropriate class name, then you can style it much easier.
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<title> </title>
</head>
<body>
<nav class="primaryNav">
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<li><a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a></li>
</ul>
</nav>
body content
</body>
CSS
.primaryNav{
height: whatever;
width: whatever:
}
.primaryNav ul{
list-style:none;
width: whatever;
float: right
}
.primaryNav li{
display:inline-block;
margin:I usually give a margin here;
}
.primaryNav a{
padding:10px;
}
something like this. I also closed your a tag in an li if you want to control just that one you can also use .primaryNav li:nth-last-child(1)
also about that image you have there, check out Font Awesome, they have tons of easy to use icons, you can use their cdn, or get the whole css file. It can be deff be fun to play with.
Check this out, similar to what you want.
It is based on the moc idea image you provided.
Use it as a guide.
#main{
width: 99%
height: 700px;
border: 1px solid grey;
}
#content{
width: 90%;
height: inherit;
border-right: 1px solid grey;
border-left: 1px solid grey;
margin: 0 auto ;
}
#header{
width: 100%;
border-bottom: 1px solid grey;
height: 80px;
}
.logo{
width: 20%;
height: inherit;
float: left;
border-right: 1px solid grey;
}
.logo img{
max-width: 80px;
max-height: 80px;
padding: 5px;
}
.nav{
width: 50%;
float: left;
margin-right: 5px;
padding: 5px;
}
.icon{
width: 20%;
float: left;
margin-left: 5px;
padding: 5px;
}
.icon img{
max-width: 60px;
max-height: 60px;
}
.nav ul li{
display: inline;
text-decoration: none;
padding: 5px;
border: 1px dashed orangered;
margin: 5px;
}
.text p{
padding: 10px 10px 0;
}
<body>
<div id="main">
<div id="content">
<div id="header">
<div class="logo">
<img src="http://res.cloudinary.com/wisdomabioye/image/upload/v1462961781/about_vbxvdi.jpg" alt="Image" />
</div>
<div class="nav">
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</div>
<div class="icon">
<img src="http://res.cloudinary.com/wisdomabioye/image/upload/v1477218723/images_a0xbmx.png" alt="icon" />
</div>
</div>
<div class="text">
<p>
What is Stick Checking?
The act of using the hockey stick to knock the puck off of the puck carrier's stick or to clear it away from their vicinity.
Sporting Charts explains Stick Checking
Stick checking is a defensive move where a player will stop the puck carrier's progression by knocking the puck off of their stick and out of their possession. It's often done when the defender isn't in a position to stop the attacker by using their body. Stick checking has been used in hockey since day one. There are several variations of the move, such as the poke, tap, sweep, and press check. Another common stick check is lifting the opponent's stick while they're in possession of the puck and then taking it away from them. A good stick check will result in the defending player gaining possession of the puck which will then allow them to start an offensive play. Stick checking can also be considered an offensive play when it's performed in the opponent's zone by a fore checker. A successful stick check in the offensive zone can often lead to a scoring chance.
</p>
<p>
What is Stick Checking?
The act of using the hockey stick to knock the puck off of the puck carrier's stick or to clear it away from their vicinity.
Sporting Charts explains Stick Checking
Stick checking is a defensive move where a player will stop ion of the puck and then taking it away from them. A good stick check will result in the defending player gaining possession of the puck which will then allow them to start an offensive play. Stick checking can also be considered an offensive play when it's performed in the opponent's zone by a fore checker. A successful stick check in the offensive zone can often lead to a scoring chance.
</p>
</div>
</div>
</div>
</body>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html {
height:100%;
background-color: gold;
min-width: 800px;
max-width: 1000px;
margin: auto;}
body {
background-color: #ddd;}
.topnav-logo{
float:left;
background-color: red;
margin: 0;
padding: 0;
width:calc(10% - 2*1px);height:110px;
border:1px solid}
.topnav-profile{
float:right;
background-color: pink;
width:calc(10% - 2*1px);height:110px;
border:1px solid}
.topnav{
margin: 0;
padding: 0;
width: 80%;}
ul {
list-style-type: none;
overflow: hidden;}
/* Float the list items side by side */
.topnav li {
float: left;border:1px solid;
margin-right:.5em;
line-height: 110px;
width:calc(100% /3 - 1*.5em - 2*1px)}
/* Style the links inside the list items */
.topnav li a {
color: RGB(120,200,250);
text-decoration: none;
transition: 0.3s;
font-size: 30px;}
</style>
</head>
<body>
<header>
<div class="topnav-profile">
<img src="images/profile.png" alt="user profile"></div>
<div class="topnav-logo">
<img src="images/logo.jpg" alt="site-logo"></div>
<nav>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</header>
<div>2 logos: user profile must be first to float right . Each logo has width:calc(10% - 2*1px)*2, and the nav element:width:calc(100% / the number of links you want - 1*.5em -margin-- -2*1px --border--). See in codepen </div>
</body>
I tried displaying text over an image with the code below like the following;
<div class="wrapper">
<img src="https://cdn0.vox- cdn.com/thumbor/qLH7593e3D2SSSIdkwgBWdYhjjk=/289x0:802x684/400x533/filters:forma t(webp)/cdn0.vox-cdn.com/uploads/chorus_image/image/47859707/6621139883_e6be6a217a_b__1_.0.0.jpg" alt="" />
<div class="overlay">
<h2>Restaurant Stowaway Devours $800 of Roast Goose and Wine</h2>
</div>
</div>
CSS
body {
text-align: center;
}
.wrapper {
display: inline-block;
margin-top: 25px;
position: relative;
}
.wrapper img {
display: block;
max-width:100%;
}
.wrapper .overlay {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.25);
color:white;
}
But it comes out like this:
Please help me, what have I missed? Because I want the output to be like the first image that I have shown above.
You have to add class to your header h2 tag and add the following style to it.
Add the following class,
<h2 class="header">Restaurant Stowaway Devours $800 of Roast Goose and Wine</h2>
h2.header {
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
}
I have written this code,all the divs are working properly also the nav is. But the black color of the "header" does not seem to work. I have posted the whole code below.Please have a look at the following code.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
padding: 0;
}
#container
{
margin: 0 auto;
width:100%;
height: 1500px;
padding: 0px;
}
#header
{
background-color: black;
margin: 0px;
}
#logo
{
background-color: green;
}
#headTable
{
float:right;
}
#logo
{
margin: 5px 0px 5px 70px;
float: left;
width:150px;
height:100px;
}
#headTable ul
{
list-style-type: none;
margin: 0;
}
#headTable ul li
{
color: black;
float: left;
margin: 10px 50px;
}
#nav
{
clear: both;
width:100%;
height: 100px;
background-color: purple;
}
#nav ul
{
margin-left: 100px;
padding: 0;
}
#nav ul li
{
display: block;
margin: 10px;
padding: 20px;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="plane.jpg" width="150" height="100">
</div>
<div id="headTable">
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Menu</li>
<li>Blog</li>
<li>Ins</li>
<li>BBC</li>
<li>Contact</li>
<li>Others</li>
</ul>
</div>
<div id="content">
<div id="page">
<p>This is a paragraph that should
stay intact inside the id of Page.
</p>
</div>
<div id="top">
<p>THis is a paragraph that should
stay intact inside the id of top.
</p>
</div>
<div id="low">
<p>This is a paragraph that should
stay intact inside the id of bottom.
</p>
</div>
</div>
</div>
</body>
</html>
Add overflow:auto to #header:
#header {
background-color: black;
margin: 0px;
overflow:auto;
}
jsFiddle example
Floating the content makes the parent act as if there's no content and it collapses. Adding the overflow rules restores the behavior you seek.
Because #header in this context has no defined size because the only elements it contains have floats.
Three easy ways around this:
Explicitly define dimensions for #header.
Add display:inline-block to #header.
Use a clearfix after the two floated elements in #header. This is done most commonly by using <div style="clear:both;"><!-- --></div>
you must put some "Height" to you #header tag in CSS. Good Luck !
I created a jsfiddle : http://jsfiddle.net/JsA7y/.
So , of course I might have the same "problem" as you ;
the img src point nowhere (in the jsfiddle).
? Where does your img point to ?
? Is the img in the same directory as your html ?
=> Other wise , you will need to use the correct uri ;
such as , if the img is in a directory at the same level as the html :
<img src="directory/plane.jpg" width="150" height="100">
...
Hope this helps.
i have 4 social media buttons in a div and i want to space them equally but i can't figure out how to?
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<img src="Images/facebooksmall.png" />
<img src="Images/twittersmall.png" />
<img src="Images/googlesmall.png" />
<img src="Images/linkedinsmall.png" />
</div>
</div>
</div>
I would place a div around the images and place the height of the divs to 25%.
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<div class="social_btn">
<img src="Images/facebooksmall.png"/>
</div>
<div class="social_btn">
<img src="Images/twittersmall.png"/>
</div>
<div class="social_btn">
<img src="Images/googlesmall.png"/>
</div>
<div class="social_btn">
<img src="Images/linkedinsmall.png"/>
</div>
</div>
</div>
</div>
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
.social_btn {
height: 25%;
}
If your container div is a fixed width here's what I usually do, assuming 48x48 icons:
HTML
<div id="social">
<img id="twitter" />
<img id="facebook" />
<img id="linkedin" />
</div>
CSS
#social {
width: 154px;
height: 48px;
}
#social img {
width: 48px;
height: 48px;
float: left;
margin-right: 5px;
background-image: url('icons.png');
background-position: 0px 0px;
}
#social img:last-child{
margin-right: 0px;
}
#social img#twitter {
background-position: -48px 0px;
}
#social img#facebook {
background-position: -96px 0px;
}
Then make a PNG file with just the icons without any padding
I only can think of the use of padding:
HTML:
<div>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/googlesmall.png"/>
<img class="imagePadding" src="Images/linkedinsmall.png"/>
</div>
CSS:
.imagePadding
{
padding: 10px;
}
For vertically centering the block please check the following fiddle http://jsfiddle.net/L4su9/3/
.socialbuttonstop
{
height: 150px;
width: 35px;
position: absolute;
top:50%;
margin:-75px 0 0 0;
/* negate top pixels =-"total height/2" */
background:#000;
}
Semantically you should have the HTML set up using an unordered list:
<ul>
<li class="facebook"><span>Facebook</span></li>
<li class="linkedin"><a href="#"><span>Linked In</span></li>
</ul>
CSS:
ul {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
display: block;
}
ul li {
display: block;
width: 35px;
height: 35px;
}
ul li a {
display: block;
background-image: url(facebookSmall.png) no-repeat center;
}
ul li a span {
display: none;
}
Quick explanation. Basically the unordered list tells the browser or someone who is blind that it is a list - which it is. It is a list of social media buttons.
The anchors allows the user to click and go to your Facebook/Linked In page while the span tags enable you to provide helpful text to Google/search engines and those who are blind.
Of course, you CAN still you use the original HTML code that you have but then you should at the least apply alt attributes to the images and consider linking them with parent anchors.
I think this is more than enough information to get you started. I don't think it's fair for me (or anyone else) to give you the complete code. That's the beauty of coding! Problem solving.
Sorry if this is dumb but it is my first day learning CSS and I am following a course and creating a sample layout and I seem to have made some kind of mistake or got carried away adding my own little mods. I desperately want to fix this as I am enjoying learning and worry that if I get stuck on this I wont feel like proceeding.
I have 3 divs at the bottom on my page with the class .Featurebox within which are nested 3 other divs with a class .Boximage
For the life of me I cannot get them to line up horizontally despite floating them. I suspect it is because I have used margin-left:auto and margin-right:auto in a parent nav. I have played with this solution for a full hour LOL and so I am asking for help here as my first time.
Here is my CSS:
#maincontent {
width: 960px;
margin-left: auto; margin-right:auto;
}
body {
background-color: lightgrey;
}
h1 {
color: orange; font-family: ubuntu; padding-top: 10px;
}
header {
margin-top: 2;
width:100%;
height: 100px;
background: url(grey.png) repeat;
}
#headercontainer {
width: 960px; height: 100px;
margin-left: auto; margin-right: auto;
background-color: olive;
}
#navbar {
width: 960px; height: 20px; margin-left: auto; margin-right: auto; background-color: red;
}
#logo {
background-color: lightgrey; height: 100px; width: 100px;
}
nav {
width: 100%; height: 20px; background-color: #f0f0f0; float:left;
}
article {
width: 960px; height: 500px; background-color: orange;
}
.Featurebox {
background-color: darkgrey;
width: 310px;
height: 200px;
float: left;
}
.Boximage {
background-color:blue; width:285px; height: 130px;
float:left;
}
footer {
width: 100%; height: 80; background-color: 000000; clear: left;
}
.center {
margin-left: auto;
margin-right: auto;
}
Here is my HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="headercontainer">
<div id="logo">logo</div>
</div>
<nav>
<div id="navbar">navigation bar</div>
</nav>
</header>
<div id="maincontent">
<article>article here
</article>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
<div class="Featurebox">
<div class="Boximage"</div>
I suspect your issue is the above. Look carefully, and you will see a syntax error. It should be:
<div class="Featurebox">
<div class="Boximage"></div>
For further testing purposes I suggest putting in some inline content in the box to ensure it renders. (if no height or width is specific it will be empty, this is not a problem if a width and height is specified, but I like to cover my bases.) My suggestion would be to simpyl add a paragraph with text.
<div class="Featurebox">
<div class="Boximage"><p>Box 1</p></div>
It should also be noted that if you are floating Featurebox to the left, then it's child does NOT also need to be floated. So you can remove the float: left; on .Boximage
Further more I would suggest you find a good editor to write your code in, something that will color code your elements and highlight the ends of your tags when you are clicked within an element. I personally use notepad++ and dreamweaver, though a lot of people paint a bad picture of dreamweaver, as long as you stay strictly within Code view, then it is a great application to write code with and it features a build in FTP manager.
You're missing the > after the opening part of the .Boximage tag:
<div class="Boximage"</div>
It seems to work if you correct that.
http://jsfiddle.net/CLUTP/1/