Text hanging off side of page?

[daviddoria]

I'm still very new to css, so I'm sure this is just some really silly thing:
http://engineeringnotes.net/personal/

Does anyone know why the text is hanging off the left side of the page (on the "home" page and the "publications" page?

Thanks,

Dave

[urolicious]

div#main needs to be enclosed in the div#content-wrap.
this will stop your text from "hanging out" :)
you need to change your HTML to the following:

<div id="content-wrap">
    <div id="sidebar">
      <h1>Search Box</h1>
      <form action="http://www.free-css.com/" class="searchform">
        <p>
          <input name="search_query" class="textbox" type="text" />

          <input name="search" class="button" value="Search" type="submit" />
        </p>
      </form>
      <h1>Sidebar Menu</h1>
      <ul class="sidemenu">
        <li><a href="http://www.free-css.com/">Home</a></li>
        <li><a href="#TemplateInfo">Template Info</a></li>

        <li><a href="#SampleTags">Sample Tags</a></li>
        <li><a href="http://www.free-css.com/">More Free Templates</a></li>
        <li><a href="http://www.free-css.com/">Premium Templates</a></li>
      </ul>
      <h1>Links</h1>
      <ul class="sidemenu">
        <li><a href="http://www.free-css.com/">PDPhoto.org</a></li>

        <li><a href="http://www.free-css.com/">Squidfingers</a></li>
        <li><a href="http://www.free-css.com/">Alistapart</a></li>
        <li><a href="http://www.free-css.com/">CSS Remix</a></li>
        <li><a href="http://www.free-css.com/">Dark Eye</a></li>
      </ul>
    </div>

    <div id="main">
      Home page
   </div> <!--end main-->

  </div>

and then you need to clear #main and #sidebar.
here is a good article that explains how to clear your elements:
http://www.positioniseverything.net/easyclearing.html

[daviddoria]

I see, thanks. However, I have most of the code in a header.shtml file so I can do this:

<div id="wrap">
<!--#include file="header.shtml" -->
    <div id="main">
      Home page
   </div> <!--end main-->

</div> <!--end content wrap from header.shtml-->

So that I can use the same page layout and just server side include different text for each "page" of the site. So now the header.shtml looks like:

<div id="content-wrap">
    <div id="sidebar">
      <h1>Some stuff</h1>
  
    </div> <!--end sidebar-->

You'll note that there is no </div> ending the content-wrap because that appears in the main files (index.shtml for example) AFTER the main-div, as you suggested. This seems a BIT goofy - is this a standard thing to do?

Thanks,

Dave

[testndtv]

You can use the clear:both attributes to fix the issue

http://asktheexpert-techsupport.blogspot.com/

[urolicious]

I see, thanks. However, I have most of the code in a header.shtml file so I can do this:

<div id="wrap">
<!--#include file="header.shtml" -->
    <div id="main">
      Home page
   </div> <!--end main-->

</div> <!--end content wrap from header.shtml-->

So that I can use the same page layout and just server side include different text for each "page" of the site. So now the header.shtml looks like:

<div id="content-wrap">
    <div id="sidebar">
      <h1>Some stuff</h1>
  
    </div> <!--end sidebar-->

You'll note that there is no </div> ending the content-wrap because that appears in the main files (index.shtml for example) AFTER the main-div, as you suggested. This seems a BIT goofy - is this a standard thing to do?

Thanks,

Dave

no it is not standard. what you should do is remove #content-wrap from header.shtml and instead have it like so:

<div id="sidebar">
      <h1>Some stuff</h1>
  
    </div> <!--end sidebar-->

and have your index.shtml look like so:

<div id="wrap">
  <div id="content-wrap">
    <!--#include file="header.shtml" -->
    <div id="main">
      Home page
   </div> <!--end main-->

  </div> <!--end content wrap from header.shtml-->

also remember to clear your elements or you will run into problems later on... refer to the article i linked for you or look up "how to clear floats".

[daviddoria]

Great - I guess the problem was mostly with what was contained inside the content-wrap. I didn't end up "clearing" any of the div's, but it seems to be working fine.

Thanks!