ChaCol ChaCol - 2 months ago 15
CSS Question

How do I position an image on each side of a header?

I'm trying to add a picture of a tree on each side of my header, however I cannot figure out how to position the images correctly to where they are both above my navigation bar and positioned to the left and right of my header.

This jsfiddle shows it a bit better than the snippet.
https://jsfiddle.net/1qghboyh/



* {
margin: 0px;
padding: 0px;
}

header {
padding: 1em;
color: white;
background-color: #323241;
clear: left;
text-align: center;
}

footer {
background-color: #339966;
-webkit-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
-moz-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
padding: 1em;
color: white;
background-color: #323241;
clear: left;
text-align: center;
}

.initials {
float: left;
opacity: .25;
}

.tree1 {
float: left;
width: 100px;
height: 100px;
}

.tree2 {
float: right;
width: 100px;
height: 100px;
}

.navigation-bar {
-webkit-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
-moz-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
height: 3.2em;
background: #339966;
text-align: center;
border-top: 2px solid;
border-bottom: 2px solid;
}

.navigation-bar ul {
display: inline-block;
list-style-type: none;
}

.navigation-bar li {
display: inline;
}

.navigation-bar li a {
color: white;
padding: 0px 30px;
margin: 1em 0 0 -2px;
text-decoration: none;
float: left;
height: 1.2em;
line-height: 1.2em;
}

.navigation-bar li a.active{
color: #111;
}

.navigation-bar li a:hover, a:focus {
color: #111;
}

.columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}

.div1 {
width: 100%;
padding: 10px;
border-right: 2px solid;
border-left: 2px solid;
margin: 0;
background-color: white;
}

<!DOCTYPE html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<html>
<head>
<link rel="stylesheet" href="settings.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #323241">
<header>
<div class="initials">#2 - C.C.</div>
<img src="tree.jpg" class="tree1">
<h1>Landscaping Company</h1>
<img src="tree.jpg" class="tree2">
</header>
<div class="navigation-bar">
<div id="navigation-container">
<ul>
<li><a class="active" href="home.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<br>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">

<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>

<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>

<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>

<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>

</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="div1">
<div class="columns">
<p>As Northeast Ohio Landscapers, Hemlock Landscapes has been caring for customers and their properties throughout the Chagrin Valley since 1981.
Our core values:
Bring a positive attitude with you each and every day
Work hard, pitch in, be helpful and productive
Be fair and respectful with all people in all encounters</p>

<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.
Our mission is to unite people in positive relationships to improve lives.
This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day. If we are not improving your life then we are not living up to our mission.
Experienced in every facet of the landscape industry, we fulfill our one company… total care philosophy by meeting your every need in the following areas:
Residential Landscape Maintenance
Landscape Design/Installation
Plant Health Care</p>

<p>Whether you are new to the Chagrin Valley, switching landscape service providers, or need to add a service to your existing account, Hemlock Landscapes makes it easy for you.</p>
<p>As Northeast Ohio Landscapers, Hemlock Landscapes has been caring for customers and their properties throughout the Chagrin Valley since 1981.
Our core values:
Bring a positive attitude with you each and every day
Work hard, pitch in, be helpful and productive
Be fair and respectful with all people in all encounters</p>

<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.
Our mission is to unite people in positive relationships to improve lives.
This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day. If we are not improving your life then we are not living up to our mission.
Experienced in every facet of the landscape industry, we fulfill our one company… total care philosophy by meeting your every need in the following areas:
Residential Landscape Maintenance
Landscape Design/Installation
Plant Health Care</p>

<p>Whether you are new to the Chagrin Valley, switching landscape service providers, or need to add a service to your existing account, Hemlock Landscapes makes it easy for you.</p>
</div>
</div>
</div>
<br>
<footer>Copyright © Landscaping Company</footer>
</body>
</html>




Answer

Have you tried putting the img tags within the h1 tag and remove the floats from the images?

<h1><img src=...>Landscaping Company<img src=...></h1>

If you really want to use floats, then I've found that specifying the right float first in the HTML usually produces the desired result.

<img src="tree.jpg" class="tree2">
<img src="tree.jpg" class="tree1">
<h1>Landscaping Company</h1>