Learn VBA & Macros in 1 Week!

CSS - Divs Not Nesting Properly

Full Excel VBA Course - Beginner to Expert

Divs Not Nesting Properly	View Content

This is driving me crazy and I can't figure it out. I have a "content" div that is a container for 2 other div's (a sidebar and a main content area). For some reason it isn't rendering in the proper place; it's rendering at the top of the page instead of under the navigation (if I don't assign a height to it it doesn't render at all). It also isn't extending past the end of the other 2 div's to reach the footer. I have tried adding overflow hidden to it but it just makes the other 2 divs not render at all. Any help is greatly appreciated.

Here is the HTML and the CSS is below it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Portal - Layout Generator</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
 <div id="wrapper">
    <div id="header">
		 
		       <p>This is the Header</p>		 
			   
	 </div><!-- /#header -->
 	 <div id="navigation">
		 <ul>
			<li><a href="#" >Home</a></li>
			<li><a href="#" >About</a></li>
			<li><a href="#" >Contact</a></li>
			<li><a href="#" >Links</a></li>		 
		 </ul>		 
	 </div><!-- /#navigation -->
	 <div id="content">
		 <div id="leftcolumn">
			<div class="box_blue">
				<div class="box_header_blue">Hello, World!</div><!-- /.box_header_blue -->
				<div class="box_content_blue">
		 			<ul>
						<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
						<li>Aliquam scelerisque eros at est lobortis eget adipiscing felis sodales.</li>
						<li>Sed faucibus hendrerit ante, vitae volutpat tellus suscipit sit amet.</li>
						<li>Quisque rutrum arcu non ipsum fringilla dapibus.</li>
						<li>Aliquam aliquam arcu sit amet nisi viverra facilisis.</li>
					</ul>
				</div><!-- /.box_content_blue -->
		 	</div><!-- /.box_blue -->
		 </div><!-- /#leftcolumn -->
		 <div id="main">
		      
			  <p>This is the main content</p><br /><br /> 
              <p><a href="layouts/121836.htm">

              <img border="0" src="layouts/html.png" width="16" height="16"> HTML File</a></p>
              <p><a href="layouts/121836.css">
              <img border="0" src="layouts/css.png" width="16" height="16"> CSS File</a></p>
	          <p>To download, right click and choose 'Save Target as...'</p>
	          <p>&nbsp;</p>
	          <p>If you use one of these layouts, please consider linking to CSS Portal.<br />
                http://www.cssportal.com</p>
                
              
	          		 
		 </div><!-- /#main -->
	 </div><!-- /#content -->
	 <div id="footer">
		       
			   <p>This is the Footer</p>		
			    
	 </div><!-- /#footer -->  
 </div><!-- /#wrapper -->
</body>
</html>

Code:


* { padding: 0; margin: 0; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a{
	text-decoration: none;
	color: inherit;
	}
	
ul {
	list-style: none;
	}

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: url('images/bg.png') fixed;
}

p {
 padding: 10px;
}

#wrapper { 
 margin: 0 auto;
 width: 1000px;
}

#header {
 color: #333;
 height: 200px;
 background: url('images/header.png') fixed;
}

#footer { 
 height: 100px;
 clear: both;
 color: #333;
 background: #6B6659;
}

#navigation {
 float: left;
 width: 1000px;
 height: 35px;
 color: #333;
 background: #6B6659;
 background: #b5bdc8; /* old browsers */
 background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* firefox */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* webkit */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* ie */
 line-height: 35px;
}

#navigation li {
	display: inline;
	float: left;
	padding: 0 10px;
	color: #dddddd;
	}

#content {
	background: #f6f9fa repeat;
	color: #545454;
	margin: 0 auto;
	box-shadow: 2px 0px 3px rgba(0,0,0,.8), -2px 0px 3px rgba(0,0,0,.8);
	 -moz-box-shadow: 2px 0px 5px rgba(0,0,0,.8), -2px 0px 5px rgba(0,0,0,.8);
	 -webkit-box-shadow: 2px 0px 3px rgba(0,0,0,.8), -2px 0px 3px rgba(0,0,0,.8);
	 position: relative;
	} 

