I'm facing some challenges in positioning HTML elements using CSS. While I grasp the fundamental concepts of block and inline elements, implementing them in real coding scenarios can be confusing. I've shared my HTML code below, which I'm mostly satisfied with. Now, I've moved on to styling the code with CSS. My goal is to create a Navigation bar at the top of the page, for which I've used the CSS code (provided below).
Initially, I set my list items as inline-block. Then, I floated my heading to the left and the list to the right, resulting in a satisfactory layout. However, I encountered an issue where my 'slider' class element moves up between the two elements.
I'd appreciate a solution to this problem, but more importantly, I want to understand the underlying theory and functionality behind it. My speculation is that by floating these two elements, they have been taken out of the normal flow of the document, allowing the next element to fill the vacant space. I seek not only a fix but also a deeper comprehension of this phenomenon so I can handle similar challenges independently in the future.
<style>
.nav li {
display: inline-block;
}
.nav ul {
float: right;
}
.nav h1 {
float: left;
}
</style>
<div class="nav">
<h1>Resume</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="slider">
<h2>Andrew Hardiman</h2>
<p>Webdesigner & Developer</p>
<p>Read More</p>
<p>HTML</P>
<p>CSS</P>
<h3>I design and develop amazing websites that are sleek, easy-to-navigate and exciting to use.</h3>
<p>Work with us to plan your digital marketing mix and achieve better results online.</p>
</div>
</div>
<div class="Portfolio">
<div class="container">
<h3>Portfolio</h3>
<img src="https://download.unsplash.com/photo-1423655156442-ccc11daa4e99">
<h3>Client</h3>
<h4>JPMorgan</h4>
<h3>Role in Project</h3>
<h4>Project Lead</h4>
<h3>Project Included</h3>
<h4>Mobile and Web Interface</h4>
</div>
</div>
<div class="skills">
<div class="container">
<h3>Skills</h3>
<p>I am a bit of a hybrid Web Developer and like to utilize my skills both front and back end as well
as keep in touch with my creative side designing websites</p>
<p>html</P>
<p>CSS</p>
<p>JavaScript</p>
<p>jQuery</P>
</div>
</div>
<div class="Experience">
<div class="container">
<h3>Experience</h3>
<h4>Work Experience</h4>
<p>Blah blah blah, professional with this and that.</p>
<h5>Royal National Lifeboat Institution</h5>
<p>Coastal Support Officer, blah blah blah.</p>
<h5>Pioneer Business Systems</h5>
<p>blah d, blah d, blah.</p>
<h5>JPMorgan Chase</h5>
<p>Some more blah d, blah.</p>
</div>
</div>
<div class="wrap">
<div class="container">
<img src="https://download.unsplash.com/photo-1424296308064-1eead03d1ad9">
<h3>Andrew Hardiman</h3>
<p>I have worked for one of the top Investment Banks in the world (JPMorgan) and loved every minute of it!</p>
<p>Today, I have left the world of high-finance to fulfill my curiosity in the freelance arena which has been amazing so far and I can't think of why I did not take the plunge sooner.</p>
</div>
</div>
<div class="contact">
<div class="container">
<div id="Username"></div>
<div id="Email"></div>
<div id="Cost or your project"></div>
<div id="Timeline"></div>
<h4>LOCATION</h4>
<p>Flat 1, 29 Markham Road, Bournemouth, BH9 1HZ</p>
<h4>I AM SOCIAL</h4>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Google+</li>
<li>LinkedIn</li>
<li>Flickr</li>
</ul>
<div class="Send'>
<a href="#">Send</a>
</div>
</div>
</div>
<div class="location">
</div>
<div class="top-footer">
<div class="footer-menu">
<h4>Menu</h4>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Skills</li>
<li>Experience</li>
<li>Contact</li>
</UL>
</div>
<div class="footer-archives">
<h4>Archives</h4>
<ul>
<li>March 2014</li>
<li>April 2014</li>
<li>May 2014</li>
<li>June 2014</li>
<li>July</li>
</ul>
</div>
<div class="widget">
<p>Not really sure what this is for, you'll need to find out.</p>
</div>
<div class="follows">
<h4>Follows</h4>
<ul>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
<ul>
</div>
<div class="footer-bottom">
<P>© 2015 Website by Andrew Hardiman</p>
</div>