locked
css columns displaying incorrectly RRS feed

All replies

  • You might consider looking at the templates that come with EW.
    There's one that wiil do exactly what you want.


    Expression Web MVP

    Wednesday, July 11, 2012 1:30 PM
  • You have floated the columns.  That means "when you get to this in the flow of the document, float them, then remove them from the flow of the document".  The rest of the document follows, and, other than flowing around the floated items, doesn't know they are there.  Your footer text flows around (between) the floated columns, but otherwise doesn't know they are there.  It starts itself below the element prior to your floated columns, the "content" div.  The only reason the content div has any height is that you have padding on it, and two empty h1's inside it, which have their own default margin and padding.  It knows nothing about the floated columns.

    This is normal for floating, but it's also common to want to contain the floated elements - in your case you want them inside the content div.  One method is to clear the floats on an element that is below the floated columns in the document, but still inside the content div.  The style "clear:both" says "don't put me beside something that is floated, put me on the next line after it". The content div will know where this element is (it's not floated, it's still in the flow of the document), and will stretch down to include it, and by doing so, will include the floated columns.

    An example:  Just prior to the closing </div> of your "content" div, include:

    <p style="clear:both">&nbsp;</p>

    You could add additional styling to it to make it take less space.

    • Edited by KathyW2 Wednesday, July 11, 2012 2:40 PM
    Wednesday, July 11, 2012 2:34 PM
  • An example:  Just prior to the closing </div> of your "content" div, include:

    <p style="clear:both">&nbsp;</p>

    You could add additional styling to it to make it take less space.

    For example, by adding a line-height:

    <p style="clear:both; background-color:red; line-height:1px;">&nbsp;</p>

    I added the background-color property so you could see the difference in size with/without the line-height property. Remove it after testing.  ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Wednesday, July 11, 2012 5:29 PM
  • I appreciate the replies.  That corrected one problem.  The other one seems to be in the right column.  in the left column I can do hit the enter key and there is no problem with the formatting.  When I do the same on the right problems result.

    http://www.epi.msu.edu/test2/test2.html

    Wednesday, July 11, 2012 6:48 PM
  • "in the left column I can do hit the enter key "

    What are you trying to do by hitting an enter key?  You've posted a link, but you haven't told us what is wrong with that page - we dont' know what you want it to look like that is different from what it shows.  (It is doing exactly what you are telling it to do, of course.)

    Wednesday, July 11, 2012 6:53 PM
  • From the link provided if i type in the light blue box or paste i can type so when i hit the enter key I can begin a new line of text properly or format it by changing the newly typed section with a h1, h2 etc.  In the red shaded area if I cannot do that.  The text you see in the white area was supposed to be in the red area.

    Hope this makes sense.

    Wednesday, July 11, 2012 7:23 PM
  • I appreciate the replies.  That corrected one problem.  The other one seems to be in the right column.  in the left column I can do hit the enter key and there is no problem with the formatting.  When I do the same on the right problems result.

    http://www.epi.msu.edu/test2/test2.html

    What Kathy said. And I will add that you should NOT be using empty paragraphs (which is what repeatedly hitting "Enter" creates—look at your source code) to produce vertical positioning. That comes from working only in design view, and while that may seem attractive to a novice, it is not possible in Expression Web. EW is NOT a WYSIWYG application; you must learn HTML and CSS to use it—that is not optional. You should read the Prerequisites for Using Microsoft Expression Web, produced by MS Support for those coming to EW, to get a realistic view of what you need to learn.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Wednesday, July 11, 2012 7:27 PM
  • Adding to what Scott says: it looks like you pasted something from Word or other Office program.  If you don't clear out the styling that comes with that, you end up with nonsense.  Eg: class="MsoNormal" is not defined anywhere, and comes from Office programs.

    There is no reason the text in the white area should be in the red area.  You didn't put it inside the red area.  The red area is just one paragraph, floated right.  The text in the white area is not inside that paragraph.

    Don't space things with multiple newlines or empty paragraphs.  Space things with padding and margins.

    Don't try to work solely in Design View.  You can't see what you are doing.  Work in Spit View and become familar with your Code.

    Wednesday, July 11, 2012 8:49 PM
  • Further to what has been said above, search engines do not deal well with javascript menus, which you are using. If you want your site to be properly indexed by search engines, it's best to use a CSS menu.

    CSS menus can be every bit as interactive and feature-rich as javascript ones. They are simple to implement and troubleshoot and search engines have absolutely no problems with them. For samples, see what's being done at www.cssplay.co.uk. There are many free CSS menu builders online.


    A call to action:
    What do we want?!
    Time travel!
    When do we want it?!
    That's irrelevant!

    Thursday, July 12, 2012 12:58 AM