#leftcolumn { 
 color: #333;
 background: #EBE3CD;
 width: 200px;
 float: left;
 padding: .5em;
}

#main { 
	color: #333;
	background: #fff;
	width: 770px;
	float: right;
	padding: 8px;
}

.box_blue {
	-moz-border-radius: 1.2em 1.2em 1.2em 1.2em;  
	-moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.6); 
	margin: 1.6em 0;
}

.box_header_blue {
	background-color: rgb(23, 71, 115); 
	color: rgb(255, 255, 255); 
	font-weight: bold; 
	line-height: 3em; 
	text-align: center; 
	font-size: 1.2em; 
	-moz-border-radius-topleft: 1.2em; 
	-moz-border-radius-topright: 1.2em; 
	border-right: 1px solid rgb(0, 0, 50); 
	border-width: 1px; border-style: solid; 
	border-color: #86B1E3 rgb(0, 0, 50) rgb(0, 0, 50); 
	text-shadow: 1px 1px 1px rgb(16, 16, 16); 
	background-image: -moz-linear-gradient(center top , rgb(45, 90, 141), rgb(71, 93, 167) 50%, rgb(43, 75, 128) 51%, rgb(45, 93, 138));
	}
	
.box_content_blue {
	padding: .5em;
   background: -moz-linear-gradient(top, #f1f1f1, #fff 75%) #fff;
	display: inline-block; 
	border-right: 1px solid rgb(0, 0, 50); 
	border-width: 1px; 
	border-style: solid; 
	border-color: rgb(152, 208, 237) rgb(0, 0, 50) rgb(0, 0, 50); 
	-moz-border-radius-bottomleft: 1.2em;
	-moz-border-radius-bottomright: 1.2em;
	}
	
.box_content_blue li {
	padding: 10px 0;
	border-bottom: 1px dotted #cccccc;
	}

Full Excel VBA Course - Beginner to Expert

Div Tags Not Nesting Properly

Similar Tutorials

View Content

I'm having a problem with the way my div tags are behaving in a page I am trying to build. I have all the div's nested properly (I think) but the problem is is that the footer is appearing right below the top banner. The footer is not nested in the div that contains the rest of the pages content it appears behind everything else actually. I have been messing with my style sheet and moving everything around to no avail. For some reason the div that contains all the content has a height of zero when it shouldn't. I have used similar page structure before on other pages but this is the first time im using two columns of free floating boxes as opposed to one solid column divided in two. I'm leaving the style sheet and the mark up below if you can figure it out that would be great. There is only one image and it shouldn't have anything to do with this problem. I will be eternally grateful to whoever can help me as this has made me seriously consider hitting my computer with a brick.

Code:

// here's the stylesheet
body{ 
	background: url('../images/mainbackground.jpg/') repeat fixed;
	font-family: calibri, helvetica, 'sans serif';
	line-height: 130%;
	margin: 0px;
	padding: 0px;
	}
	
#banner{ 
	background: #b34150 repeat-x 50% 100%;  
	border-bottom: 3px solid white;
   padding: 0px 0px 0px 0px;
	margin: 0px 0px 27px 0px;
	height: 100px;
	}
		
#nav{
	float: right;
	height: 100px
	width: 90px;
	margin: 0 auto;
	padding:0;
	}
	
#nav ul{
	list-style: none;
	display: inline;
	line-height: normal;
	}
	
#nav li{
	background: #b34150;
	float: left;
	margin: 65px 10px 0px; 
	padding: 5px 20px 0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	width: 50px;
	height: 30px;
	text-align: center;
	font-size: 14pt; 
	}
	
#nav li a{
	text-decoration: none;
	color: white;
	font-weight: bold;
	text-shadow: 0px 3px 3px #000;
	}
	
#nav li:hover{
	background: #ec9aa5;
	-moz-border-radius:0px;
	border: 0px solid #eccdcd;
	-moz-box-shadow: 0px 0px 35px #fff;
	}
	
#content{
	width: 900px;
	margin: 0 auto;
	background: none no-repeat;

	}
	
#left_column {
	float: left;
	width: 700px;
	margin: 0 auto;
	}
	
#main{
	background: url('../images/banner-back-top.jpg/') repeat-x top center #fff;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	-moz-box-shadow: 3px 3px 3px #888;
	-webkit-box-shadow: 3px 3px 3px #888;
	width: 650px;
	padding: 8px 5px;
	float: left;
	}
	
#right_column {
	float: right;
	width: 175px;
	margin: 0 auto;
	}
	
#sidebar{
	background: #fff;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	-moz-box-shadow: 3px 3px 3px #fff;
	-webkit-box-shadow: 3px 3px 3px #fff;
	width: 175px;
	margin: 0 auto;
	padding: 8px;
	float: left;
	}
	
#footer{
	background: #b34150 repeat-x 50% 100%;  
	border-bottom: 3px solid white;
   padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height: 100px;
	}
	
#footer_info {
	background: #91323f;
	text-align: left;
	font: normal normal normal 75%/normal calibri, helvetica, sans-serif;
	color: white;
	float: left;
	}

//And here is the mark up
<html>
<head>
<title>SL | Clothing</title>
<meta name="description" content="description" >
<link rel="stylesheet" type="text/css" href="resources/style.css">
<script type="text/javascript" src="resources/dropdown.js" ></script>
<link rel="canonical" href="">
</head>
<body>
 <div id="banner"><img src="images/top.jpg" alt="" >
  <div id="nav">
   <ul>
    <li style="background: #ec9aa5;"><a href="">Home</a></li>
    <li><a href="" >Shirts</a></li>
    <li><a href="" >Hats</a></li>
    <li><a href="" >About</a></li>
    <li><a href="" >Contact</a></li>
   </ul>
  </div>
 </div>
 <div id="content">
  <div id="left_column">
   <div id="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec urna nunc. Etiam eleifend massa sed orci bibendum iaculis. Donec pharetra mauris vitae odio porta pretium. Sed cursus lorem quis risus laoreet posuere vitae a turpis. Etiam porttitor venenatis velit, a interdum quam mattis vel. Donec in tortor sed felis commodo blandit. Integer vel mauris odio, tincidunt dapibus magna. Sed orci libero, dapibus ac bibendum vel, fermentum a augue. Cras lobortis viverra massa ac placerat. Praesent id lectus ante, sed volutpat felis. Fusce eget dolor a est pellentesque pharetra. Praesent malesuada, ligula at interdum consequat, nunc magna sagittis risus, id pellentesque libero ante id nisl. Fusce pretium, turpis sit amet ornare congue, metus nunc mollis dui, quis cursus tortor est eu lorem. Duis id erat erat. Aliquam eu nunc vel sem scelerisque venenatis in nec diam. Praesent tincidunt, mauris ut sollicitudin tincidunt, augue nunc condimentum tortor, sed tincidunt velit risus vel nisl. Vestibulum tincidunt consectetur libero, aliquet consectetur nulla hendrerit a.</p>   
   </div>
  </div>
  <div id="right_column">
   <div id="sidebar">
    Content Goes Here!
   </div>  
  </div>
 </div>
 <div id="footer">
  <div id="footer_info">Copyright 2010 SL CLothing LLC. Web Design and Layout by : Ian Auld</div>
 </div>
</body>
</html>

Divs Not Aligning Properly

Similar Tutorials

View Content

I'm trying to recreate a header that was built using tables.

Here is an example of the original header. This is how I want it to look using div.

http://65.175.116.253/logo/html_head_p1.html

Here is the code for the table based header

Code:

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

<html>

<head>
</HEAD>

<body bgcolor="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
		
<basefont face="verdana">

<table width="780" height="68" border="0" cellpadding="0" cellspacing="0">
<tr> 
<td bgcolor="#004C91" align="center" valign="center" width="222"><img src="http://65.175.116.253/logo/logo.gif" width="196" height="49" hspace="10">
</td>
<td bgcolor="#004C91" align="center" valign="center" width="600">
<img src="http://65.175.116.253/logo/banner.jpg">
</td>
</tr>
</table>
</body>
</html>

Here is the header using the code with DIVs.

http://65.175.116.253/logo/styletest.html

Here is the code I have using divs. I'm confused as to how to align the images correctly in the divs... Can someone show me how to correct this? I put the style info in teh same document so it would be easier to read.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<style type="text/css">
#headerlogo {
background: #004C91;
position: absolute;
width: 222px; 
height: 68px;
top: 0px;
padding-left: 0px;
padding-right: 0px;
}

#headerbanner {
background: #004C91;
position: absolute;
width: 600px; 
height: 68px;
top: 0px;
padding-left: 50px;
padding-right: 0px;
}
</style>

<title>Untitled</title>

</head>


<body>
<div id="headerlogo"><img src="http://65.175.116.253/logo/logo.gif">
<div id="headerbanner"><cfinclude template="banner.cfm">


</body>
</html>

Centered Divs Failing To Align Properly.

Similar Tutorials

View Content

can anyone tell me why the control div with the links and the div to contain the images for my photo album do not look properly aligned?

link to photo Album can be found here but please note this is a dynamically set IP so is likely to change:

http://85.210.107.231/PA.html

Width Of Divs Equals 100%, But Doesn't Display Properly

Similar Tutorials

View Content

Hi, all. I'm brand new to CSS and have run into my first speedbump. I've tried searching the forum already, forgive me if I missed a previously posted solution.

Today I put together a page at work and it looked correct in IE8 (which is the only browser we can use at work). When I got home, I discovered that it doesn't display properly in ANY other browser.

I've validated my code, and just can't figure out what the problem is.

(I tried to link to images here of what it should look like versus what it actually looks like, but apparently as a new user I'm not permitted to post URLs. I also don't seem to be able to insert images into this post, so if anyone would like to see the images, I guess I could email them to you.)

Can anyone tell me why the DIVs appear to be too long? Thanks in advance for any help.

Here is the HTML:

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="comp.css" />
</HEAD>
<BODY>

<div id="parent">

<div id="left_top">
</div>

<div class="bigcontainer" id="right_top">
a very<br>special<br>place<br>on the<br>internet
</div>

<div class="container" id="left_mid">
additional reading
</div>

<div class="container" id="right_mid">
tab one | tab two | tab three | tab four | tab five
</div>

<div class="container" id="left_bottom">
first link<br>
second link<br>
third link<br>
fourth link<br>
fifth link<br>
sixth link<br>
seventh link<br>
eighth link<br>
</div>

<div id="right_bottom">
<p>
Lorem ipsum dolor sit amet...
</p>
</div>

</div>

</BODY>
</HTML>

Here is the CSS:

body
{
font-family: sans-serif;
font-size: 10px;
margin: 0;
padding: 0;
background-color: #e5e5e5;
}

div.bigcontainer
{
font-size: 20px;
font-weight: bolder;
vertical-align: middle;
padding: 20px 20px 0px 0px;
text-align: right;
}

div.container
{
font-size: 12px;
font-weight: bolder;
vertical-align: middle;
padding: 10px 20px 5px 0px;
text-align: right;
}

#parent
{
margin: 0px;
padding: 0px;
position:relative;
}

#left_top
{
width: 35%;
height: 190px;
background-color: #7d7d7d;
float: left
}

#right_top
{
width: 65%;
height: 190px;
color: #ffcc00;
background-color: #666666;
float: right;
}

#left_mid
{
width: 35%;
height: 35px;
color: #ffff99;
background-color: #ffd426;
float: left;
}

#right_mid
{
width: 65%;
height: 35px;
color: #666666;
background-color: #ffcc00;
float: right;
}

#left_bottom
{
width: 35%;
height: 100%;
padding: 20px;
color: #999999;
text-align: right;
background-color: #e5e5e5;
float: left;
}

#right_bottom
{
width: 65%;
padding: 20px;
color: #666666;
text-align: right;
background-color: #ffffff;
float: right;
}

Problems With Nested Divs? Css Isnt Applied Properly

Similar Tutorials

View Content

I have nested divs and on the most outer div i apply a background-color but it is only applied to half of the divs?? it happens BOTH in firefox & IE!!

PHP Code:
<style type="text/css">
/**********   layout of the page        ***********/

#top {
    background-color:yellow;
    clear:both;
}

/*****************   Formatting top part of the page   **************/

#tag {
    float:left;
    margin-left:8em;
}
#login {
    float:right;
}
#logo {
    margin-left:2em;
    float:left;
    clear:left;
}
#searchBox {
    float:right;
    clear:right;
}
#links2 {
    clear:right;
    background-color:yellow;
}
#links2 li{
    font-size:0.8em;
    display:inline;
    float:right;
    text-decoration:none;
    list-style:none;
    padding:1em;
}
</style>
</head>
<body>
    <div id="top">
        <div id="tag">
            <p id="">Zahra Zahra Ltd</p>
        </div>
        <div id="login">
            <p>Login/Register</p>
        </div>
        <div id="logo">
            <a href="index.php"><img src="images/site/zahra.jpg" width="65" height="59" /></a>
        </div>
        <div id="searchBox">
               <form action="search.php" method="post" style="margin:0em; padding:0em;">
        <label>What are you shopping for?</label>
        <input type="text" name="search" value="search" size="14"/>
        <input type="submit" name="submit" value="Go" />
        </form>
        </div>
        <div id="links2">
            <ul>
                <li>Contact Us</li>
                <li>Testimonial</li>
                <li>Return Policy</li>
                <li>News</li>
                <li>FAQ</li>
                <li>about us</li>
                <li>Home</li>
            </ul>
        </div>
    </div>

Problems With Page Layout With Divs (how To Set Background Color Properly)

Similar Tutorials

View Content

Hey,
I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg

The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore.

Does anybody know how to fix this?

Thanks in advance.

Div Nesting

Similar Tutorials

View Content

hey!

I am having trouble putting a footer on a website because for some reason 2 of my divs are not sticking in the larger 'content' box. I think it has to do with the float definition but cant seem to figure it out.

Here is the basic structure i have. is this wrong?
Code:

<div wrapper>
       <div header>
                <div logo></div>
                <div menu></div> 
      </div>       
      <div content>
                 <div splash></div>
                 <div float left> </div>
                 <div float right></div>
      </div>
</div>

The issue is that <float left> and <float right> are not staying inside the <content> div and my footer ends up in the middle of the page. I wish i could post the webpage but im a new user.

Thanks for your help

Nesting (i Think) + Others

Similar Tutorials

View Content

Hey.

While I know some basics of css and html, I generally get bored after the design process lol, so have very little experience actual coding.

Basically this is what the end product im looking is forl

img266.imageshack.us/img266/8638/helpjj1.jpg

The only problem is, I have no idea how to nest (?) that in there, with the text in there as well.

I'm also looking for it to stay in the middle on the right there, with the box going larger or smaller.

Heh... I would appreciate it soooo much is someone could point me in the right direction. Thanks for your time

Tom

Doing It The Div Way - Nesting Question

Similar Tutorials

View Content

Hi all

I'm learning how to do things in DIVs rather than tables. One thing I'm slowly realising is that DIVs don't naturally nest like tables do.

Please see he http://www.mitya.co.uk/csstest

As you can see the master DIV (grey border) doesn't surround the inner DIVs naturally as a table would. Presumably this isn't the nature of DIVs and I just have to set heights instead?

Thanks in advance

Please... Div Nesting Revisited...

Similar Tutorials

View Content

hi!
please can some one help me with followin...
i would like to have 2 blocks in line (like one row, 2 colums). First one (left one) have background which is 285px wide. i tried with 2 divs like this:

<div style="display:inline; width:285px ; background-image: url(bg.gif);">left content</div>
<div style="text-align:right; display:inline; width:200px>right content</div>

and IE renders it ok (for me) but firefox ignores "width" of divs and outputs "right content" right after "left content" text.
thanks in advance!!

Tomislav

Nesting Css Styles

Similar Tutorials

View Content

Basically, what i'm trying to work out is if the following is possible.

Code:

.mainBodyColor {
background-color : #FFFFFF ;
color: #000000;
}

.mainBodyFont10pt {
font-size: 10pt;
<mainBodyColor>
}

.mainBodyFont14pt {
font-size: 14pt;
<mainBodyColor>
}

where <mainBodyColor> is a nested call to the style in some way.

etc etc etc

How do i go about nesting/including the mainBodyColor styling within the mainBodyFont10pt style?

I know that the following doesn't work

Code:

<font class="mainBodyFont10pt" class="mainBodyColor ">
Some text to go in here</font>

What I'm trying to do is have in one place the colour and include it into many styles, so if i want to change the colour scheme of the site i just have to change it in one spot and i know that the whole site will change.

Thanks in advance.

Nesting Floats - Haslayout

Similar Tutorials

View Content

Hey guys.

Does anyone know how to trigger haslayout when nesting floats inside other floats? I've been using a span parent with zoom:1 but there's probably a more robust way of doing so.

Any thoughts?

Rethreaded - Nesting Tables W/ Css

Similar Tutorials

View Content

Hi all - This is a continuted discussion from this thread. I won't bother re-explaining, but I'm restarting this thread in the hopes to simplify the situation.

I have to write out data from Coldfusion in columns rather than rows. This is a schedule with Time down the left side and Days across the top. In order to get this to display correctly, I'm using a nested tables method I found on goolge. Each Row is actually a Table within a table, where the nested table acts as a data cell, and the cells in the outer table are columns.

In all my fiddling, I've ended up stumped with the following. I need this to display correctly in at least IE 5.5 and up, Netscape 7, and Firefox.

A condensed version of the output is included below. Note that the tables do not end lined up. I need to be able to scale everything up or down and have it all line up (thus, everything is EMs).

I originally tried to work with css borders, but found that it was even worse with that - i.e. each top or bottom border was adding pixels to the height of the cells, so where one row would have five items, it would appear "shorter" than another row with 10 items.

I also tried using pixels throughout the script. I CAN get it to work when I do this, where everything lines up correctly, but I can't get it to scale!

I have since moved to using an image at the top of each data output. Its closer, but still doesn't line up. The image is nothing more than a 1 pixel high gif - Just like this one. As you move down, they get further and further out of sync of the left most column.

How can I get this working? I really don't understand CSS well enough, especially across browsers, in order to finish this. Again, here is the 1pixel high gif I used for the following code.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
TABLE {
	padding: 0em;
	font-size: .9em;
	width: 9em;
}
TABLE.time-header {
    table-layout: fixed;

}
TABLE.time {
    table-layout: fixed;
}
TABLE.data {
    table-layout: fixed;
}
TD {
	vertical-align: top;
}
DIV {
    overflow: hidden;
}
-->
</style>
</head>

<body>
<table cellpadding="0" cellspacing="0">
  <tr>
        <td> 
          <table class="time-header" style="border-top:1px solid black; border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
            <tr>
		      <td>
			    <div style="height: 1em;"> 
			    </div>
		      </td>
		    </tr>
          </table> 
        </td>

        <td> 
          <table class="time-header" style="border-top:1px solid black; border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
            <tr>
		      <td>
			    <div style="height: 1em;">Monday 6/27
			    </div>
		      </td>
		    </tr>
          </table> 
        </td>

        <td> 
          <table class="time-header" style="border-top:1px solid black; border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
            <tr>
		      <td>
			    <div style="height: 1em;">Tuesday 6/28
			    </div>
		      </td>
		    </tr>
          </table> 
        </td>
  </tr>

  <tr>
    <td> 

      <table class="time" style="border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
	    <tr><td>
			<div style="height: 2em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          09:00 AM
			</div>

			<div style="height: 2em; "></div>
          
			<div style="height: 2em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          09:30 AM
			</div>
        
			<div style="height: 2em; "></div>

			<div style="height: 2em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          10:00 AM
			</div>

			<div style="height: 2em; "></div>

			<div style="height: 2em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          10:30 AM
			</div>
			
			<div style="height: 2em; "></div>

			<div style="height: 2em; border-bottom: 1px solid black;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          End
			</div>
        
	    </td></tr>
      </table> 

    </td> 

    <td>
      <table class="data" style="border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
	    <tr><td>
			<div style="height: 8em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          1 hour
			</div>
			<div style="height: 2em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          15 min - topborder
			</div>
			<div style="height: 2em;">
		          15 min - notopborder
			</div>
			<div style="height: 4em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          30 minutes
			</div>
			<div style="height: 2em; border-bottom: 1px solid black;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          End
			</div>
	    </td></tr>
      </table> 
    </td> 

    <td>
      <table class="data" style="border-left:1px solid black; border-right:1px solid black;" cellpadding="0" cellspacing="0">
	    <tr><td>
			<div style="height: 4em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          30 minutes
			</div>
			<div style="height: 4em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          30 minutes
			</div>
			<div style="height: 4em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          30 minutes
			</div>
			<div style="height: 4em;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          30 minutes
			</div>
			<div style="height: 2em; border-bottom: 1px solid black;">
			  <div  style="height: .1em;">
			    <img src="table-horiz.gif"><br>
			  </div>
		          End
			</div>
	    </td></tr>
      </table> 
    </td>
  </tr>
</table>
</body>
</html>

Nesting Div Tags With Absolute Positioning In Css

Similar Tutorials

View Content

Okay, so here's the issue... I've designed a site using css, and to get the flow I was looking for I had to use "absolute positioning" on some of the page elements. Every thing looks fine except I can't get the page to center in the browser window. I created a div that I used as a wrapper, centered the wrapper... and most everything works fine... the exceptions are the elements that are absolutely positioned... they won't nest within my wrapper div. If I change the type of positioning of ALL the elements on the page to relative then they nest... but I don't want to have to use relative positioning for all my elements. Any words of wisdom?

Layout Problem (div Nesting Issue)

Similar Tutorials

View Content

Hi,

I'm trying to create a full CSS layout. It's basically a three column design:
http://www.definitedigital.com/bookfair/
http://www.definitedigital.com/bookfair/style.css

However, on Mozilla the blue border around the main content area with the Copyright disclaimer at the bottom of the page doesn't show correctly. On IE it shows just fine.

I'd be really thankful if someone could take a look at my CSS. I'm quite new at designing completely with CSS and don't really know if the approach I just took is the best for what I'm trying to achieve.

Thanks,
Ralph

Nesting 2 Columns Within An Existing 2 Column Template

Similar Tutorials

View Content

I am having problems trying to set up a 2 columns inside an existing 2 column layout. The reason why I am doing it that way is because the 2 col layout is part of a template and most pages will be 2 col, but for some there is actually 3 columns, so I need to split the mainColumn into 2 columns.

The problem is they are not showing up side by side. If I do display: inline; everything within the id displays that way and that is a problem.

So here is what I am trying to accomplish

Here is the css: Code:

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*customer support*/

#csupportWrapper {
	padding: 90px 20px auto 185px;
	text-align: left;
}

#csupportWrapper span {
	color: #000099;
	font-weight: bold;
}

#csupportWrapper .large {
	margins: 40px auto 20px auto;
}

#csupportWrapper ul {
	list-style: none;
	padding: 10px 0px 0px 10px;
	margin: 0px;
}

#csupportWrapper a:link, #csupportWrapper a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#csupportWrapper a:hover, #csupportWrapper a:active {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#column1 {
	padding: 40px 10px 0px 185px;
	clear: none;
}

#column2 {
	padding: 40px 0px 0px 382px;
	clear: none;
}

Thanks!

Here is the xhtml starting after the heading part (I can add it too if needed): Code:

	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="../products/spirometers.html">Spirometers</a></li>
		<li><a href="../products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="../products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="../products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="../products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
        <li><a href="customer_support.html">Customer Support</a></li>
	  <li><a href="training_services.html">Training & Services</a></li>
      <li><a href="exhibitions.html">Exhibitions</a></li>
      <li><a href="newsletters.html">Newsletters</a></li>
      <li><a href="downloads.html">Downloads</a></li>
      <li><a href="useful_links.html">Useful Links</a></li>
      <li><a href="industry_information.html">Industry Information</a></li>
	  <li><a href="industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
	
	  <div id="csupportWrapper">
	  
	  	<div id="column1">
		
			<span class="large">Customer Support</span>
			
				<ul>
				<li>Vitalograph Ltd</li>
				<li>Maids Morton, Buckingham</li>
				<li>MK18 1SW</li>
				<li>England</li>
				</ul>
			
				<ul>
				<li><span>Phone:</span> +44(0) 1280 827110</li>
				<li><span>Fax</span>: +44(0) 1280 823302</li>
				</ul>
				
				
          		<ul>
		  		<li><span>Email: </span> <a href="mailto:sales@vitalograph.co.uk">sales@vitalograph.co.uk </a></li>
		       	<li><a href="/enquiry_forms/customer_support_form.htm">On-Line Enquiry Form</a></li>
          		</ul>
			
		</div>
		
	  	<div id="column2">
			<span class="large">Technical Support</span>
			
				<ul>
				<li>Vitalograph Ltd</li>
				<li>Maids Morton, Buckingham</li>
				<li>MK18 1SW</li>
				<li>England</li>
				</ul>
			
				<ul>
				<li><span>Phone:</span> +44(0) 1280 827110</li>
				<li><span>Fax</span>: +44(0) 1280 823302</li>
				</ul>
				
				
          		<ul>
		  		<li><span>Email: </span> <a href="mailto:techsupport@vitalograph.co.uk">techsupport@vitalograph.co.uk </a></li>
		       	<li><a href="/enquiry_forms/technical_support_form.htm">On-Line Enquiry Form</a></li>
          		</ul>
		
		</div>
		
	  </div>
	
	<!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper-->

Help - Problem With Css When Nesting Absolute Positioned Elements In Mozilla

Similar Tutorials

View Content

Below is a simple test page that fails to load properly on the Mozilla browser. It appears to work properly in IE. Any suggestions to getting the span width to set properly, based upon the content of the span would be a great help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Span test</title>
<style TYPE="text/css">

.submenu {
background-color: #FFFFFF;
color: #D4BA6B;
border-top: 0px solid #000000;
border-left: 0px solid #000000;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
position: absolute;
margin: 0px;
padding: 0px;
min-width: 100px;
visibility: visible;
z-index: 1;
}

.submenuItem {
background-color: #FFFFFF;
color: #000000;
border-left: 2px solid #ff0000;
border-right: 2px solid #ff0000;
border-bottom: 2px solid #ff0000;
border-top: 2px solid #ff0000;
font-family: "arial narrow", arial, verdana, sans-serif;
font-weight: normal;
font-size: 12pt;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 5px;
padding-left: 5px;
position: absolute;
z-index: 1;
cursor: pointer;
cursor: hand;
}

</style>
<SCRIPT LANGUAGE="javascript">
function getWidth() {
oSpan = document.getElementById("testSpan");
iWidth1 = oSpan.offsetWidth;
alert ("Width1 = " + iWidth1);
}
</SCRIPT>
</head>
<body onload="getWidth()">
<div class="submenu">
<span class="submenuItem" id="testSpan">This is the item that I am testing today.</span>
</div>
</body>
</html>

Having Issues Getting Divs To Stretch Content And/or Container Divs

Similar Tutorials

View Content

Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right.

To simplify my problem, look at this example.
Code:

<html>
  <body>
    <div style="float:right">
      Hello there!
    </div>
    <hr>    
  </body> 
</html>

If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly.

It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so:

Code:

<html>
  <body>
    <div style="border: 1px solid #000; ">
      <div style="float:right">
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
      </div>
      <div style="clear: both"></div>
    </div>
    <hr>    
  </body> 
</html>

Am I missing something fundamental here? Is there a better solution? Thanks in advance.

Centering Divs Inside Other Divs In Firefox?

Similar Tutorials

View Content

Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF.

Divs Inside Floated Divs Makes Ie6 Something Something.

Similar Tutorials

View Content

Here's the site in Question: http://www.winchps.vic.edu.au

It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6.

Here's the CSS code for the basic layout:

Code:

body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}

#header {
width: 802px;
}

#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}

#content {
padding: 0px;
margin: 0px;
}

#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}

#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}

#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}

#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc).

Anyone got any ideas?