Jump to content

Shifting elements


BobK

Recommended Posts

Hi

 

I am new to HTML and CSS and I am using Display: inline-block to layout some article elements, and when I put an h3 header in the first box it shifts it's position.

 

and I cannot figure out why. I've read that inline-block does not like width / height values is this true?

 

Here's the page code:

<!DOCTYPE HTML> <html lang="en"> <head> <title>Blog - Home</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <link href="_css/pj.css" type="text/css" rel="stylesheet"> <style> article { padding: 0; } .summaryBox { display: inline-block; width: 20%; height: 250px; margin: 1em 1em 1em 2em; padding: 0; border: 1px solid black; } .pgBanner { opacity: 0.5; filter: alpha(opacity=50); } /* For IE8 and earlier */ .artBanner ( position: relative; ) </style> </head> <header> <img src="_img/atomic_logo.png" width="100px" height="125px" class="pjLogo" alt="company logo"> <h1 class="pj_header">Blog Home</h1> </header> <body class="clearfix"> <nav id="headNav" class="upperBar headNav ulBars"> <ul id="topList"> <li><a href="about.html">About</a></li> <li><a href="blog_home.html">Blog</a></li> <li><a href="faq.html">Home</a></li> </ul> </nav> <section class="sumFont"> <h2>BLOG Under Construction</h2> <article class="summaryBox"> <h3>Heading</h3> </article> <article class="summaryBox"></article> <article class="summaryBox"></article> <article class="summaryBox"></article> <article class="summaryBox"></article> <article class="summaryBox"></article> </section> <footer> <nav id="footNav" class="lowerBar footNav ulBars"> <ul id="bottomList"> <li><a href="about.html">About</a></li> <li><a href="blog_home.html">Blog</a></li> <li><a href="faq.html">Home</a></li> </ul> </nav> <div id="footContact"> <br> <a style="margin: 20% 0 0 50%" target="_blank" title="Follow me on facebook" href="http://www.facebook.com/bob.kefurtii"><img alt="follow me on facebook" src="https://c866088.ssl.cf3.rackcdn.com/assets/facebook30x30.png" border="0"></a> <p style="text-align: center"> Plutonim Jelly<br> 94 Atomic way<br> Sparkling PU, 239239<br> Office: (555) 888-8080<br> Email: <a href="mailto:someone@example.com?Subject=New Interest">PuJy@atomicserver.com</a><br><br> <sub>Copyright© 2017 Bob Kefurt</sub></p> </div> </footer> </body> </html>

 

Link to comment
Share on other sites

You should paste that code into a codeblock...

 

Hmmm... I see what you are saying. Something odd happens when you put a block inside an inline-block.

<!DOCTYPE HTML>   
 <html lang="en">   
 <head>   
 <title>Blog - Home</title>   
 <meta name="viewport" content="width=device-width, initial-scale=1.0">   
 <meta charset="utf-8">   
 <link href="_css/pj.css" type="text/css" rel="stylesheet">       
 <style>   
 article { padding: 0; }   
 .summaryBox { 
 display: inline-block; 
 width: 20%; height: 250px; 
 margin: 1em 1em 1em 2em; 
 padding: 0; 
 border: 1px solid black; 
 }   
 .pgBanner { opacity: 0.5; filter: alpha(opacity=50); } /* For IE8 and earlier */   
 .artBanner ( position: relative; )       
 </style>       
 </head>   
  
 <body class="clearfix">   
 
 <header>   
 <img src="_img/atomic_logo.png" width="100" height="125" class="pjLogo" alt="company logo">   
 <h1 class="pj_header">Blog Home</h1>   
 </header>  
 
 <nav id="headNav" class="upperBar headNav ulBars">   
 <ul id="topList">   
 <li><a href="about.html">About</a></li>   
 <li><a href="blog_home.html">Blog</a></li>   
 <li><a href="faq.html">Home</a></li>   
 </ul>   
 </nav>   
 <section class="sumFont">   
 <h2>BLOG Under Construction</h2>   
 <article class="summaryBox"><h3>Heading</h3></article>   
 <article class="summaryBox"></article>   
 <article class="summaryBox"></article>   
 <article class="summaryBox"></article>   
 <article class="summaryBox"></article>   
 <article class="summaryBox"></article>   
 </section>   
 <footer>   
 <nav id="footNav" class="lowerBar footNav ulBars">   
 <ul id="bottomList">   <li><a href="about.html">About</a></li>   
 <li><a href="blog_home.html">Blog</a></li>   <li><a href="faq.html">Home</a></li>   
 </ul>   
 </nav>   
 <div id="footContact">   
 <br>   
 <a style="margin: 20% 0 0 50%" target="_blank" title="Follow me on facebook" href="http://www.facebook.com/bob.kefurtii">
 <img alt="follow me on facebook" src="https://c866088.sslfacebook30x30.png" border="0"></a>       
 <p style="text-align: center">   
 Plutonim Jelly<br>   
 94 Atomic way<br>   
 Sparkling PU, 239239<br>   
 Office: (555) 888-8080<br>   
 Email: <a href="mailto:someone@example.com?Subject=New%20Interest">PuJy@atomicserver.com</a>
 <br><br>   
 <sub>Copyright© 2017 Bob Kefurt</sub>
 </p>   
 </div>   
 </footer>   
 </body>   
 </html>
Link to comment
Share on other sites

The easy fix seems to be just to use float rather than inline-block...

 .summaryBox { 
 float:left;
 width: 20%; 
 height: 250px; 
 margin: 1em 1em 1em 2em; 
 padding: 0; 
 border: 1px solid black; 
 }   
 footer{clear:both;}
Link to comment
Share on other sites

Sorry about not using the code block, first time here and I was at work not much time to post.

 

I thought about using float, and started with inline-block since I just found out about it. Is there a problem with a block inside a line-block? a block inside a block shouldn't matter with regard to positioning should it?

 

I also read about flex-box I may tinker with that and see what happens. I'm not worried about backward compatibility with this project.

Link to comment
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...