BobK

Shifting elements

7 posts in this topic

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>

 

Share this post


Link to post
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>

Share this post


Link to post
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;}

Share this post


Link to post
Share on other sites

Inline elements are initially set to a vertical alignment default of baseline, and that is what you are seeing the text showing at baseline, use vertical-align: top; to fix.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Frame? Or iframe maybe, either way I can't see how using either of these would help in this situation.

 

On the note about block in inline-block, block elements can be used in inline-block elements with no problem.

Share this post


Link to post
Share on other sites

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