Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics Controlling Layout with CSS Display Modes Positioning Elements Side-By-Side with Inline Display

Malcolm Stretten
Malcolm Stretten
3,814 Points
Posted by Malcolm Stretten
Malcolm Stretten
3,814 Points

Linked floated elements problem

Can ANYONE out there solve this problem?

I have a layout of pix positioned using floated elements. It all works brilliantly until I try to link the pix.

What happens is the FIRST pic and only the first pic moves up - or it might be all the others move down. It's not the pic itself - doesn't matter which pic I use, always it's the first one that moves. And the only thing I have done is add a link - I've left the link there. If I link all of them the same thing happens, just the first pic jumps out of alignment.

Hope someone can help as it's driving me mad!

Here is the HTML...

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>James Stretten | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One Open+Sans:400,400italic,700,700italic,800' rel='stylesheet'type='text/css'> <link rel="stylesheet" href="css/mainJS.css"> <meta name="viewport" content="width=device-width, initial-scale =1.0">

</head> <body>

<div class="wrap">

<div class = "main-header">
<img class="logo1" src ="img/jamesstretten2.png"><h2>Songs</h2></div>

<nav>
<ul>
<li><a href="#">Songs</a></li>
<li><a href="#">Other Music</a></li>
<li><a href="#">Contact</a></li>
</ul>


<div class="container">

<a href="#"><img class="floating-box" src="http://www.jamesstretten.co.uk/img/NothingLastsForever-thumb.jpg"></a> <img class="floating-box" src="http://www.jamesstretten.co.uk/img/HardLesson-thumb.jpg"> <div class="floating-box-cap">Nothing Lasts Forever</div> <div class="floating-box-cap">Hard Lesson</div> <img class="floating-box" src="http://www.jamesstretten.co.uk/img/SeaOfTroubles-thumb.jpg"> <img class="floating-box" src="http://www.jamesstretten.co.uk/img/InHollywood-thumb.jpg"> <div class="floating-box-cap">Sea Of Troubles</div> <div class="floating-box-cap">In Hollywood</div> <img class="floating-box" src="http://www.jamesstretten.co.uk/img/TheRide-thumb.jpg"> <img class="floating-box" src="http://www.jamesstretten.co.uk/img/HalfAnHour-thumb.jpg"> <div class="floating-box-cap">The Ride</div> <div class="floating-box-cap">Half An Hour</div> <img class="floating-box" src="http://www.jamesstretten.co.uk/img/ColdAsTheMoon-thumb.jpg"> <img class="floating-box" src="http://www.jamesstretten.co.uk/img/LovesJustAWord-thumb.jpg"> <div class="floating-box-cap">Cold As The Moon</div> <div class="floating-box-cap">Love's Just A Word</div> </div>

<div class="spacer" style="clear: both;"></div> </div>

<footer class="main-footer">
    <span><p>&copy;James Stretten 2016</p></span>
</footer>

</body> </html>

and here is the CSS...

/*************** GENERAL ****************/

  • { box-sizing: border-box; }

  • { letter-spacing: 2px; }

body { margin: 0; padding: 0; height: 100%; font-family: 'Open-sans' sans-serif; background: #0d3869; color: #fff; }

html { height: 100%; }

p { font-size: 0.8em; line-height: 1.2em; color: #fff; font-weight: normal; }

h2 { font-size: 1.2em; font-weight: 100; letter-spacing: 1px; color: #fff; padding-top: 10px; }

a:link { text-decoration: none; color: #fff; font-family: 'Open-sans' sans-serif; display: inline; } a:visited { color: #fff; text-decoration: none; } a:hover { color:#CC0066 text-decoration: none; }

.rule { color: #ff0000; }

.smalltext { font-size: 10px; color: #fff; }

/* ================================= Base Layout Styles ==================================== */

/Navigation/

nav { text-align: center;

}

nav ul { list-style: none; font-size: 12px; margin: 0 0px; padding: 0; background-color:#0099CC; max-width: 100%; }

nav li { display: inline-block; }

nav a { font-weight: 400; padding: 15px 10px; text-decoration: none;

}

.main { width: 100%; margin-bottom: 10px;

}

.logo1 { display: block; margin-left: auto; margin-right: auto; max-width: 80%; margin-bottom: -20px; padding-top: 10px; border-bottom: solid red 2px;
}

/* ---- Layout Containers ---- */

.wrap { min-height: calc(100vh - 40px); }/calc is css function that subtracts the depth of the footer from 100%/

.container { max-width: 88%; font-weight: normal;

margin-left: auto;
margin-right: auto;

}

.main-header { background-color: #0d3869; text-align: center;

}

.floating-box { display: inline-block; width: 42%; margin: 4%; border: 1px solid red; float: left; margin-bottom: -5px; }

.floating-box-cap { display: inline-block; width: 42%; margin: 4%; font-size: 9px; float: left; text-align: left;

}

.floating-box-cap2 { display: inline-block; width: 42%; margin: 4%; font-size: 9px; float: left; text-align: left;

}

.main-footer { text-align: center; background: #0099CC; height: 40px; opacity: 0.5; padding-top: 1px; }

/* ---- Page Elements ---- */

/* ================================= Media Queries ==================================== */

@media (min-width: 769px) {

.container { width: 90%; margin: 0 auto; }

.name, .col { float: left; }

.primary, .secondary { width: 50%;

}

.main-nav { float: right; }

.main-nav li { display: inline-block; margin-left: 5px;

}

.tagline { font-size: 1.4em; }

/* ---- Float clearfix ---- */

.clearfix::after {
    content: " ";
    display: table;
    clear: both;
}

2 Answers

Yevgeniy Alexeyev
Yevgeniy Alexeyev
3,591 Points
Yevgeniy Alexeyev
Yevgeniy Alexeyev
3,591 Points

In html code you have miss </nav> closing tag

<nav>
<!-- open here -->
<ul>
<li><a href="#">Songs</a></li>
<li><a href="#">Other Music</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- and not closed here-->
Malcolm Stretten
Malcolm Stretten
3,814 Points
Malcolm Stretten
Malcolm Stretten
3,814 Points

Yevgeniy - Thank you so much! I can't believe I missed that.