Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I place icons in header at far right?
    primarykey
    data
    text
    <p>Hello I am working on my website. I would like to know how to place contact icons at the header section to the far right. (relative to the text of the header that reads creative mind. How do I do that? Below is my code. Help please. Thanks. </p> <p><strong>HTML</strong></p> <pre><code>&lt;body&gt; &lt;div class="auto-style1"&gt; &lt;div id="header"&gt; Header &lt;h1&gt;Creative Mind&lt;/h1&gt; &lt;/div&gt; &lt;div id="nav"&gt; Navigation &lt;ul&gt; &lt;li&gt;&lt;a href="homepage.html"&gt;Homepage&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="tipsandtricks.html"&gt;Tips and Tricks&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="aboutme.html"&gt;About me&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="getintouch.html"&gt;Get in Touch&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="main"&gt;Main&lt;/div&gt; &lt;h3&gt;Contact Information&lt;/h3&gt; &lt;h3&gt;Phone&lt;/h3&gt; &lt;p&gt;1-323&lt;/p&gt; &lt;h3&gt;Email&lt;/h3&gt; &lt;a href="mailto:jonathan@gmail.com?"&gt;&lt;img src=/&gt;gmail&lt;/a&gt; &lt;h3&gt;Social Networks&lt;/h3&gt; &lt;a href="https://www.facebook.com/mourning.9"&gt;&lt;img src=/&gt;&lt;/a&gt; &lt;div id="footer"&gt; Footer &lt;h3&gt;Creative Mind Jonathan Mourning&lt;/h3&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>@charset "utf-8"; /* CSS Document */ body { background-color: #A6FFFF; width: 100%; } #header, #main, #footer { display: block; position: relative; float: left; } #header, #footer { height: 15%; width: 100%; } #header { margin-bottom: 2px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } #footer { margin-top: 2px; text-align: right; border: 2px; } #main { position: relative; width: 70%; height: 100%; margin: 0 auto; background-color: #FFF; float: center; text-align: center; } #nav { list-style: none; margin: 0; padding: 0; text-align: center; } #nav li { display: inline; } #nav a { display: inline-block; padding: 10px; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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