Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Sophia Su
Sophia Su
1,025 Points

Help me fix layout please 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<title>Reagan High School</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<!-- Homepage Specific Elements -->
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="scripts/jquery.tabs.setup.js"></script>
<!-- End Homepage Specific Elements -->
</head>
<body id="top">
<div class="wrapper row1">
  <div id="header" class="clear">
    <div class="fl_left">
      <h1><a href="index.html">Ronald Reagan High School</a></h1>
      <p>NEISD- San Antonio, TX</p>
    </div>
    <div class="fl_right">

      <form action="#" method="post" id="sitesearch">
        <fieldset>
          <strong>Search:</strong>
          <input type="text" value="Search Our Website&hellip;" onfocus="this.value=(this.value=='Search Our Website&hellip;')? '' : this.value ;" />
          <input type="image" src="images/search.gif" id="search" alt="Search" />
        </fieldset>
      </form>
    </div>
  </div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper row2">
  <div class="rnd">
    <!-- ###### -->
    <div id="topnav">
      <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="full-width.html">Full Width</a></li>
        <li><a href="3-columns.html">3 Columns</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="#">This a very long link</a></li>
        <li class="last"><a href="#">This is the last</a></li>
      </ul>
    </div>
    <!-- ###### -->
  </div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper">
  <div id="featured_slide" class="clear">
    <!-- ###### -->
    <div class="overlay_left"></div>
    <div id="featured_content">
      <div class="featured_box" id="fc1"><img src="images/demo/slider/1.gif" alt="" />
        <div class="floater">
          <h2>Nullamlacus dui ipsum</h2>
          <p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
          <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
        </div>
      </div>
      <div class="featured_box" id="fc2"><img src="images/demo/slider/2.gif" alt="" />
        <div class="floater">
          <h2>Aliquatjusto quisque nam</h2>
          <p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
          <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
        </div>
      </div>
      <div class="featured_box" id="fc3"><img src="images/demo/slider/3.gif" alt="" />
        <div class="floater">
          <h2>Aliquatjusto quisque nam</h2>
          <p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
          <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
        </div>
      </div>
      <div class="featured_box" id="fc4"><img src="images/demo/slider/4.gif" alt="" />
        <div class="floater">
          <h2>Aliquatjusto quisque nam</h2>
          <p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
          <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
        </div>
      </div>
      <div class="featured_box" id="fc5"><img src="images/demo/slider/5.gif" alt="" />
        <div class="floater">
          <h2>Dapiensociis temper donec</h2>
          <p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
          <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
        </div>
      </div>
    </div>
    <ul id="featured_tabs">
      <li><a href="#fc1">All About The University</a></li>
      <li><a href="#fc2">Why You Should Study With Us</a></li>
      <li><a href="#fc3">Education And Student Experience</a></li>
      <li><a href="#fc4">Alumni And Its Donors</a></li>
      <li class="last"><a href="#fc5">Latest University News &amp; Events</a></li>
    </ul>
    <div class="overlay_right"></div>
    <!-- ###### -->
  </div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper row3">
  <div class="rnd">
    <div id="container" class="clear">
      <!-- ####################################################################################################### -->
      <div id="homepage" class="clear">
        <!-- ###### -->
        <div id="left_column">
          <h2>Example Text </h2>
          <div class="imgholder"><a href="#"><img src="images/demo/220x80.gif" alt="" /></a></div>
          <h2>Example Text</h2>
          <div class="imgholder"><a href="#"><img src="images/demo/220x80.gif" alt="" /></a></div>
          <h2>Example Text </h2>
          <div class="imgholder"><a href="#"><img src="images/demo/220x80.gif" alt="" /></a></div>
          <h2>Example Text </h2>
          <div class="imgholder"><a href="#"><img src="images/demo/220x80.gif" alt="" /></a></div>
        </div>
        <!-- ###### -->
        <div id="latestnews">
          <h2>Latest News &amp; Events</h2>
          <ul>
            <li class="clear">
              <div class="imgl"><img src="images/demo/imgl.gif" alt="" /></div>
              <div class="latestnews">
                <p><a href="#">Sentumquisque morbi dui congue.</a></p>
                <p>This is a W3C compliant free website template from <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a>. This template is distributed using a <a href="http://www.os-templates.com/template-terms">Website Template Licence</a></p>
              </div>
            </li>
            <li class="clear">
              <div class="imgl"><img src="images/demo/imgl.gif" alt="" /></div>
              <div class="latestnews">
                <p><a href="#">Sentumquisque morbi dui congue.</a></p>
                <p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files.</p>
              </div>
            </li>
            <li class="last clear">
              <div class="imgl"><img src="images/demo/imgl.gif" alt="" /></div>
              <div class="latestnews">
                <p><a href="#">Sentumquisque morbi dui congue.</a></p>
                <p> For more CSS templates visit <a href="http://www.os-templates.com/">Free Website Templates</a>. Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
              </div>
            </li>
          </ul>
          <p class="readmore"><a href="#">Click here to view all of the latest news and events &raquo;</a></p>
        </div>
        <!-- ###### -->
        <div id="right_column">
          <div class="holder">
            <h2>Video</h2>
            <iframe width="225" height="168.75" src="http://www.schooltube.com/embed/0cdaf0816b30405fb82a" frameborder="0" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
          <div class="holder">
            <h2>Happy Lip Dub</h2>
            <div class="apply"><a href="#"><img src="images/demo/100x100.gif" alt="" /> <strong><center>Faculty<br>/ Staff</center></strong></a></div>
            <div class="apply"><a href="#"><img src="images/demo/100x100.gif" alt="" /> <strong>NEISD Webpage</strong></a></div>
          </div>
        </div>
        <!-- ###### -->
      </div>
      <!-- ####################################################################################################### -->
        <div class="fl_right">Webpage last updated on July 12,2014 at 8:18PM</div>
      </div>
      <!-- ####################################################################################################### -->
      <div id="academiclinks" class="clear">


