BobK Posted January 30, 2017 Share Posted January 30, 2017 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 More sharing options...
davej Posted January 30, 2017 Share Posted January 30, 2017 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 More sharing options...
davej Posted January 30, 2017 Share Posted January 30, 2017 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 More sharing options...
dsonesuk Posted January 31, 2017 Share Posted January 31, 2017 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. Link to comment Share on other sites More sharing options...
BobK Posted January 31, 2017 Author Share Posted January 31, 2017 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 More sharing options...
CNT Posted February 15, 2017 Share Posted February 15, 2017 Maybe you need to use FRAME instead? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 16, 2017 Share Posted February 16, 2017 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now