...

View Full Version : div content breaking out of body



dlthomas
12-12-2010, 09:04 PM
My div content is breaking out of my body in firefox and both the body and html in most other browsers.

Why? - my trouble page is http://hrnewseastanglia.com/why-us/

In my css, it's meant to be in a content div that's inside a wrapper div that is above another div called footerWrapper. Hope that makes sense.

css:


/*My two columns that are breaking out*/
.wideLeft-L{width:540px; float:left; margin-right:50px;}

#includedColumn
{
float:right;
width:150px;
font-size:10px;
}

/* The div that my columns sit inside */

#content
{
position:relative;
z-index:50;
top:-50px\9;
*top:0;
_top:-50px;
margin-left:70px;
text-align:left;
}


/* My wrappers */

#wrapper
{
position:relative;
width: 800px;
margin: 0 auto;
padding: 0;
text-align:left;
z-index:50;
padding-bottom:70px;\
}

#footerWrapper
{
position:relative;
width: 800px;
height:130px;
margin: 0 auto;
padding: 0;
z-index:50;
}

dlthomas
12-12-2010, 09:12 PM
correction:
I looked at firebug and it doesn't break out of the body.

The problem is that the body's background image stops at the bottom of the window...

Here is my code for the html and body:


html, body {
width: 100%;
margin: 0;
font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #999;
text-align:center;
}
html {background: #000 url('http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/bgGolfedge.jpg') repeat-x bottom;}
#body1 {background: url('http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/golfBG1.jpg') no-repeat center bottom;}
#body2 {background: url('http://hrnewseastanglia.com/wp-content/themes/golf_v1/images/golfBG2.jpg') no-repeat center bottom;}

wcompton83
12-12-2010, 09:43 PM
I too am having trouble with my content extending outside of the desired height. I've been working on a website for a client for a couple of weeks and I've recently had to do a rush job and on a new interface (don't ask). Anyways I used a bit of jquery and I have several different css scripts embedded in the website. It shows up fine on computers, but for some reason my background-image for my website runs waaaay beneath the footer on smart phones. The site name is http://sette-demos.thesette.com/. Can someone please help me out?

dlthomas
12-12-2010, 09:49 PM
wcompton83: Mate I'd start a new thread if I were you, otherwise it might get a bit confusing. Our issues both involve background images but am guessing they require totally different solutions. Maybe look into css smart phone hacks.

Excavator
12-12-2010, 10:26 PM
Hello dlthomas,
You have a height set on #wrapper. I'm sure it's to make it look right when there is no content but, when there is a lot of content like your why-us page, it blows out the bottom.

Remove the height here in your markup -

<div id="wrapper">
<div id="header">

<a href="http://hrnewseastanglia.com" id="mainLogo"></a>
<a href="http://hrnewseastanglia.com"><h1>Executive<span class="greenPart">Golf ltd</span></h1></a>

<div id="socialBookmarks">


Then clear your floats by adding overflow: auto; to #wrapper in your style.css.

A page like this, with a lot of content, does not lend itself well to your bottom place background image because the background doesn't show up until the content is scrolled.
Not sure what to do about that...
less content or position: fixed on the background image?


Let me know if I'm completely off base...

dlthomas
12-12-2010, 10:34 PM
Hi again Excavator

I had a bit of jquery to set the wrapper to a height if the body height was less than the user's window.

I've taken that js out and put overflow:auto; to wrapper but now the background images go right to the top of the page?

Excavator
12-12-2010, 10:58 PM
The validator would have caught this for you... see highlighted in red below -
#wrapper
{
position:relative;
width: 800px;
margin: 0 auto;
padding: 0;
text-align:left;
z-index:50;
padding-bottom:70px;\
overflow: auto;
}


//edit - I missed that bit of jQuery :o

dlthomas
12-12-2010, 11:22 PM
Damn Excavator - to say your pretty good at this is an understatement!

I got rid of that silly js and took out the failed ie8 hack ('\' - don't think it even is, is it) and my *** is saved again! Thank you so much!

I think my problem must be that I'm over-complicating things too much. JS, ridiculous amounts of conditional statements and millions of css parsers. I'm learning though - can't wait to get started on a new project to start afresh.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum