Mark asks…

I have set a div inside a div. I want the nested tag to fit top to bottom inside the other. I set the…?

second class to ” height: 100%;” but it will not stretch top to bottom of the outer tag. How can I do this?

Here’s what it looks like

.mainbody {
font-size: 14px;
padding: 0px 4px 4px 0px;
width: 65%;
vertical-align: middle;
text-align: justify;
background-color: DDDDDD;
border-top: thin solid 000000;
border-right: 0px none 000000;
border-bottom: thin none 000000;
border-left: 0px none 000000;
}

.sideset {
background-color: 006699;
width: 165px;
left: 0px;
top: 0px;
float: left;
height: 100%;
text-align: center;
margin-right: 10px;
bottom: 0px;
vertical-align: 100%;
margin-bottom: 0px;
}

.
.
.
.

info

Body info
.
.
.
.

rollandb1, which one should I put it in?
jpasher, I have the pound sign in it, I don’t know why it didn’t show up on here. The rest didn’t work.

Girl Talk answers:

The outer div (class=mainbody) doesn’t have any inherit size. When you set the inner div (class=sideset) to a height of 100%, it’s 100% height within the parent object (the outer div). Due to the lack of size information for the outer div, the question is “100% of what?”. Oddly enough Firefox stretches the box down the entire page, which doesn’t seem like the correct box model. However, adding a “height: 100%” to the “mainbody” class makes the outer div stretch the entire page in IE and Firefox.

Also, you need to put a # in font of your colors (e.g. Background-color: #DDDDDD)
——————–
Update:
I’m not sure what to tell you then. I used the following code and it stretched to 100% height in Firefox 2 and IE6 (I don’t have IE7 to test).

.mainbody {
font-size: 14px;
padding: 0px 4px 4px 0px;
height: 100%;
width: 65%;
vertical-align: middle;
text-align: justify;
background-color: #DDDDDD;
border-top: thin solid #000000;
border-right: 0px none #000000;
border-bottom: thin none #000000;
border-left: 0px none #000000;
}

.sideset {
background-color: #006699;
width: 165px;
left: 0px;
top: 0px;
float: left;
height: 100%;
text-align: center;
margin-right: 10px;
bottom: 0px;
vertical-align: 100%;
margin-bottom: 0px;
}

info

Mandy asks…

part3 adobe…master?

/*
Copyright 2005 Adobe Systems Incorporated.
Master Template CSS
$Revision: 1.47 $
*/
body {
padding: 0;
margin: 0;
height: auto;
}
#layoutLogic {
padding: 0;
margin: 0 auto;
width: 758px;
text-align: left;
min-height: 450px;
}
#pod,
.with-pod #gecko,
#infoPodCap,
#infoPodCapBottom,
#promo,
#pod-fma
{
position: relative;
}
#promo,
#pod-fma,
#pod,
#infoPod,
#infoPodCap,
#infoPodCapBottom
{
float: right;
clear: right;
}
#pod,
#promo
{
top: 0px;
}
#infoPodCap
{
top: 0px;
}
.with-pod #gecko
{
/**/
top: -1px;
/*/
margin-top: -1px;
/**/
}
/**/
#infoPodCap
{
margin-bottom: -1px;
}
/**/
#promo
{
margin-bottom: -8px;
}
#promo,
#infoPodCapBottom
{
padding-bottom: 15px;
}
#infoPodCapBottom
{
margin-bottom: -1px;
}
html>body #promo,
html>body #infoPodCapBottom
{
padding-bottom: 15px;
}
html>body #infoPodCapBottom
{
margin-bottom: -9px;
}
html>body #promo
{
margin-bottom: -2px;
}
#pod-fma
{
margin-bottom: 0px;
}
#pod-fma #promo,
#pod-fma #infoPod,
#pod-fma #infoPodCap,
#pod-fma #infoPodCapBottom
{
width: auto;
float: none;
clear: none;
}
#pod-fma #infoPodCap
{
top: 0;
margin-bottom: 0;
}
#pod-fma #promo,
#pod-fma #infoPodCapBottom
{
padding-bottom: 0;
margin-bottom: 9px;
}
/**//*/
#pod,
#pod-fma
{
margin-top: -9px;
}
#infoPodCapBottom
{
padding-bottom: 9px;
}
#promo
{
display: inline-block;
}
#pod-fma #promo
{
top: 0;
}
#promo img
{
margin-bottom: 9px;
}
/**/
/**/
* html body {
text-align: center;
}
* html #layoutLogic {
height: 450px;
}
/**/
/**/
* html .with-pod #contentBody h3,
* html .with-pod #contentBody div.options-pod,
* html .with-pod #contentBody div.options-pod *
{
position:relative;
}
/**/
#capBottom {
margin: 0 auto;
padding: 0;
width: 758px;
height: 10px;
font: 1px/1px monospace;
}
br.clear-both,
div.clear-both,
br.clear-left,
div.clear-left {
font: 1px/1px monospace;
display: block;
}
.clear-both {
clear: both;
}
.clear-left {
clear: left;
}
#flash-pixel { display: none;}
#infoPod h3 {
position/**/: relative;
margin-top: 0;
padding-top: 0px;
margin-left: -9px;
margin-right: -9px;
margin-bottom: 10px;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 5px;
padding-left: 8px;
}
#accesslink {
display: block;
position: absolute;
top: 0px;
left: -999px;
width: 1px;
height: 1px;
}
#depthpath {
padding: 8px 23px 0;
margin: 0;
min-height: 10px;
}
#depthpath ol {
list-style: none;
margin: 0;
padding: 0;
}
div[id="depthpath"] ol,
div[id="depthpath"] ol li {
display: inline;
}
#depthpath li.last-child a {
font-weight: bold;
}
div[id="depthpath"] ol li:after {
content: ” /”;
margin-left: 0.1ex;
padding-right: 0.2ex;
}
ol#depthpath {
padding-left: 16px;
}
* html div#depthpath li {
background: url(/images/master/markers/depthmarker.gif) no-repeat right 3px;
float: left;
margin: 0 2ex 0 0;
padding: 0 2.5ex 0 0;
}
/**/
*:first-child+html div#depthpath ol li {
background: url(/images/master/markers/depthmarker.gif) no-repeat right 3px;
margin: 0 1.5ex 0 0;
padding: 0 1.5ex 0 0;
}
* html #depthpath ol {
height: 1em;
}
/*/
#depthpath {
display: inline-block;
width: 82%;
}
/**/
/**/
* html #gecko
{
height: 1em;
}
/**/
#contentBody div.h-nav {
margin: 0 -8px 0.85em -8px;
padding: 0.1em 8px;
}
#contentBody div.h-nav h3,
#contentBody div.h-nav a {
display: inline !important;
}
h1 {
margin: 22px 1px 0;
padding: 0 0 0.35em 17px;
}
#contentBody {
padding: 0 17px 50px 16px;
margin: 16px 1px 0 1px;
}
#contentFooter {
margin: 20px auto;
width: 756px;
}
#mmfooterlogo {
float: left;
margin-left: 18px;
}
#copyright-terms {
float: left;
margin-left: 14px;
width: 646px !important;
width: 650px;
}
#copyright-terms p {
margin-bottom: 0.2em;
}
#badge-google {
float: right;
text-align: right;
margin-top: -2px;
margin-right: 11px;
width: 153px;
}
img.googlelogo {
margin-left: 0.3em;
vertical-align: middle;
}
#fma
{
padding: 0 2px;
}
/**//*/
* html>body #pod p {
margin-right: 1px;
}
/**/

Girl Talk answers:

Again, just more CSS.

See my answer on http://answers.yahoo.com/question/index;_ylt=AtZ570cUZJcpLdTEm7uq6rDsy6IX?qid=20070129125717AAMUgzs&show=7#profile-info-1bbb82d46eb9c9a173f4732813ad1dfcaa for more on CSS.

Thomas asks…

Help With This Web Design Project?

I have an urgent project I am working on and I’m having some trouble. I am designing a site with HTML and CSS and am having some major Internet Explorer issues. When I view the code in any other browser (Chrome, Firefox, Safari) the page appears as intended. However when I open it in Internet Explorer all links in the container div tag appear halfway down the page. I have adjusted margins to no avail. Any help would be great. Here is the HTML with the link:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml…

Site By

Michael Smith

warzilnut.com



Site by Michael Smith 2010

ironmike97@comcast.net

Here is the CSS:

/*
————————————
CSS: sitestyle.css
Created: January 2010
Author: Michael Smith
Site: http://www.warzilnut.com
————————————

*/

/* Banner/Navbar Styles */

#header {
background-color: #00275E;
height: 140px;
text-align: left;
margin: 0px;
padding: 0px;
}

.creator {
text-align: right;
float: right;
color: white;
font-weight: bold;
margin-right: 5px;
}

#accent {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
height: 5px;
background-color: #A8B1B8;
}

ul.navtop {
margin-bottom: 0px;
padding-bottom: 0px;
margin-left: 0px;
padding-left: 0px;
list-style: none;
border-bottom: none;
overflow: hidden;
zoom: 1;
margin-top: 0px;
background-color: #6d98ab;
}

ul.navtop li {
float: left;
margin-bottom: 0px;
padding-bottom: 0px;
}

ul.navtop a {
width: 10em;
display: block;
padding: 0px;
margin-right: 5px;
text-decoration: none;
color: white;
font-weight: bold;
text-align: center;
height: 30px;
margin-top: 0px;
background-color: #6d98ab;
margin-bottom: 0px;
}

ul.navtop a:visited {
color: white;
text-decoration: none;
}

ul.navtop a:hover {
background-color: white;
color: black;
}

/* End Banner and Navbar */

/* Start Body Styles */

#wrapper {
background: url(images/sidebar.png) repeat-y left top;
height: 900px;
margin: 0px;
padding: 0px;
}

/* Left News Bar */

#news {
width: 170px;
margin-left: 0px;
border-right: 2px solid #6d98ab;
float: left;
height: 900px;
margin-top: 0px;
}

ul.news {
list-style: none;
padding-left: 0px;
margin-left: none;
width: 170px;
margin-top: 0px;
}

ul.news li {
border-bottom: 1px dashed #6d98ab;
}

ul.news p {
display: block;
color: white;
width: 170px;
padding-left: 5px;
margin-left: 5px;
}

ul.news h4 {
color: white;
padding: 10px;
}

/* End Newsbar */

#container {
margin-left: 185px;
}

#container h1, h2, h3, h4, h5, h6 {
color: #00275E;
margin-left: 5px;
}

p.note {
color: black;
border: 1px dashed #6d98ab;
padding: 5px;
}

#container a {
margin: 0;
}

/* End Body */

/* Foot*/

#foot {
margin: 0px;
padding: 0px;
height: 80px;
background-color: #00275E;
}

#foot h5, h4 {
color: white;
text-align: center;
margin: 0px;
}

#foot a {
color: white;
margin: 0px;
}

Any help would be greatly appreciated.

Girl Talk answers:

Off hand, I can’t say what it was that changed to bring the link into position. But compare both the following html and css with what you had. I removed some blank lines and comment lines to shorten up this response. Notice that Yahoo Answers is dropping off part of the closing tag in the topnav list.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml…

Site By Michael Smith

warzilnut.com



Site by Michael Smith 2010 ironmike97@comcast.net

CSS

#header {
background-color: #00275E;
height: 140px;
text-align: left;
margin: 0px;
padding: 0px;
}

.creator {
text-align: right;
float: right;
color: white;
font-weight: bold;
margin-right: 5px;
}

#accent {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
height: 5px;
background-color: #A8B1B8;
}

ul.navtop {
margin-bottom: 0px;
padding-bottom: 0px;
margin-left: 0px;
padding-left: 0px;
list-style: none;
border-bottom: none;
overflow: hidden;
zoom: 1;
margin-top: 0px;
background-color: #6d98ab;
}

ul.navtop li {
float: left;
margin-bottom: 0px;
padding-bottom: 0px;
}

ul.navtop a {
width: 10em;
display: block;
padding: 0px;
margin-right: 5px;
text-decoration: none;
color: white;
font-weight: bold;
text-align: center;
height: 30px;
margin-top: 0px;
background-color: #6d98ab;
margin-bottom: 0px;
}

ul.navtop a:visited {
color: white;
text-decoration: none;
}

ul.navtop a:hover {
background-color: white;
color: black;
}

#wrapper {
background: url(images/sidebar.png) repeat-y left top;
/* height: 900px; */
margin: 0px;
padding: 0px;
}

#news {
width: 170px;
margin-left: 0px;
border-right: 2px solid #6d98ab;
float: left;
/* height: 900px; */
margin-top: 0px;
}

ul.news {
list-style: none;
padding-left: 0px;
margin-left: none;
width: 170px;
margin-top: 0px;
}

ul.news li {
border-bottom: 1px dashed #6d98ab;
}

ul.news p {
display: block;
color: white;
width: 170px;
padding-left: 5px;
margin-left: 5px;
}

ul.news h4 {
color: white;
padding: 10px;
}

#container {
margin-left: 185px; /* 185 */
}

#container h1, h2, h3, h4, h5, h6 {
color: #00275E;
margin-left: 5px;
}

p.note {
color: black;
border: 1px dashed #6d98ab;
padding: 5px;
}

#container a {
margin-top: 10px;
}

#foot {
margin: 0px;
padding: 0px;
height: 80px;
background-color: #00275E;
}

#foot h5, h4 {
color: white;
text-align: center;
margin: 0px;
}

#foot a {
color: white;
margin: 0px;
}

Hope this helps.

Robert asks…

How do I get rid of the gap underneath my footer in css?

I did have a gap on both, but when i put maring 0 padding 0 into my body it only got rid of the gap at the top, can anyone help me fix it?
#wrapper_outer {
background-image: url(../images/bg.jpg);
background-repeat: repeat-y;
background-position: center;
padding: 0px;
margin: 0px;

}

body {
margin: 0px;
padding: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #009;
font-style: normal;
}

#wrapper {
width: 1024px;
margin: 0 auto;
padding:0 px;
height: auto;
background-image: url(../images/bubbles.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: bottom;

}
#content {
width: 1024px;
padding: 0;
margin-left: 15px;
margin-right: 15px;
background-image: none;
background-position: bottom;
}

#Navigation {
margin-left: 14px;
margin-right: 15px;
margin-top: 0px;
margin-bottom: 0px;
width: 1024px;
padding: 0px;

}

#headinfo
{
text-align: center;
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 0px;
}

#main {
text-align: justify;
float: left;
padding-left: 60px;
width:470px;
text-align: left;
}

#sidebar {
text-align: right;
float: right;
width: 400px;
padding-left: 30px;
margin-right: 30px;
text-align: left;
}

#footer {
text-align: center;
clear: both;
margin-bottom: 0px;
padding: 0px;

}

Girl Talk answers:

Try a negative margin-bottom.

James asks…

What’s wrong with this CSS code?

The error I have is that the body and footer repeat on some browsers. Foxfire and Safari don’t show it correctly. the website is live at contactyou.netne.net

#Top /* Top Div */
{
margin: 0px;
padding: 0px;
background-color: #D5CBA8;
line-height: 30px;
width: 100%;
color: #000000;
text-align: left;
text-indent: 100px;
vertical-align: text-bottom;
}

#Header /* Header Div */
{
margin: 0px;
padding: 0px;
background-color: #C0D1EC;
width: 100%;
height: 100px;
border-top: 1px solid black;
border-bottom: 1px solid black;
color: #5C5B58;
text-align: left;
text-indent: 200px;
}

#Sidebar
{
margin: 0px;
padding: 0px;
background-color: #FFA300;
float: left;
height: 85%;
width: 20%;
border-right: 1px solid black;
border-bottom: 1px solid black;
color: #000000;
text-align: left;
text-indent: 20px;
}

#Body
{
margin: 0px;
padding: 0px;
background-color: #EDEBD6;
height: 85%;
width: 80%;
float: right;
border-bottom: 1px solid black;
}

#Footer
{
margin: 0px
padding: 0px;
background-color: #335A9A;
height: 20px;
width: 100%;
clear: both;
}

Girl Talk answers:

CSS validated, but you have HTML errors:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcontactyou.netne.net%2F

You have NO document type.

Ron

Powered by Yahoo! Answers

Filed under: Girl Talk

Like this post? Subscribe to my RSS feed and get loads more!