Web Analytics Made Easy -
StatCounter Why isnt Div the same height as the body? - CodingForum

Announcement

Collapse
No announcement yet.

Why isnt Div the same height as the body?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Why isnt Div the same height as the body?

    I have a background image to my body tag, and have a background image to my main div wrapper which wraps everything really.

    The main div wrapper has a fixed width, however the height and the background image doesnt seem to be able to be 100% so effectively height wise you are unable to see any of the body tag background image if you see what I mean.

    Is there a way around this, Im just trying to perfect my backgrounds at the moment.

    Thanks.

    Code attached....................

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <style type="text/css">


    #bodywrapper {font-style:serif;
    color:#736F6E;
    font-size:13px;
    background-image:url('http://www.freecomputerdesktopbackgrounds.com/freebg/j03ecc0pg3m2y9.jpg');
    }

    .mainwrapper { width:950px;
    margin:auto;
    padding:25px;
    background-image:url('http://static.wix.com/media/72ac58ea6bb1bf0b30048faac5eebf19.wix_mp'); }

    .headnavandlogo {color:#5898ED;
    font-size:12px;
    margin-right:125px; }

    .headnavandlogo ul {list-style-type:none; }
    .headnav1 {float:right;
    }
    .headnav1 li {padding-bottom:3px;
    padding-top:5px;

    }
    .headnav2 {float:right; }
    .headnav2 li {padding-bottom:3px;
    padding-top:5px;}
    .headnav2 li:hover {border-bottom:solid;
    border-width:1px;
    }
    .headnav1 li:hover {border-bottom:solid;
    border-width:1px;
    }
    .homenav {border-bottom:solid;
    border-width:1px;
    margin-right:19px; }
    .portfolionav:hover {padding-bottom:2px; }
    .portfolionav {margin-right:15px; }
    .contactusnav {margin-right:3px; }
    .aboutus {padding-bottom:30px;
    }
    .aboutus p { }
    .aboutus h2 {text-align:left;
    border-bottom:solid;
    border-width:1px;
    background-color:#BDEDFF;
    width:457px;
    margin-top:140px; }
    .seo {float:right;
    width:457px;
    margin-left:20px;}
    .seo h2 {text-align:left;
    border-bottom:solid;
    border-width:1px;
    background-color:#BDEDFF; }
    .websitedesign {max-width:457px;
    }
    .websitedesign h2 {text-align:left;
    border-bottom:solid;
    width:457px;
    border-width:1px;
    background-color:#BDEDFF;}
    .optimisationimage {margin-left:20px; }
    .seofirstpara {margin-top:23px;
    display:inline-block; }

    </style>
    </head>

    <body id="bodywrapper">
    <div class="mainwrapper">
    <div class="headnavandlogo">

    <ul class="headnav1">
    <li class="portfolionav">PORTFOLIO</li>
    <li class="contactusnav">CONTACT US</li>
    </ul>

    <ul class="headnav2">
    <li class="homenav">HOME</li>
    <li class="servicesnav">SERVICES</li>
    </ul>

    </div>
    <div class="aboutus">
    <h2>Introduction</h2>
    <p>
    Exercitum Hannibalis transeuntem Appenninum impediebat ferox tempestas:
    magnus imber vento mixtus oppugnabat capita militum, qui verebantur ut
    tantam vim frigoris ferre possent. Duos dies eo loco sicut obsessi
    manserunt. Multi homines mortui sunt, multa animalia: etiam perierunt septem
    elephanti ex iis qui semper adhuc superaverant.

    Degressus Appennino Hannibal ad Placentiam castra movit et decem
    milia passuum progressus consedit. Postero die duodecim milia peditum,
    quinque equitum contra hostem ducit; nec Sempronius consul fugit proelium.
    Atque eo die tria milia passuum inter duo castra fuerunt; postero die magnis
    animis pugnaverunt. Primo vis Romanorum ita superior fuit ut non solum
    vincerent, sed pulsos hostes in castra sequerentur et castra oppugnarent.
    Iam nona diei hora erat, cum Romanus dux, cum nulla spes esset capiendorum
    castrorum, militibus imperavit ut omnino se reciperent. Hoc ubi Hannibal
    accepit, extemplo, equitibus emissis, in hostem ipse cum peditibus e mediis
    castris erupit. Acriter pugnatum est, sed nox proelium diremit. Ab utraque
    parte sescenti pedites et trecenti equites ceciderunt; sed maior Romanis
    iactura fuit, quod equestris ordinis tot viri et tribuni militum quinque et
    praefecti sociorum tres sunt interfecti.
    </p>
    </div>
    <div class="seo">
    <h2>Search engine optimisation</h2>
    <p class="seopara">
    <img src="http://allmp3needs.com/wp-content/uploads/2011/08/PRIMUS-optimisation.jpg" class="optimisationimage" />
    <br />
    <span class="seofirstpara">Degressus Appennino Hannibal ad Placentiam castra movit et decem
    milia passuum progressus consedit. Postero die duodecim milia peditum,
    quinque equitum contra hostem ducit; nec Sempronius consul fugit proelium.
    Atque eo die tria milia passuum inter duo castra fuerunt; postero die magnis
    animis pugnaverunt. Primo vis Romanorum ita superior fuit ut non solum
    vincerent, sed pulsos hostes in castra sequerentur et castra oppugnarent.
    </span>
    </p>
    </div>
    <div class="websitedesign">
    <h2>Website development</h2>
    <p class="websitedesignpara">
    <img src="http://allmp3needs.com/wp-content/uploads/2011/08/PRIMUS-web-building-resized1.jpg" />
    <br />
    Hoc ubi Hannibal
    accepit, extemplo, equitibus emissis, in hostem ipse cum peditibus e mediis
    castris erupit. Acriter pugnatum est, sed nox proelium diremit. Ab utraque
    parte sescenti pedites et trecenti equites ceciderunt; sed maior Romanis
    iactura fuit, quod equestris ordinis tot viri et tribuni militum quinque et
    praefecti sociorum tres sunt interfecti.
    </p>
    </div>
    </div>
    </body>
    </html>

  • #2
    ok seriously, you've been here long enough to know to use the code tag button to wrap your code so that its easier to view. The # button is what thats for.

    A link to your site would be easier because we're talking about images.
    Teed

    Comment


    • #3
      Originally posted by adamwestrop View Post
      The main div wrapper has a fixed width, however the height and the background image doesnt seem to be able to be 100% so effectively height wise you are unable to see any of the body tag background image if you see what I mean.
      Like all block level elements, unless you assign them a height their rendered height will be just what is required to contain the content. If you want an element to have 100% height then its parent element must have a height assigned to it in the css.

      Comment


      • #4
        Hi adamwestrop

        Originally posted by webdev1958 View Post
        Like all block level elements, unless you assign them a height their rendered height will be just what is required to contain the content. If you want an element to have 100% height then its parent element must have a height assigned to it in the css.
        Exactly

        Thus,

        Code:
        body, html {
        height:100%;
        }
        //Improvement in coding is iterative, each 'failure' is just the next step on your learning curve, some knowledge and logic can get you a long way.//

        Comment

        Working...
        X