Home/ Questions/Q 4256020
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T05:17:48+00:00

I am trying to get start a web site for fun but I am

  • 0

I am trying to get start a web site for fun but I am having issues with CSS styles and tags with aligning I have a container, horizontal nav, left Nav, right Nav, Header and footer.

They are all in the container element but I can not align them properly. The header and norz nav are fine and so are the footers. The problem I am having is that the left body and right do not align properly can any one help. below is the coding for the HTML

 <body>
<div id="container">
<div id="header">

</div>

<div id="horizontalnav">
        <div class="navlinks ">
            <ul>
             <li><a href="http://www.Facebook.com" target="_blank">Facebook</a></li>
             <li><a href="http://www.gaiaonline.com" target="_blank">Gaia</a></li>
            <li><a href="http://www.roblox.com" target="_blank">Roblox</a></li>
            <li><a href="http://www.adventurequest.com" target="_blank">Adventure Quest</a></li> 
            <li><a href="http://www.animefreak.tv" target="_blank">Anime Freak</a></li>
            <li><a href="http://www.youtube.com" target="_blank">Youtube</a></li>
            </ul>
        </div>
</div>

<div id="leftnav">
    <p>Left Nav </p>
</div>


<div id="body">


</div>

<div id="rightnav">

    <p>right Nav </p>

</div>

<div id="footer">
this is the footer
</div>


 </div>

 </body>

and now for the css yes i use the one off of 2createawebsite.com and try to manipulate it

 #container  {
 width: 100%;
 }

 #header    {
  width: 89%;
 height: 15%;
 position: relative;
 background-image: url(Header.jpg);
 border-bottom: 2px solid #000000;
}

#header a  {
 color: #ffffff;
 text-decoration: underline;
 font-weight: bold;
 font-family: Verdana;
 font-size: 14px;
 }

 #header a:visited  {
 color: #000000;
 text-decoration: underline;
 font-weight: bold;
 }

 #header a:hover  {
 color: #cc0000;
 text-decoration: none;
 font-weight: bold;
 }
 #horizontalnav  {
 width: 89%;
 height: 30px;
 position: relative;
 background-color: #F2D6AF;
 border-bottom: 2px solid #000000;
 }
 .navlinks  {
 position: absolute; top: 4px; left:240px; 
 }
 .navlinks ul { 
 margin: auto;
 }
 .navlinks li {
 margin: 0px 18px 0px 0px;
 list-style-type: none;
 display: inline;
 }
 .navlinks li a {
 color: #000000;
 padding: 5px 12px 7px;
 text-decoration: none;
 font-size: 16px;
 font-family: Verdana;}
 .navlinks li a:hover{
 color: #ffffff;
 background-image: url(Header.jpg);
 text-decoration: underline;
 }
 #header p  {
 color: #000000;
 font-family: Arial;
 font-weight: bold;
 }
 .smalltext   {
 font-size: 9px;
 font-family: Arial;}
 #leftnav {
 float: left;
 width: 10%;
 height: 70%;
 background-color: #F8AA3C;
 border-right: 1px dashed #694717;}
#rightnav  {
 float: right;
 width: 10%;
 height: 70%;
 background-color: #F8AA3C;
 border-left: 1px dashed #694717;}
  #body  {
 margin-left :0px ;
 width : 50% ;
 padding: 0px 0px 0px 0px;
 }
 #body p {
 word-wrap : true ;
 font-family : courier new ;
 }
  #footer  {
 clear: both;
 background-color: #D1C0A7;
 }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you change #header and #horizontalnav to 100% this makes everything expand to the width of the page; I assume this is what you wanted to accomplish

    #header    {
    /* existing code */
    width: 100%;
}

#horizontalnav {
    /* existing code */
    width: 100%;
}

    As for the left column, body column and right column, these can be set to inline-block (float is not needed then) and their widths can be set to 10%, 80%, 10% respectively. In general this should fix the layout.

    • 0