Division background colour not showing behind text element

@tony_webbOct 06.2012

I am trying to program a website and am now unable to get the division background to display behind a text element. You can see what I mean by clicking ~~[URL=”http://www.what-do-christians-believe.co.uk/test/test-3009.html”]~~here[/URL].

[CSS CODE]
body{ max-width: 62.50em;
margin: 0 auto;
padding-bottom: 90px;
background-color: #c0c0c0;
}
#main-back {background-color: #fffff0;} /// Not showing
#main-box {float: left;
padding-bottom: 20px;
background-color:#FFFFFF;
Margin-left: 15%;
margin-right: 15%;
padding: 10px;
border-color: #D5D6FF;
border-style: outset;
border-width: 4px;
text-align: left;
font-family: arial,san-serif;
font-size: 1.25em;
color: black;
}

#main-box img.align-left {float:left;}

#texted-1 {background-color:#FFFFFF;
padding-left: 10px;
padding-right: 10px;
font-family: arial;
font-size: 1.00em;
color: black;
}
[/CODE]

The html code is;

[code=html]<div id=”main-back”> <div id=”main-box”> <h3>About the author – Tony Webb, About the author – Tony Webb, About the author – Tony Webb</h3> <div id=”texted-1″> <p><img src=”http://www.what-do-christians-believe.co.uk/wpimages/a-webb-photo.jpeg” alt=”Photo of Tony Webb” /> </div> </div> </div>

<div id=”foot-menu”>[/code]

Can you tell me what code I need to use to include the background behind the text box (#fffff0)?

to post a comment

CSS

6 Comments(s) _↴

@cootheadOct 06.2012 — #Hi there tony webb,

just remove the "[i]float:left[/i]" from your "[i]#main-box[/i]" rules.

[i]coothead[/i]

@tony_webbauthorOct 06.2012 — #Thanks for your reply. I have removed the float: left comment. It hasn't quiet worked.

I get the text box immediately under the nav bar with no spacing.

I've tried adding margin-top: 20px; at the top of div. a bit lower and even lower at the bottom of the div.

It hasn't worked.

You can see the result [URL="http://www.what-do-christians-believe.co.uk/test/test-3009.html"]here [/U

RL]

I've also tried putting the margin in the html code. That hasn't worked either. Here is the css code;

[CODE]#main-back {background-color: #fffff0;
 margin-top: 20px; // doesn't do anything
 }
 #main-box {padding-bottom: 20px;    // tried putting margin here
 background-color:#FFFFFF;
 Margin-left: 15%;
 margin-right: 15%;
 padding: 10px;
 border-color: #D5D6FF;
 border-style: outset;
 border-width: 4px;   // tried putting margin below here
 text-align: left;
 font-family: arial,san-serif;
 font-size: 1.25em;
 color: black;
 margin-top: 20px;
 }
 [/CODE]

All the url's css code is here

[code=html]<div id="main-back" style="margin-top: 1.25em"> // style not working either
 <div id="main-box">
 <h3>About the author - Tony Webb, About the author - Tony Webb, About the author - Tony Webb</h3>
 <div id="texted-1">
 <p><img src="http://www.what-do-christians-believe.co.uk/wpimages/a-webb-photo.jpeg" alt="Photo of Tony Webb" />
 
 </div>
 </div>
 </div>
 [/code]

You can see all the html code by clicking source from here

Both sets of code pass w3c validation.

I do have a problem with an image not displaying. I've posted another thread on this but not got an asnwer that works. It seems that the division isn't being read.

@cootheadOct 06.2012 — #Hi there tony webb,

I have made a few amendments to both your css and html files. ?

You will find both of these file in the attachment.

[i]coothead[/i]

[canned-message]attachments-removed-during-migration[/canned-message]

@tony_webbauthorOct 06.2012 — #Hi Coothead,

Thanks for that and for centralising the footer menu. That was my next task to attempt!

@cootheadOct 06.2012 — #[indent]No problem, you're very welcome. ?[/indent]

[i]coothead[/i]

@auntniniOct 06.2012 — #I was driving myself CRAZZZZzzzzzzyyyyyyyYYYY until realizing had copied WRONG <style> comment. Slashes work in JavaScript to end of line, but only /*comment*/ within CSS is slash-asterisk-asterislk-slash.

Anyway, here's some code

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 
 &lt;style type="text/css"&gt;
 #main-back { width: 80%; overflow: auto; background-color: #fffff0; margin: 10px auto; padding: 40px;} /* Not showing */
 #main-box {float: left; background-color:red;
 padding: 40px; margin: 10px;
 border: #D5D6FF 4px outset;
 text-align: left;
 font-family: arial,san-serif;
 font-size: 1.25em;
 color: black;
 }
 #main-box h3 {padding: 10px; }
 #main-box img {float:left; padding: 0 5px; margin; 5px; }
 #texted-1 img { float:left; padding: 0 5px;}
 #texted-1 p {padding: 0 5px; }
 #texted-1 {background-color:#FFFFFF;
 overflow: auto; 
 padding: 10px; margin: 10px; 
 font-family: Arial, Helvetica, sans-serif;
 font-size: 1.00em;
 color: black;
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;div id="main-back"&gt; 
 &lt;div id="main-box"&gt;
 &lt;h3&gt;About the author - Tony Webb, About the author - Tony Weoverflow: auto:bb, About the author - Tony Webb&lt;/h3&gt;
 &lt;div id="texted-1"&gt;
 &lt;img src="http://www.what-do-christians-believe.co.uk/wpimages/a-webb-photo.jpeg" alt="Photo of Tony Webb" /&gt;&lt;p&gt;About the author - Tony Webb&lt;/p&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;&lt;!--closeMAIN-BACK--&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Also in #CSS _↴

Help Please [RESOLVED] Designing CSS for a mobile / handheld device Disappearing divs

Success!

Help @tony_webb spread the word by sharing this article on Twitter...

Tweet This

Division background colour not showing behind text element

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Division background colour not showing behind text element

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