Note that there are some explanatory texts on larger screens.

plurals
  1. POh1 and p tag in same line, but keep h1 width
    text
    copied!<p>Hy, so i have this:</p> <pre><code> #header { width: 90%; height: auto; margin: 0 auto 3% auto; border-bottom: 1px solid black; } #header p, h1 { display: inline; } #header p { font-style: italic; } h1 { width: 40%; border-right: 2px solid black; font-family: Franklin Gothic Medium; text-transform: uppercase; font-size: 2.8em; margin-left: 2%; text-shadow: 0px 0px 2px white; } </code></pre> <p>and the HTML</p> <pre><code> &lt;div id="header"&gt; &lt;h1&gt;Heading Blog Title&lt;/h1&gt; &lt;p&gt;Site description Site description Site description Site description&lt;/p&gt;&lt;/div&gt; </code></pre> <p>It looks like this: <a href="http://i.imgur.com/TvVKjo9.jpg" rel="nofollow">http://i.imgur.com/TvVKjo9.jpg</a></p> <p>But I want to keep the width of the h1 too look like this: <a href="http://i.imgur.com/YzWO8YN.jpg" rel="nofollow">http://i.imgur.com/YzWO8YN.jpg</a> Basically to center the <p> along with the h1 tag. Picture 1 is where i used </p> <pre><code> #header p, h1 { display: inline; } </code></pre> <p>for both. In the second picture the h1 tag is positioned as i want to, but the <p> screws it up. On the second pic I used display: inline-block; for the h1. And the p description isn't positioned in the center position, I can use margin pr padding but the rest of the description keeps going bellow the h1 tag as you can see on pic 2. I fixed this by relative positioning and margin the p tag, but it goes bellow or above the #header in higher or smaller resolutions because I used %. Any trick to fix this? Thanks</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload