alignment issue

+1 wiliam pierce · December 28, 2014
hi all. im new to html5 and this is my first post here. looking forward to being part of this community, anyway,here goes. im building my own site and have noticed that theres an alignment issue. the middle articles are lapping into the footer area and I know its likely a css issue but not sure where I went wrong. im going to try to post the css and html. thanks.                                                                          

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>im so tired</title>
<link rel="stylesheet" href="main.css"/>
</head>

<body>
   <div id="big_wrapper">
 <header id="top_header">
 <h1>Nerdy Poker=Money and Girls</h1> 
 <h3>A Complete guide to crushing the 1-2 game</h3>
 </header>
 
 
 <div id="top_menu">
 <ul>
 <li><a href="#"> Home</a></li>
 <li><a href="#"> Tells</a></li>
 <li><a href="#"> Charts</a></li>
 <li><a href="#"> Tools</a></li>
 <li><a href="#"> Videos</a></li>
 <li><a href="#"> Blog</a></li>
 </ul>
 </div>
 
  
 
 <div id="left">
  <nav id="left">
 
    <ul>
      <li> <a href="#">Bet Sizing</a>  </li>
      <li><a href="#">Semi-Bluffing</a></li>
      <li><a href="#">Bluffing</a></li>
      <li><a href="#">Various Charts</a></li>
      <li><a href="#">Live Play Tips</a></li>
      <li><a href="#">SEARCH</a></LI>
      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Various Charts</a></li>
      <li><a href="#">Live Play Tips</a></li>
      <li><a href="#">Live Play Tips</a></li>
    </ul>
 </nav>
</div>
 
 
 
 
  <section id="middle">
 
 
 
  <div id="middle_header">
     <article> <a href="#"> 
      <header>
        <hgroup>
          <h1>starting hand charts</h1>
          <h2>what to play and when to play it</h2>
        </hgroup>
      </header>
      <footer>
        <p>your starting place of how to play poker</P>
      </footer>  </a>
     </article>
  </div>
  
        <article> 
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
 
         <article> 
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
  
  
      <article> 
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
  
     </article>
      <article> 
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
  
     </article>
  
      <article> 
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
  
     </article>
  
  
      <article> 
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
  
     </article>
  
  
       <article> 
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
  
     </article>
  
       <article> 
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
  
     </article>
  
  </div>
  
   <div id="right">
  <p>the side ads</p>
 </div>
 
 <footer id="footer">
 copywite guerrila card sharks
 </footer>
 
  </div>

</body>   
</html>    



AND THE CSS

*{
margin:0px;
padding:0px;
background: #100000 ;
}


#big_wrapper{
width:1000px;
margin:0px;
}



#top_header{
border:1px solid red; 
text-align:center;
float:right;
color: #FFD700  ;
background: #000000;
margin:10px 5 5 5;
width:100%;
height:100px;
}

    #top_menu{
 background:   #280000;
 color:  #280000;
 border:1px solid red;
  }
  
  #top_menu li {
   display:inline-block;
   list-style:none;
   padding:8px;
   font:bold 14px tahoma;
   } 
 #top_menu ul li {
   display:inline-block;
   list-style:none;
   padding:10px;
   font:bold 14px tahoma;
   border:1px outset #E80000;
   } 
       
   
  
  
  
  
#left{
float:left;
color:    #FFD700 ;
background:#000000;
margin:5px 15px 5px 0;
border:1px solid black;
width:110px;           
height:620px;
}
#left  ul{
color:  #FFD700 ;
margin:0px;
list-style-type:none;
}
#left ul li{
background-color:#000000 ;
color:  #FFD700 ;
margin:5px;
padding:10px;
width:70px;
border:3px outset  #E80000;
}
#left ul li a{
display:block;
width:75px;
height:15x;
text-align:center;
text-decoration:none;
line-height:15px;
}
a{
color: #ffffff;
}


#middle{
background:  #280000;
float:left;
margin:10px 15px 10px 0;
width:610px;
height:630px;
}
#middle_header{
 width:600px;
 text-align:center;
 background:   #B8860B;
 border-bottom:40px  solid darkred;
 padding:5px;
 margin:0 auto;
 margin-bottom:15px;
 }

 
article {
   display:inline-block;
 width:280px;
 text-align:center;
 background: #000000 ;
 border:1px solid red;
 padding:10px;
 margin: 0 auto;
 margin-bottom:10px;
width:45%;
height:15%;
}
   
article footer {
text-align:center; 
}

#right{
float:right;
background:   #A0A0A0  ;
margin:10px 15px 10px 0;
width:200px;
height:630px;
}
#footer{
background:   #808080    ;
color:    #FFD700    ;
clear:both;
text-align:center;
padding:15px;
border-top:2px solid black;
border-bottom:2px solid black;
border-left:2px solid black;
border-right:2px solid black;
}

Post a Reply

Replies

Oldest  Newest  Rating
0 Ray LeDuc · December 28, 2014
Ok, let's start with how to enter your code here.  Counting from the right hand side of the edit menu count over to the left 7 icons you should clik that and paste in your code like so. I added to your #middle a height rule of 100% to fix your over flowing content. also cleaned up your top_menu (change that back if you want)
I also found that it was difficult to read ( you might lighten it up a bit or not) lol ok so I am sure there are loads more you can do but I just wanted to help you out and to reinforce my learning...:) Hope I helped you at least in some small way... Happy Coding.
/* starting with your css */

*{
margin:0px;
padding:0px;
background: #000000;
}


#big_wrapper{
width:1000px;
margin:0px auto;
}

#top_header{
border:1px solid red; 
text-align:center;
color: #FFD700 ;
background: changed from #000000
margin:10px 5 5 5;
width:100%;
height:100px;
}

#top_menu{
background: #280000; 
color: #280000;
border:1px solid red; 
border-top:0px;
text-align:center;
width: 100%;
}

#top_menu li {
display:inline-block;
list-style:none;
padding:8px;
font:bold 14px tahoma;
margin: 10px  auto 10px;


#top_menu ul li {
display:inline-block;
list-style:none;
padding:10px;
font:bold 14px tahoma;
border:1px outset #E80000;


#left{
float:left;
color: #FFD700 ;
background:#000000;
margin:5px 15px 5px 0;
border:1px solid black;
width:110px; 
height:620px;
}

#left ul{
color: #FFD700 ;
margin:0px;
list-style-type:none;
}

#left ul li{
background-color:#000000 ;
color: #FFD700 ;
margin:5px;
padding:10px;
width:70px;
border:3px outset #E80000;
}

#left ul li a{
display:block;
width:75px;
height:15x;
text-align:center;
text-decoration:none;
line-height:15px;
}

a{
color: #ffffff;
}

#middle{
background: #280000;
float:left;
margin:10px 15px 10px 10;
width:610px;
padding:20px;
text-align:center;
height:100%;
}

#middle_header{
width:600px;
text-align:center;
background: #B8860B;
border-bottom:40px solid darkred;
padding:5px;
margin:0 auto;
margin-bottom:15px;
}

article {
display:inline-block;
width:280px;
text-align:center;
background: #000000 ;
border:1px solid red;
padding:10px;
margin: 0 auto;
margin-bottom:10px;
width:45%;
/* height:15%; */
}

article footer {
text-align:center;
}

#right{
float:right;
background: #A0A0A0 ;
margin: 10px 15px 10px 0;
width:200px;
height:630px;
}
#footer{
background: #808080 ;
color: #FFD700 ;
clear:both;
text-align:center;
width: 100%;
margin:0px;
border: 2px solid black;
padding: 5px;
}
Report


<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>im so tired</title>
  <link href="main.css" rel="stylesheet">
</head>

<body>
  <div id="big_wrapper">
    <header id="top_header">
      <h1>Nerdy Poker=Money and Girls</h1>

      <h3>A Complete guide to crushing the 1-2 game</h3>
    </header>

    <div id="top_menu">
      <ul>
        <li>
          <a href="#">Home</a>
        </li>

        <li>
          <a href="#">Tells</a>
        </li>

        <li>
          <a href="#">Charts</a>
        </li>

        <li>
          <a href="#">Tools</a>
        </li>

        <li>
          <a href="#">Videos</a>
        </li>

        <li>
          <a href="#">Blog</a>
        </li>
      </ul>
    </div>

    <div id="left">
      <nav id="left">
        <ul>
          <li>
            <a href="#">Bet Sizing</a>
          </li>

          <li>
            <a href="#">Semi-Bluffing</a>
          </li>

          <li>
            <a href="#">Bluffing</a>
          </li>

          <li>
            <a href="#">Various Charts</a>
          </li>

          <li>
            <a href="#">Live Play Tips</a>
          </li>

          <li>
            <a href="#">SEARCH</a>
          </li>

          <li>
            <a href="#">Products</a>
          </li>

          <li>
            <a href="#">About</a>
          </li>

          <li>
            <a href="#">Various Charts</a>
          </li>

          <li>
            <a href="#">Live Play Tips</a>
          </li>

          <li>
            <a href="#">Live Play Tips</a>
          </li>
        </ul>
      </nav>
    </div>

    <div id="middleContainer">
      <section id="middle">
        <div id="middle_header">
          <article>
            <a href="#">
            <header>
              <hgroup>
                <h1>starting hand charts</h1>

                <h2>what to play and when to play it</h2>
              </hgroup>
            </header>

            <footer>
              <p>your starting place of how to play poker</p>
            </footer></a>
          </article>
        </div>

        <article>
          <a href="#">
          <header>
            <hgroup>
              <h1>top 10 all time tips</h1>

              <h2>remember these tips to keep you in the game</h2>
            </hgroup>
          </header>

          <footer>
            <p>this will help you avoid stepping into traps</p>
          </footer></a>
        </article>

        <article>
          <a href="#">
          <header>
            <hgroup>
              <h1>top 10 all time tips</h1>

              <h2>remember these tips to keep you in the game</h2>
            </hgroup>
          </header>

          <footer>
            <p>this will help you avoid stepping into traps</p>
          </footer></a>
        </article>

        <article>
          <a href="#">
          <header>
            <hgroup>
              <h1>top 10 all time tips</h1>

              <h2>remember these tips to keep you in the game</h2>
            </hgroup>
          </header>

          <footer>
            <p>this will help you avoid stepping into traps</p>
          </footer></a>
        </article>

        <article>
          <a href="#">
          <header>
            <hgroup>
              <h1>top 10 all time tips</h1>

              <h2>remember these tips to keep you in the game</h2>
            </hgroup>
          </header>

          <footer>
            <p>this will help you avoid stepping into traps</p>
          </footer></a>
        </article>

        <article>
          <a href="#">
          <header>
            <hgroup>
              <h1>top 10 all time tips</h1>

              <h2>remember these tips to keep you in the game</h2>
            </hgroup>
          </header>

          <footer>
            <p>this will help you avoid stepping into traps</p>
          </footer></a>
        </article>

        <article>
          <a href="#">
          <header>
            <hgroup>
              <h1>top 10 all time tips</h1>

              <h2>remember these tips to keep you in the game</h2>
            </hgroup>
          </header>

          <footer>
            <p>this will help you avoid stepping into traps</p>
          </footer></a>
        </article>

        <article>
          <a href="#">
          <header>
            <hgroup>
              <h1>top 10 all time tips</h1>

              <h2>remember these tips to keep you in the game</h2>
            </hgroup>
          </header>

          <footer>
            <p>this will help you avoid stepping into traps</p>
          </footer></a>
        </article><!-- </article>  think is extra-->
      </section>
    </div>

    <div id="right">
      <p>the side ads</p>
    </div>
  </div>

  <footer id="footer">
    copywite guerrila card sharks
  </footer>
</body>
</html>
0 wiliam pierce · December 28, 2014
so very much appreciated ray. working on it now. thanks again!
0 wiliam pierce · December 28, 2014
its looking much better and thanks to you for that. I know I got some work ahead of me but its really looking better. thanks very much again
0 Ray LeDuc · December 29, 2014
No worries m8, anything I can do to help please feel free to ask. and I am still learning just like you. 
  • 1

HTML / CSS / Web Design

107,299 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators