ADOBE DREAMWEAVER:

Home

Dreamweaver Forum

Dreamweaver Tutorials

FAQ

Adobe Flash

Web Design

Larger DIV not including contained DIVs


	Cow Forums : Adobe Dreamweaver << PREVIOUS THREAD • VIEW ALL THREADS • PRINT • NEXT THREAD >>

Larger DIV not including contained DIVs
by Kathy Widenhouse on Sep 11, 2009 at 6:34:42 pm

I'm new to CSS -- thanks for your patience.

In this website template, I've got a header with smaller DIVS that are working fine. Thought I coded the #content DIV (below the header) to contain both left and right sidebars as well as the central #text section... but I must be missing a bit of code/tags somewhere. I'd like the #content DIV to act as a background for the sidebars and central #text section, but it doesn't extend on the page to include all 3 sub DIVs.

Here's my code. Let me know if you need something else. Thanks much.

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<title>The Clover Choraliers-base template</title>



<link href="../choraliers_site_styles.css" rel="stylesheet" type="text/css" />





























</head>

<body>

<div id="ch_header_container">

<div id="ch_header">

<div id="cling"><img src="../images/Choraliers logo146x100.jpg" width="146" height="100" alt="logo" /></div>

<div id="logo">

<h1> Clover High School Choraliers</h1></div>

<div id="hnav">add content here</div>

</div>

</div>

<div id="content">

<div id="leftsidebarbox">

<div id="vertnav">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Events</a></li>

<li><a href="#">For Students</a></li>

<li><a href="#">For Parents</a></li>

<li><a href="#">For Alumni</a></li>

<li><a href="#">Choral Boosters</a></li>

<li><a href="#">Scrapbook</a></li>

<li><a href="#">Listen</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

<div id="leftbox">Music quotations</div>

</div>

<div id="text">

<h1>Heading 1</h1>



<p>This is ...</p>

<p>Body text ...</p>



<p> </p>

<div id="footer">

The Clover Choraliers • P.O. Box 836 • Clover, SC 29710 <a href="mailto:choraliers@gmail.com">choraliers@gmail.com</a><br />

<a href="http://www.clover2.k12.sc.us/chs/" title="CHS Home" target="_blank">CHS Home </a>

</div>

</div>

<div id="rightsidebarbox">

<div id="rightbox1">

<div align="center">

<div style="width:120;">

<table border="0" width="120" cellspacing="0" cellpadding="0">

<tr>

<td width="100%"><a href="http://visitor.constantcontact.com/d.jsp?m=1101413896589&p=oi" target="_blank" style="text-decoration:none; font-weight: bold; font-family:Arial; font-size:13px; color:#006699;">Get email advance notice of Choraliers events & news!</a></td>

<td valign="bottom"><div style="background-color: #ff9900; "><a href="http://visitor.constantcontact.com/d.jsp?m=1101413896589&p=oi" target="_blank"><img src="http://img.constantcontact.com/ui/images1/visitor/arrow3_trans.gif" alt="Email Newsletter icon, E-mail Newsletter icon, Email List icon, E-mail List icon" border="0"></a></div></td>

</tr>

</table>

</div>

</div>



</div>

<div id="rightbox2">

<p><strong>Now released on CD! </strong></p>

<p>The Choraliers perform John Rutter's <em>Requiem</em>, recorded live on 4/5/09.</p>

<p>Order your own copy <a href="../forms/2009RequiemCDOrderForm.1.doc">here.</a></p>

</div>

<div id="rightbox3">

<p>Choraliers gear is now available! </p>

<p><img src="../images/Choraliershat.jpg" alt="Golf hat with Choraliers logo" width="72" height="73" hspace="20" align="middle" /></p>

<p> </p>

<p>View products <a href="#">here</a>.</p>

</div>

</div>

</div>

</body>

</html>

Respond to this post • Return to posts index

Re: Larger DIV not including contained DIVs
by Richard Williams on Sep 11, 2009 at 8:24:40 pm

can you post a link to the site please, or paste the code for the css also

thanks

Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)

Respond to this post • Return to posts index

Re: Larger DIV not including contained DIVs
by Kathy Widenhouse on Sep 11, 2009 at 8:28:29 pm

Site still being built ... not live yet. Here's the .css code

body {
background-color: #666;
margin: 0px;
padding: 0px;
}
#ch_header_container {
background-color: #006;
width: 100%;
height: 100px;
}
#ch_header_container #ch_header {
margin: auto;
width: 685px;
}
#ch_header_container #ch_header #logo h1 {
font-family: Tahoma, Geneva, sans-serif;
font-size: 200%;
color: #FFF;
font-style: normal;
font-weight: bold;
font-variant: normal;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 5px;
}
#ch_header_container #ch_header #hnav {
font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
float: right;
height: 0px;
width: 500px;
color: #FFF;
text-align: right;
list-style-type:none;
}
#hnav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#hnav ul li {
display: inline;
}
#hnav ul li a {
color: #FFF;
text-decoration: none;
padding-right: 5px;
padding-left: 5px;
}
#hnav ul li a:hover {
background-color: #33F;
}
#hnav ul li a:present {
background-color:#999
}

#ch_header_container #ch_header #cling {
float: left;
height: 100px;
width: 150px;
padding-right: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

#content {
width: 685px;
margin: auto;

}
#content #leftsidebarbox {
background-color: #006;
float: left;
width: 125px;
border-right-width: 0px;
border-right-style: none;
border-right-color: #666;
}
#content #leftsidebarbox #vertnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 70%;
font-weight: bold;
color: #FFF;
background-color: #006;
list-style-type: none;
width: 120px;
border: medium double #669;
}
#content #leftsidebarbox #vertnav ul li a {
text-decoration: none;
display: block;
margin: 2px;
padding: 2px;
border: medium outset #CCC;
color: #FFF;
}
#vertnav ul li a:hover {
background-color: #666;
}
#vertnav ul li a.present {
background-color: #333;
}
#vertnav ul li a:link {
color: #FFF;
}
#content #leftsidebarbox #leftbox {
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
color: #333;
background-color: #C90;
width: 90px;
padding: 5px;
clear: none;
height: auto;
margin-top: 30px;
margin-right: 15px;
margin-bottom: 30px;
margin-left: 15px;
}

#content #text {
background-color: #FFF;
margin: 0px;
width: 390px;
float: left;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666;
border-left-color: #666;
padding: 5px;
}
#content #text #footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #333;
text-align: center;
}
#content #rightsidebarbox {
float: left;
width: 155px;
background-color: #FFF;
}

#content #rightsidebarbox #rightbox1 {
float: none;
width: 120px;
border: thick solid #FC0;
padding: 2px;
margin-top: 20px;
margin-right: 12px;
margin-bottom: 10px;
margin-left: 12px;
}
#content #rightsidebarbox #rightbox2 {
float: none;
width: 120px;
padding: 2px;
margin-top: 10px;
margin-right: 12px;
margin-bottom: 10px;
margin-left: 12px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#content #rightsidebarbox #rightbox3 {
float: none;
width: 120px;
border: thick solid #36F;
padding: 2px;
margin-top: 10px;
margin-right: 12px;
margin-bottom: 20px;
margin-left: 12px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
}

#content #leftsidebarbox #vertnav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#content #text h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #006;
}
#content #text h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #333;
}
#content #text p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
}

Thanks so much

Respond to this post • Return to posts index

Re: Larger DIV not including contained DIVs
by Richard Williams on Sep 11, 2009 at 9:09:31 pm

ok... you are doing this wrong really.

I am guessing you are pressing new css rule within dreamweaver, and it is giving you things like this...

#content #leftsidebarbox
and
#content #leftsidebarbox #vertnav ul li a

When really the rules should be
#leftsidebarbox
and
#vertnav ul li a

The problem is that if you set a width setting inside the rule
#content #leftsidebarbox
then it actually translates as
#content width =x
and
#leftsidebarbox width =x

you need to set up all of your div settings as single rules, then only use rules like #content #leftsidebarbox when the rule is a comon rule for both areas. Am i making sence?

You will see what i mean if you simply add a height to the #content rule within your CSS, then the whole layout changes becuase the width setting is all confused.

I hope this helps a bit, if not then please come back

Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)

Respond to this post • Return to posts index

Re: Larger DIV not including contained DIVs
by Kathy Widenhouse on Sep 11, 2009 at 11:36:22 pm

Thanks much -- what you say makes sense.

However, I set up the div settings as single rules, and still don't have a consistent height for all 3 sections of the content.

Here's the .css code. I appreciate your patience. :)

body {
background-color: #666;
margin: 0px;
padding: 0px;
}
#ch_header_container {
background-color: #006;
width: 100%;
height: 100px;
}
#ch_header {
margin: auto;
width: 685px;
}
#logo h1 {
font-family: Tahoma, Geneva, sans-serif;
font-size: 200%;
color: #FFF;
font-style: normal;
font-weight: bold;
font-variant: normal;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 5px;
}
#hnav {
font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
float: right;
height: 0px;
width: 500px;
color: #FFF;
text-align: right;
list-style-type:none;
}
#hnav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#hnav ul li {
display: inline;
}
#hnav ul li a {
color: #FFF;
text-decoration: none;
padding-right: 5px;
padding-left: 5px;
}
#hnav ul li a:hover {
background-color: #33F;
}
#hnav ul li a:present {
background-color:#999
}

#cling {
float: left;
height: 100px;
width: 150px;
padding-right: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#content {
width: 685px;
margin: auto;
height: auto;

}
#leftsidebarbox {
background-color: #006;
float: left;
width: 125px;
border-right-width: 0px;
border-right-style: none;
border-right-color: #666;
}
#vertnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 70%;
font-weight: bold;
color: #FFF;
background-color: #006;
list-style-type: none;
width: 120px;
border: medium double #669;
}
#vertnav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#vertnav ul li a {
text-decoration: none;
display: block;
margin: 2px;
padding: 2px;
border: medium outset #CCC;
color: #FFF;
}
#vertnav ul li a:hover {
background-color: #666;
}
#vertnav ul li a.present {
background-color: #333;
}
#vertnav ul li a:link {
color: #FFF;
}
#leftbox {
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
color: #333;
background-color: #C90;
width: 90px;
padding: 5px;
clear: none;
height: auto;
margin-top: 30px;
margin-right: 15px;
margin-bottom: 30px;
margin-left: 15px;
}

#text {
background-color: #FFF;
margin: 0px;
width: 390px;
float: left;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666;
border-left-color: #666;
padding: 5px;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #333;
text-align: center;
}
#rightsidebarbox {
float: left;
width: 155px;
background-color: #FFF;
}
#rightbox1 {
float: none;
width: 120px;
border: thick solid #FC0;
padding: 2px;
margin-top: 20px;
margin-right: 12px;
margin-bottom: 10px;
margin-left: 12px;
}
#rightbox2 {
float: none;
width: 120px;
padding: 2px;
margin-top: 10px;
margin-right: 12px;
margin-bottom: 10px;
margin-left: 12px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
##rightbox3 {
float: none;
width: 120px;
border: thick solid #36F;
padding: 2px;
margin-top: 10px;
margin-right: 12px;
margin-bottom: 20px;
margin-left: 12px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
}

#text h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #006;
}
#text h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #333;
}
#text p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
}

Respond to this post • Return to posts index

Re: Larger DIV not including contained DIVs
by Fernando Mol on Sep 12, 2009 at 5:50:52 am

With your permission, Richard, I will add a suggestion.

I guess the problem with the content div is that the columns inside are floated. When you float an element you take it out of the normal flow. That's why the content div is acting as it has no content at all.

One common way to solve that problem is to add a class called .clearfloat with an attribute of float:none

.clearfloat {

	float: none;

}

Then, add an element at the very end of your code, but inside your container div, and give it the class of .clearfloat

The element can be a footer or a simple line break. The benefit of this solution is that the div will expand to the content if, for example, a user has a bigger font size as a default.

Right now the content div has no background color, so it will need some to show the expansion properly.

BTW, this solution will not always be perfect, because the element with the clearfloat will position itself just below the last floated element, not necessary below the bigger one.

I hope this helps.

*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.

Respond to this post • Return to posts index

Re: Larger DIV not including contained DIVs
by Richard Williams on Sep 12, 2009 at 7:43:42 pm

lol... Waving you through fernando... You know me and CSS ;o)

Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)

Respond to this post • Return to posts index


	<< PREVIOUS THREAD • VIEW ALL THREADS • PRINT • NEXT THREAD >>