<!-- ####################################################################################################### -->
<div class="wrapper row4">
  <div class="rnd">
    <div id="footer" class="clear">
      <!-- ####################################################################################################### -->
      <div class="fl_left clear">
        <div class="fl_left center"><img src="images/demo/worldmap.gif" alt="" /><br />
          <a href="#">Find Us With Google Maps &raquo;</a></div>
        <address>
        19000 Ronald Reagan Dr.<br />
        San Antonio, TX <br />
       78258<br />
        </address>
      </div>
      <div class="fl_right">
        <div id="social" class="clear">
          <address>
        Tel: 210.356.1800<br />
        Fax: 210.482.2222 <br />
       <p> </p>
       <p>Office Hours: 8:00 AM - 4:30 PM</p>
          </address>
        </div>
      </div>
      <!-- ####################################################################################################### -->
    </div>
  </div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper">
  <div id="copyright" class="clear">
    <p class="fl_left">Sophia Su &copy; 2014</p>
  </div>
</div>
</body>
</html>
Sophia Su
Sophia Su
1,025 Points

how can I attach an image?

Ben Falk
Ben Falk
3,167 Points

Try editing your question and putting the three backticks on new lines above and below the code, not on the same lines as the code. That should make it a lot easier to read.

As for images... I'm not completely sure, sorry! I know you can link to an image, so if you upload an image to your web hosting, you should be able to link it in. You could also create a new workspace within Treehouse, upload an image there, and then link to that image here?

2 Answers

Sophia Su
Sophia Su
1,025 Points
Sophia Su
Sophia Su
1,025 Points

Ben Falk , I edited the image. If you open the HTML file, the bottom does not line up

Ben Falk
Ben Falk
3,167 Points

I think you'll need to include your CSS code too, since I can't see how you have styled things without that.

Sophia Su
Sophia Su
1,025 Points
Sophia Su
Sophia Su
1,025 Points

Ben Falk 

#homepage{
    position:relative;
    margin:0 auto 30px;
    display:block;
    width:100%;
    }

/* ----------------------------------------------Left Column-------------------------------------*/

#homepage #left_column{
    display:block;
    float:left;
    width:230px;
    }

#homepage #left_column .imgholder{
    margin-bottom:20px;
    }

/* ----------------------------------------------Latest News-------------------------------------*/

#homepage #latestnews{
    display:block;
    float:left;
    width:420px;
    margin:0 0 0 20px;
    }

#homepage #latestnews ul{
    margin:0;
    padding:0;
    list-style:none;
    }

#homepage #latestnews li{
    display:block;
    width:100%;
    margin:0 0 20px 0;
    padding:0 0 20px 0;
    list-style:none;
    border-bottom:1px solid #DEDACB;
    }

#latestnews .latestnews{
    display:block;
    float:right;
    width:270px;
    margin:0;
    padding:0;
    }

#latestnews .latestnews p{
    margin:0 0 8px 0;
    padding:0;
    }

#latestnews .imgl{
    margin:0;
    }

#latestnews p.readmore{
    display:block;
    width:100%;
    clear:both;
    margin:0;
    padding:0;
    text-align:right;
    }

/* ----------------------------------------------Right Column-------------------------------------*/

#homepage #right_column{
    display:block;
    float:left;
    width:230px;
    margin:0 0 0 20px;
    }

#homepage #right_column .holder{
    display:block;
    width:100%;
    margin-bottom:20px;
    }

#homepage #right_column .apply a{
    display:block;
    width:230px;
    height:100px;
    margin-bottom:20px;
    color:#666666;
    background-color:#DEDACB;
    font-size:14px;
    text-transform:uppercase;
    overflow:hidden;
    }

#homepage #right_column .apply a strong{
    display:block;
    float:right;
    width:130px;
    height:72px;
    padding-top:28px;
    text-align:center;
    cursor:pointer; /* IE7 Doesnt render the cursor properly so this is needed */
    }

#homepage #right_column .apply img{
    display:block;
    float:left;
    width:100px;
    height:100px;
    }

/* ---------------------------------------------Twitter-------------------------------------*/

#twitter{
    display:block;
    width:900px;
    height:86px;
    margin:0 0 30px 0;
    padding:10px;
    clear:both;
    background:url("../images/twitter_bg.gif") top left no-repeat;
    }

#container #twitter a{
    color:#2DCDFF;
    background-color:#11371f;
    }

#twitter .fl_left{
    display:block;
    float:left;
    width:94px;
    height:61px;
    margin:0;
    padding:25px 10px 0 44px;
    background:url("../images/twitter_logo.gif") 0 14px no-repeat;
    border-right:2px solid #FFFFFF;
    text-align:center;
    }

#twitter .fl_left a{text-transform:uppercase;}

#twitter .fl_right{
    display:block;
    float:right;
    width:730px;
    height:60px;
    margin:0;
    padding:26px 0 0 0;
    font-size:14px;
    font-weight:bold;
    line-height:1.4em;
    color:#FFFFFF;
    background-color:#11371f;
    }

/* ----------------------------------------------Academic link Block-------------------------------------*/

#academiclinks{
    display:block;
    width:920px;
    }

#academiclinks .linkbox{
    display:block;
    float:left;
    width:215px;
    margin:0 20px 0 0;
    font-size:12px;
    }

#academiclinks a{
    }

#academiclinks ul{
    margin:0;
    padding:0;
    list-style:none;
    }

#academiclinks .last{
    margin:0;
    }
Ben Falk
Ben Falk
3,167 Points

Thanks. When I set up the HTML and CSS files in a temporary workspace, this is what I get: http://web-p1j7ssbnou.treehouse-app.com/test.html

Are you sure that's the complete CSS file? Or is that what it looks like for you too? (images/javascript aside, which I don't have obviously)