Is there a way to put an h1 between two floating elements? - html

Question

I am trying to get the title of a website to sit between a logo and a nav bar, while also wrapping under the nav bar.
I have tried floating the logo left and the nav element right but the nav sits under the h1. This is due to the layout of the html markup which I am not allowed to modify.
This is the desired result:
header figure {
display: inline-block;
margin: 0px;
margin-right: 40px;
float: left;
}
nav {
float: right;
}
nav ul {
padding: 0px;
margin: 0px;
}
nav li {
display: inline-block;
text-align: center;
width: 70px;
padding: 2px 4px;
border-style: dotted;
border-width: 1px;
}
h1 {
font-family: 'great-vibes';
font-size: 50px;
margin: 0px;
}
<header>
<figure>
<img src="./images/logo.png" alt="MUHC Logo" width="125" height="125">
</figure>
<h1>Welcome To The Mosgiel Underwater Hockey Club</h1>
<nav>
<ul>
<li>Home</li>
<li><a>About</a></li>
<li>League</li>
<li>Ethics</li>
</ul>
</nav>
</header>

Answer 1

Unable to move the elements in the DOM, you need to do two things. Use absolute positioning to move the menu to the top right hand corner, and construct a float using a before pseudo element inside the h1 element to leave room for the menu so the text doesn't overlap it. Something like this:
#import url('https://fonts.googleapis.com/css?family=Great+Vibes&display=swap');
header {
position:relative;
}
header figure {
display: inline-block;
margin: 0px;
margin-right: 20px;
float: left;
}
nav {
position:absolute;
right:0;
top:0;
}
nav ul {
padding: 0px;
margin: 0px;
}
nav li {
display: inline-block;
text-align: center;
width: 70px;
padding: 2px 4px;
border-style: dotted;
border-width: 1px;
}
h1 {
font-family: 'Great Vibes', cursive;
font-size: 40px;
margin: 0px;
overflow:auto;
}
h1:before {
content: '';
float: right;
width: 340px;
min-width: calc(100% - 6em);
height:1em;
}
<header>
<figure>
<img src="http://placehold.it/125" alt="MUHC Logo" width="125" height="125">
</figure>
<h1>Welcome To The Mosgiel Underwater Hockey Club</h1>
<nav>
<ul>
<li>Home</li>
<li><a>About</a></li>
<li>League</li>
<li>Ethics</li>
</ul>
</nav>
</header>

Answer 2

you can add float attribute in h1 style
like the following:
<h1 style="float:left"></h1>

Answer 3

You can achieve most of your desired result through absolute-positioning and flexbox, but your h1 text must change so that it breaks after the "welcome to" part.
See the result in full page mode.
header{
display:flex;
align-items:center;
position:relative;
border:1px solid;
border-radius:10px;
padding:10px;
}
header figure{
display: inline-block;
margin: 0px;
margin-right: 40px;
float: left;
}
nav{
/* float: right; */
}
nav ul{
position:absolute;
top:10px;
right:10px;
display:flex;
padding: 0px;
margin: 0px;
}
nav li{
display: inline-block;
text-align: center;
width: 70px;
padding: 2px 4px;
border-style: dotted;
border-width: 1px;
}
h1{
font-family: 'great-vibes';
font-size: 50px;
margin: 0px;
}
<header>
<figure>
<img src="//unsplash.it/125" alt="MUHC Logo" width="125" height="125">
</figure>
<h1>Welcome To The Mosgiel Underwater Hockey Club</h1>
<nav>
<ul>
<li>Home</li>
<li><a>About</a></li>
<li>League</li>
<li>Ethics</li>
</ul>
</nav>
</header>

Answer 4

Try putting display:inline-block or display:inline on the h1.
A good way to try things out like that is the DOM Inspector which is
available in Firefox or Chrome.
Firefox: Tools -> Web Developer -> Inspector
Chrome: 3-bar Menu -> More tools -> Developer tools -> Elements tab
or in either one:
Right-click an element (such as your H1) and choose "Inspect" or "Inspect Element" from the menu
Once you are in the Inspector, you can add, delete, or modify CSS rules as you please on a temporary basis.
When you are happy with the result, you can go back and update your source to incorporate the change.
Edit:
A simple change that worked:
Reduce the font-size on the H1 so it all fits better,
and put max-width on it as well so all three fit in the space available.

Answer 5

Apply width to figure and h1 also and set nav to position:absolute using css for your desired result
header{
position:relative;
}
header figure {
display: inline-block;
margin: 0px;
margin-right: 40px;
float: left;
width:100px;
}
nav {
position: absolute;
right: 0;
top: 0;
}
nav ul {
padding: 0px;
margin: 0px;
}
nav li {
display: inline-block;
text-align: center;
width: 70px;
padding: 2px 4px;
border-style: dotted;
border-width: 1px;
}
h1 {
font-family: 'great-vibes';
font-size: 30px;
margin: 0px;
width:calc(100% - 140px);
float:left;
padding-top:25px;
}
<header>
<figure>
<img src="./images/logo.png" alt="MUHC Logo" width="125" height="125">
</figure>
<h1>Welcome To The Mosgiel Underwater Hockey Club</h1>
<nav>
<ul>
<li>Home</li>
<li><a>About</a></li>
<li>League</li>
<li>Ethics</li>
</ul>
</nav>
</header>

Answer 6

What you are trying to achieve is not possible with single h1 tag. Instead you need to create two separate dom elements inside h1. As you need to break the line after the word Welcome To.
Check the following snippet how to do. Also you can play with other elements style.
html,
body {
padding: 0;
margin: 0;
}
header {
position: relative;
}
header figure {
/* display: inline-block; */ /* <-- Not required when using float */
float: left;
margin: 0px;
margin-right: 40px;
}
nav {
float: right;
}
nav ul {
padding: 0px;
margin: 0px;
}
nav li {
display: inline-block;
text-align: center;
width: 70px;
padding: 2px 4px;
border-style: dotted;
border-width: 1px;
}
h1 {
font-family: "great-vibes";
font-size: 40px;
margin: 0px;
position: absolute;
left: 140px;
}
p {
margin: 0;
}
<header>
<figure>
<img src="https://img.icons8.com/ios/2x/stackoverflow-filled.png" alt="MUHC Logo" width="100" height="100" />
</figure>
<h1>
<p>Welcome To</p>
<p>
The Mosgiel Underwater Hockey Club
</p>
</h1>
<nav>
<ul>
<li>Home</li>
<li><a>About</a></li>
<li>League</li>
<li>Ethics</li>
</ul>
</nav>
</header>

Answer 7

I would suggest you use flex css. This way it is much easier to handle the responsiveness of your page. I have done a test code using the flex css. Hope it solves your problem
HTML
nav ul {
padding: 0px;
margin: 0px;
}
nav li {
display: inline-block;
text-align: center;
width: 70px;
padding: 2px 4px;
border-style: dotted;
border-width: 1px;
}
h1 {
font-family: 'great-vibes';
font-size: 50px;
margin: 0px;
}
.d-flex {
display: flex;
}
.flex-row {
display: flex;
flex-direction: row;
}
.logo {
margin-right: 10px;
}
<header>
<div class="d-flex flex-row">
<div class="logo">
<img src="./images/logo.png" alt="MUHC Logo" width="125" height="125">
</div>
<div>
<h1>Welcome To <br/>The Mosgiel Underwater Hockey Club</h1>
</div>
<div>
<nav>
<ul>
<li>Home</li>
<li><a>About</a></li>
<li>League</li>
<li>Ethics</li>
</ul>
</nav>
</div>
</div>
</header>
JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/2eydLcmz/