CODEWITHSUNDEEP
htmlcss
user1283674
user1283674

Reputation: 339

webpage - text positioning in a header

I've trying to position text along the same line, but I'm having trouble doing this. What I want to achieve is some text on the top left of my screen and to the top-right of the screen, display links to other URLs. This is what I have so far:

enter image description here

This is what I want to achieve:

enter image description here

Can anyone provide any tops on how to achieve this? Thank you

Code below:

<style type="text/css">
@font-face /* support for browsers & IE v10 onwards*/
{font-family:homefont; src: url("font.ttf");}
{font-family:headerfont; src: url("playball.ttf");}
body {background:url('img/mybackgroundHD.jpg') no-repeat center center fixed;}
<!-- Make Header Sticky -->
#header_container {background:#00E5EE; border:0px solid #666; height:70px; left:0; position:fixed; width:100%; top:0;}
<!-- HEADER text -->
#header{padding: 0.3em 0; border-bottom: 0px; overflow: hidden; zoom: 1; line-height:0px; margin:0 auto; width:940px; text-align:left;display:inline-block; float:right;}
#wrapper{width:900px;margin:0 auto;}
a{color:#444;text-decoration: none;}
.logo{margin-left:600px;margin-top:100px;background:#fff;padding:10px;}
.bigtitle{font-family: homefont; font-size:150px; color:#000; text-transform:uppercase; text-shadow:4px 1px 1px #444; text-align:center; margin-top:200px; opacity:0.6;}
.header{top:100%; left:0%; font-family: headerfont; font-size:20px; color:#FFFFFF; font-style:italic; padding-top:0px; padding-bottom:0px; padding-right:20px; padding-left:0px;}
</style>
</head>
<body>

<!-- BEGIN: Sticky Header -->
<div id="header_container">

    <div id="header"><p class="header"> Follow me on:

    <a style="margin:0;" href="https://www.facebook.com/chilunliuTheBOSSE">
    <img src="/img/facebook-lnk.gif" alt="alt text" style="border:none; width="40" height="40"></a>

    <a style="margin:0;" href="https://plus.google.com/u/0/+chilunliu/posts/p/pub">
    <img src="/img/googleplus-lnk.gif" alt="alt text" style="border:none; width="40" height="40"></a>

    <a style="margin:0;" href="http://www.linkedin.com/pub/chilun-liu/1b/297/416">
    <img src="/img/linkedin-lnk.gif" alt="alt text" style="border:none; width="40" height="40"></a>

    <a style="margin:0;" href="">
    <img src="/img/email-lnk.gif" alt="alt text" style="border:none; width="40" height="40"></a>

    <a style="margin:0;" href="http://www.youtube.com/user/chilunliu">
    <img src="/img/youtube-lnk.gif" alt="alt text" style="border:none; width="40" height="40"></a>

    </div>
    </p>

</div>
<!-- END: Sticky Header -->

    <div id="wrapper">
      <h2 class="bigtitle">
      <p>
      Chilun Liu
      </p>
      </h2>
     </div>

</body>
</html>

Upvotes: 0

Views: 45

Answers (2)

Reger
Reger

Reputation: 474

Put inside <div id="header-container"> two divs:

<div id="subheader-left" style="float:left>Follow me on</div>
<div id="subheader-right" style="float:right; text-align:right"> your images here </div>

Upvotes: 1

httpgio
httpgio

Reputation: 127

Float the text left, and float the social icons container right. right after the icons container, put in a div with a css property of clear:both;

Upvotes: 0

Related Questions