locked
CSS ID Style properties question concerning nested DIV's RRS feed

  • Question

  • I am having an issue with the way my content DIV overlaps my sidebar DIV within my container DIV. My container DIV holds my masthead, Sidebar, content, Clear and my footer DIV's. This is the code (I have taken out the stuff I felt unnecessary to show here):

    <div id="container">
    <div id="masthead">
    <div id="sidebar"></div>
    <div id="content"></div>
    <div class="clear"></div>
    <div id="footer"></div>
    </div>

    This is my CSS code:

    #container {
    border: thin inset #000066;
    width: 785px;
    margin: 0 auto;
    background-image: url('../images/TCPBackground.jpg');
    background-repeat: repeat-y;
    }
     #masthead {
    margin: 0;
    padding: 0;
    width: 785px;
    height: 50px;
    }
    #sidebar {
    width: 170px;
    float: left;
    }
    #content {
    width: 600px;

    float: right;
    background-color: #EFEFFF;
    margin-right: 5px;
    }

    I have text in my content DIV that expands the content DIV text over my Sidebar DIV. What settings do I need to make to correct this. I also want to add a background color the the content code that expands to meet the area that the text takes up as it varies from a few lines to many lines. 

    Website link: http://teamconpaulos.com/index.html

    Any help here would be greatly appreciated and thank you all in advance.



    Thursday, February 23, 2012 6:15 PM

Answers

  • Please post a link to a page that illustrates the problem.  There is no "content" div on the page you linked to.  (And, note that your site not only has style1.css, but layout.css imported into that, so all the CSS in layout.css also applies.)

    I will point out a different problem with the page you linked to:  You have set a masthead height that is shorter than the image in it.  The floated sidebar either overlaps it, or is overlapped by it, depending on the browser.  Looks bad in the later case.

    • Marked as answer by RandyHarbi Friday, February 24, 2012 4:23 PM
    Thursday, February 23, 2012 7:30 PM

All replies

  • You have given the masthead a height of 50px, but the image displayede in it has a height of 93px snd overflows the masthead.

    Remove the height from the masthead div.


    Ron Symonds
    Microsoft MVP (Expression Web)

    www.rxs-enterprises.org/fp
    Thursday, February 23, 2012 7:23 PM
  • Please post a link to a page that illustrates the problem.  There is no "content" div on the page you linked to.  (And, note that your site not only has style1.css, but layout.css imported into that, so all the CSS in layout.css also applies.)

    I will point out a different problem with the page you linked to:  You have set a masthead height that is shorter than the image in it.  The floated sidebar either overlaps it, or is overlapped by it, depending on the browser.  Looks bad in the later case.

    • Marked as answer by RandyHarbi Friday, February 24, 2012 4:23 PM
    Thursday, February 23, 2012 7:30 PM
  • You've got other issues, as well. Open the site in Firefox, set View|Zoom|Zoom Text Only, then press Ctrl-+ several times and watch the layout blow up. This is particularly bad on the "Vehicles In Stock" page.

    No offense, Randy, but the site indicates a number of problems indicative of lack of training and/or experience. You might want to avail yourself of some of the free training resources in the Forum FAQs and Guidelines - Start Here, especially Cheryl's free "Build a Basic Web Site" video tutorial, at http://by-expression.com/post/2009/09/22/Basic-Website-Tutorial.aspx, which, in addition to how to use EW, will also provide a fair introduction to some principles of Web development you would find of value.

    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.


    • Edited by paladyn Friday, February 24, 2012 8:57 PM
    Thursday, February 23, 2012 9:14 PM
  • Thank you, your suggestion was helpfull

    Randy Harbison

    Friday, February 24, 2012 4:24 PM
  • I found that I had placed the editable region on the Content Div rather than inside. This solved my issue. Thank you for taking the time to review my code.

    Randy Harbison

    Friday, February 24, 2012 4:26 PM
  • Scott, thank you for your insight. I have, with you all's help solved my main issue. You are right on about training. This is my first website with EW and CSS. I purchased a total training series but it leaves some holes. Thank you for taking the time to  review the site. Have another look and let me know how it looks to you now. Thanks again for taking the time.

    Randy Harbison

    Friday, February 24, 2012 4:29 PM