I'm quiet surprise I thought the use of container-fluid will give me a full width carousel but it didn't. It has a padding right and left of 15 px so i add a new class remove-padding in order to have no padding but it didn't work.
Any idea for having a carousel without padding ?
$(document).ready(function(){
$('.slick-carousel').slick({
arrows:true,
prevArrow:'<a class="slick-prev"><span class="glyphicon glyphicon-chevron-left"></span></a>',
nextArrow:'<a class="slick-next"><span class="glyphicon glyphicon-chevron-right"></span></a>'
});
});
.slick-prev {
left: 50px;
}
.slick-next {
right: 50px;
}
.slick-prev, .slick-next {
background: none;
border: medium none;
color: blue;
cursor: pointer;
display: block;
font-size: 24px;
height: 20px;
line-height: 0;
margin-top: -10px;
outline: medium none;
padding: 0;
position: absolute;
top: 50%;
width: 20px;
}
.slick-prev:before {
content: "";
}
.slick-next:before {
content: "";
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: #fff; }
.slick-carousel h1{ position:absolute; top:40px; left:20%; color:#fff; }*/
.remove-padding {padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://sandbox.jsnegley.net/jquery/slick-carousel/slick.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://sandbox.jsnegley.net/jquery/slick-carousel/slick.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-12 pen">
<div class="page-header">
<h5>Slick Carousel</h5>
<h1>Basic Carousel</h1>
<ul class="technology">
<li>Bootstrap <span class="label label-default">3.3.4</span></li>
<li>jQuery <span class="label label-default">2.1.3</span></li>
<li>
<span class="glyphicon glyphicon-book"></span> Documentation
</li>
</ul>
</div>
</div>
</div>
<!-- /container --></div>
<div class="container-fluid remove-padding">
<!-- START MOD -->
<div class="slick-carousel">
<div><img src="http://sandbox.jsnegley.net/pics/carousel-1.jpg" class="img-responsive">
<h1>Title 1</h1>
</div>
<div><img src="http://sandbox.jsnegley.net/pics/carousel-2.jpg" class="img-responsive">
<h1>Very long crazy long mega long title</h1>
</div>
<div><img src="http://sandbox.jsnegley.net/pics/carousel-3.jpg" class="img-responsive"><h1>Title Title title</h1></div>
</div>
<!-- END MOD -->
</div>
<!-- /container --></div>
<div class="container"><div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
</div></div>
Add class row next to class slick-carousel.
This fixed the problem.
Some explanation:
.container-fluid adds 15px of padding on the left and right in addition to horizontal auto margin.
You can simply remove .container > .row > .col-sm-12 in your html and just use a div.
Related
I'm trying to make the image resolution width dictate the width of the container. The trick is that when a p element gets wider than the image, the whole container stretches. What I want it to do is for the p element to respect the width of the image and never stretch the container width more than the image does. I don't want to set a fixed width. Here's a demo:
#outer, #inner{
border-width: 1px;
border-style: solid;
box-sizing: border-box;
padding: 5px;
text-align: center;
}
#outer {
border-color red;
}
#inner { border-color: red; display:inline-block; }
img{max-width:100%;}
.fixed {
width:300px; /*This is what i'm trying to avoid*/
}
<!DOCTYPE html>
<html>
<head>
<title>containers, img, p test</title>
</head>
<body>
<div id="outer">
<div id="inner">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
<div id="outer">
<div id="inner" class="fixed">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
<p>
This is how the first one is supposed to look. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
</body>
</html>
Changing the CSS to inline-block will mean the elements increase with the size of the image.
I added inline-block for just the id img to show you how it can work.
#outer, #inner, #img {
border-width: 1px;
border-style: solid;
box-sizing: border-box;
padding: 5px;
text-align: center;
}
#outer {
border-color red;
}
#inner { border-color: red; display:inline-block; }
#img { border-color: blue;display:inline-block;}
img{max-width:100%;}
.fixed {
width:300px; /*This is what i'm trying to avoid*/
}
<!DOCTYPE html>
<html>
<head>
<title>containers, img, p test</title>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="img">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
<div id="outer">
<div id="inner" class="fixed">
<div id="img">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
</div>
<p>
This is how the fist one is supposed to look. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
</body>
</html>
Hope that is what you were after.
I know there's got to be a simple solution to this, but I'm drawing a blank right now.
Here's what I have:
I want the yellow text block to be absolutely positioned inside its parent container, 10 pixels from the right edge. But when I add "position:absolute" and "right:10px" to .text-block, this is what happens:
I know I can just add a fixed height to the parent container for a quick fix, but this will be on a responsive site, so the parent containers need to have a fluid height and width. Here's my code. What am I doing wrong?
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body {
background-color: #FFF;
font-family: helvetica;
color: #333;
}
#wrapper {
padding: 20px;
}
.block {
position: relative;
border: 1px solid #333;
margin-bottom: 10px;
padding: 10px;
}
.text-block {
width: 40%;
background-color: yellow;
position: absolute;
right: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- block -->
<div class="block">
<div class="text-block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- text-block -->
</div> <!-- block -->
<div class="block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- block -->
</div> <!-- wrapper -->
</body>
</html>
Absolute positioning does take it out of the flow, so what it's doing is expected. Here's one solution using relative positioning instead, plus a transform to achieve what you want with no markup changes. There are many ways with different text-align, float, flex solutions to handle this.
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body {
background-color: #FFF;
font-family: helvetica;
color: #333;
}
#wrapper {
padding: 20px;
}
.block {
position: relative;
border: 1px solid #333;
margin-bottom: 10px;
padding: 10px;
}
.text-block {
width: 40%;
background-color: yellow;
position: relative;
left: 100%;
transform:translate(-100%, 0%);
-webkit-transform:translate(-100%, 0%);
}
</style>
</head>
<body>
<div id="wrapper">
<div class="block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- block -->
<div class="block">
<div class="text-block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- text-block -->
</div> <!-- block -->
<div class="block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- block -->
</div> <!-- wrapper -->
</body>
</html>
Absolutely positioned elements do not affect the parent container height.
You need to use Javascript to change the height as a workaround to this behavior (or, alternatively, use relative positioning).
$(document).ready(function() {
var objHeight = 0;
$.each($('.block').children(), function(){
objHeight += $(this).height();
});
$('.block').height(objHeight);
});
This answer is from here: https://stackoverflow.com/a/8185521/722617
I am trying to put a (horizontal) separator div between my 2 content divs. Instead of putting it between them, it shows under my banner div (above the 2 content divs).
Here is structure of my html:
<body>
<div id="page">
<div id="header">
<div id="logo"></div>
</div>
<div id="menuContainer">
<div id="menu">
<ul id="btns">
<li>DOMOV</li>
<li>SVETEĽNÉ ZDROJE</li>
<li>CHLADIČE</li>
<li>NAPÁJANIE</li>
<li>KONEKTORY</li>
<li>OPTIKA/REFLEKTORY</li>
<li>KONTAKTY</li>
</ul>
</div>
</div>
<div id="banner"></div>
<div id="separator"></div>
<div id="contentContainer">
<div id="contentBlock">
<div id="contentLeft">
<p id ="nadpis">LED SVETELNE ZDROJE</p>
<p id ="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar vitae mauris eget vehicula. Integer a mi ut lorem facilisis semper. Etiam faucibus lorem at tellus aliquam, sed aliquet risus venenatis. Etiam vulputate, magna rutrum eleifend rhoncus, justo nulla tristique magna, et tincidunt enim lacus in magna. Curabitur odio risus, eleifend vitae facilisis id, dignissim sed nunc. Pellentesque volutpat metus et scelerisque sagittis. Praesent mattis pulvinar est nec viverra. Nunc suscipit molestie fringilla.</p>
<p id ="katalog">KATALÓG NA STAHNUTIE</p>
<div id="pdf" ></div>
<div id="dodavatelia">
<div id="pic1"></div>
<div id="pic2"></div>
</div>
</div>
<div id="contentRight">
<p id ="rozdelenie">ZÁKLADNÉ ROZDELENIE</p>
<ul id="rozdel">
<li>COB</li>
<li>SMD</li>
<li>LED PÁSY</li>
<li>LED MODULY</li>
</ul>
</div>
</div>
<div id="oddelovac1"></div>
<div id="contentBlock">
<div id="contentLeft">
<p id ="nadpis">LED SVETELNE ZDROJE</p>
<p id ="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar vitae mauris eget vehicula. Integer a mi ut lorem facilisis semper. Etiam faucibus lorem at tellus aliquam, sed aliquet risus venenatis. Etiam vulputate, magna rutrum eleifend rhoncus, justo nulla tristique magna, et tincidunt enim lacus in magna. Curabitur odio risus, eleifend vitae facilisis id, dignissim sed nunc. Pellentesque volutpat metus et scelerisque sagittis. Praesent mattis pulvinar est nec viverra. Nunc suscipit molestie fringilla.</p>
<p id ="katalog">KATALÓG NA STAHNUTIE</p>
<div id="pdf" ></div>
<div id="dodavatelia">
<div id="citizen"></div>
<div id="qlt"></div>
</div>
</div>
<div id="contentRight">
<p id ="rozdelenie">ZÁKLADNÉ ROZDELENIE</p>
<ul id="rozdel">
<li>COB</li>
<li>SMD</li>
<li>LED PÁSY</li>
<li>LED MODULY</li>
</ul>
</div>
</div>
<div id="separator"></div>
<div id="contentBlock>
... The same structure
</div>
</div>
</div>
</body>
And here is my CSS:
body {
margin:0;
}
#page {
width:100%;
}
#header{
width:1000px;
height:100px;
margin:auto;
}
#logo {
width:140px;
height:47px;
background:url('../img/logo.png')no-repeat;
margin-top:50px;
}
#menuContainer {
height:37px;
width:100%;
background:#c4c8ca;
}
#menu{
width:1000px;
margin:auto;
}
#menu ul {
padding-top:8px;
text-align:right;
}
#banner {
width:100%;
height:353px;
background:url('../img/banner.png')no-repeat;
margin-top:2px;
}
#separator {
width:100%;
height:31px;
background:url('../img/oddelovac.png')no-repeat;
margin-top:6px;
}
#contentContainer {
width:100%;
display:block;
}
#contentBlock {
width:1000px;
margin:auto;
}
#contentLeft {
width:650px;
float:left;
}
#contentRight{
width:350px;
float:left;
}
add clear: both to #separator or overflow: hidden to #contentBlock.
edit:
You use same id attribute value for many elements - there can be only one, unique.
If you want to use same style to many elements then use class.
just add float:left
#contentBlock {
width:1000px;
margin:auto;
float:left;
}
#separator {
width:100%;
height:31px;
background-color:rgb(255,0,255);
margin-top:6px;
float:left;
}
A following html markup creates a QA section in my site.
I want it to be this way - sentence in Q section should be positioned on the same line as "Q" symbol; Sentences in A section should be moved slightly to the right and each sentence should start from new line.
Like this:
But for now it looks this way:
<html>
<head>
<style type="text/css">
.qa b {
font-size: 50px;
}
.qa .answer_box {
margin-left: 90px;
display: inline;
}
.qa p {
font-size: 25px;
}
</style>
</head>
<div class="qa">
<div class="question">
<b>Q</b>
<p>
Do you believe in SEO?
</p>
</div>
<div class="answer">
<b>A</b>
<div class="answer_box">
<p>
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
Would be grateful for your help.
Use float and a padding/margin maneuver, with the b tag replaced with a strong and place within the first p tag per block:
p strong {
float: left;
margin-left: -1.5em;
font-size: 3em;
}
p {
padding-left: 5em;
}
<p>
<strong>Q:</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non turpis cursus, viverra libero a, ultricies enim. Cras quis ornare urna, condimentum luctus lorem. Aliquam et odio et magna pretium molestie. Fusce pulvinar nisi id mi pharetra scelerisque. Sed mollis accumsan tincidunt. Quisque libero erat, gravida sed rutrum et, volutpat non dui. Etiam eget leo in ipsum consectetur iaculis. Vestibulum dictum leo quis tristique feugiat. Donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. Integer ultricies ultrices ornare. Duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. Nam fermentum suscipit mauris, nec volutpat augue condimentum ac. Mauris consequat ante sed lacus vehicula scelerisque. In non gravida ligula, at dapibus ligula.
</p>
<p>
<strong>A:</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non turpis cursus, viverra libero a, ultricies enim.
</p>
<p>Cras quis ornare urna, condimentum luctus lorem. Aliquam et odio et magna pretium molestie. Fusce pulvinar nisi id mi pharetra scelerisque. Sed mollis accumsan tincidunt. Quisque libero erat, gravida sed rutrum et, volutpat non dui. Etiam eget leo in ipsum consectetur iaculis. Vestibulum dictum leo quis tristique feugiat. Donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. Integer ultricies ultrices ornare. Duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. Nam fermentum suscipit mauris, nec volutpat augue condimentum ac. Mauris consequat ante sed lacus vehicula scelerisque. In non gravida ligula, at dapibus ligula.</p>
http://jsfiddle.net/userdude/cZJhU/5/
Keep in mind you'll want to use classes to add these styles, not element-level selectors like p and p strong. This is for demonstration purposes only.
NOTE
For those claiming it does not look like what the OP asked for, here is what it appears like in every browser I look at it with:
I just rewrote your code as I couldn't deal with it - this looks exactly how you'd like it to be:
http://jsfiddle.net/f8NjK/
<div class="wrapper">
<div class="leftcol">
<strong>Q</strong>
</div>
<div class="rightcol">
<p>Do you believe in SEO?</p>
</div>
<div class="leftcol">
<strong>A</strong>
</div>
<div class="rightcol">
<p>Yes I do</p>
<p>SEO is a very powerful technique to increase your site ranking in Google.</p>
<p>Also it just cool and so and so</p>
</div>
</div>
CSS:
strong {
font-size: 50px;
}
.wrapper {
width:100%;
}
.leftcol {
width:10%;
display:inline-block;
}
.rightcol {
width:80%;
vertical-align:top;
display:inline-block;
}
I put a container. check this fiddle for live demo. http://jsfiddle.net/KdPfz/1/
.container
{
width: 100%;
height: 60px;
}
.letter
{
font-size: 50px;
float: left;
}
.sentence
{
width: 350px;
margin-top: 20px;
margin-left: 20px;
font-size: 20px;
float: left;
z-index: 5;
}
Like this?
<html>
<head>
<style type="text/css">
.qa b {
font-size: 50px;
}
.qa .answer_box {
margin-left: 90px;
display: inline;
}
.qa p {
font-size: 25px;
display: block;
}
.answer_box p {
margin-left: 50px;
}
</style>
</head><body>
<div class="qa">
<div class="question">
<b>Q</b>
<p style="display: inline-block;">
Do you believe in SEO?
</p>
</div>
<div class="answer">
<b>A</b>
<div class="answer_box">
<p style="display: inline-block;">
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
If you inject a display: inline-block; style into your first p tag, leave the rest to the p tags natural block format, and a conditional margin for the answer block.
This may be more what you are looking for - a fiddle - I re-wrote your html to avoid using styling elements
<div class="qa">
<div class="question">
<div class="bold-letters">Q</div>
<div class="questions">
<p>Do you believe in SEO?</p>
</div>
</div>
<div class="answer">
<div class="answer_box">
<div class="bold-letters">A</div>
<div class="answers">
<p>
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
and some short css
.bold-letters, .answers, .questions{
display:inline-block;
}
.bold-letters{
font-size:50px;
vertical-align:top;
margin-right: 30px;
}
.questions{
vertical-align:bottom;
}
I was writing this while the other answers popped up
http://jsfiddle.net/tprats108/ugaYM/
css:
.qa {
font-size: 25px;
}
.qa .heading {
font-weight: bold;
font-size: 50px;
float: left;
}
.qa .response {
float: left;
margin-left: 20px;
}
.clear {
clear: both;
}
html:
<div class="qa">
<div class="question">
<div class="heading">Q</div>
<div class="response">
<p>Do you believe in SEO?</p>
</div>
</div>
<div class="clear"></div>
<div class="answer">
<div class="heading">A</div>
<div class="response">
<p>Yes I Do</p>
<p>SEO is a very powerful technique to increase your site ranking in Google.</p>
<p>Also it just cool and so so so.</p>
</div>
</div>
</div>
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>