Nesting and floating div problem

deanlee17
deanlee17 used Ask the Experts™
on
Hi experts,

I am trying to nest some divs but its not working too well in firefox. I have a content container, which I centre with:
#content {
    border: 2px solid #000000;
    height: 100%;
    margin: 0 auto;
    position: relative;
    width: 850px;
}

I then have a container inside this called inner content with:

#innercontent{
      margin:0 auto;
      width:850px;      
      position:relative;
      height:100%;
      border:solid 2px #000000; }

Then finally a container with....

#left{
      float:left;
      width:250px;
      position:relative;
}

In firefox you can see that inner content is not within content and also why is the text running outside of the left container?I want to be able to float container left but obv have them incased within an auto centred main div

Many Thanks
Deano

p.s I know that if i float the content div left then the others fall inside it, but I want the site auto centered.

URL: http://www.deans-place.co.uk/activus/test.html

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Firefox is very literal with CSS specifications.  In your case, you are calling a containing div (#content) with a fixed width of 850px.  Inside that you are making a div that is 854px wide (850px wide plus the 2px border on each side).  With positions set to realtive, this inner div is not going to appear inside the containing div.

I don't know where you put the #left container so I really can't explain why text is running out of it.  The only thing I would say is that you shouldn't mix float and position: relative together like that.

Author

Commented:
Hear is how layout...

<div id="content">
 <div id="innercontent">
  <div id="left">
   <div class="intro">
      
       ddddddddddddddddddddddddddddddddddddd

      </div> <!-- End Intro-->
      </div> <!-- Left -->
       </div> <!-- End Inner Content -->
      </div> <!-- End Content -->

Author

Commented:
Sorry, my mistake, innercontainer does not have a fixed size...

#innercontent{
      float:left;
}      
Announcing the Winners!

The results are in for the 15th Annual Expert Awards! Congratulations to the winners, and thank you to everyone who participated in the nominations. We are so grateful for the valuable contributions experts make on a daily basis. Click to read more about this year’s recipients!

What is the CSS on the div with class intro?

Author

Commented:
.intro{
      width:250px;
      padding:20px 20px 20px 20px;
      background:#eee;
}
Again, you have the same problem.  #left has a width of 250px while the container inside (.intro) is 290px (250px width 20px padding on both sides).

Author

Commented:
Ah well spotted there. But tht wasnt the problem earlier as innercontainer does not have a width, see my post ID: 36331910

Thanks
You need to check your CSS thoroughly.  If you have Firefox, I recommend you obtain the Firebug plugin.  There you can inspect your elements and Firebug will give you a list of every CSS style that is affecting it.

I cannot see, from the code you gave me, any more problems other than what I mentioned.  If you have fixed those and are still experiencing problems, its because you have some other style definitions that are affecting them.

Author

Commented:
Ok ive simplified it now, see below....


<body>

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

<div id="menubar">	
 <div class="menu">
  <div id="test">
		<ul>
			<li><a href="#" >Home</a></li>
			<li><a href="#" id="current">About us</a>
				<ul>
					<li><a href="#">Our People</a></li>
			   </ul>
		  </li>
			<li><a href="/faq.php">Training</a>
             <ul>
                <li><a href="#">IOHS Training</a></li>
                <li><a href="#">Bespoke Training</a></li>
                <li><a href="#">First Aid</a></li>
             </ul>
          
			<li><a href="/contact/contact.php">Consultancy</a>
						 <ul>
                <li><a href="#">Health and Safety</a></li>
                <li><a href="#">Fire Safety</a></li>
						 </ul>
						 </li>
			<li><a href="/contact/contact.php">Clients</a></li>
			<li><a href="/contact/contact.php">Links</a></li>
			<li><a href="/contact/contact.php">Contact Us</a></li>
		</ul>
	</div>
	</div> <!-- End Test -->
 </div> <!-- End Menu Bar -->

<div id="subheader">
		</div>

 <div id="content">
 <div id="innercontent">
  <div id="left">
   <div class="intro">
	 
	 dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

		</div> <!-- End Intro-->
	  </div> <!-- Left -->
	 </div> <!-- End Inner Content -->
	</div> <!-- End Content -->
</div> <!-- End Wrapper -->
   
</body>



-------------CSS-------------------

#menubar
{ width: 100;
  height: 35px;
	background:#333;
} 

#test{
margin:0 auto;
width:750px;
}


#site_content
{ width: 875px;
  overflow: hidden;
  margin: 0 auto 0 auto;
  padding: 25px 0;} 

	
#wrapper{
  width: 100%;
  text-align:left;
}

#header{

	height:150px;
	background:#333;
	width:100%;
	border-bottom:2px solid #D4A62C;
	/*margin-bottom:30px;*/
}	


#subheader{
	height:10px;
	background:#333;
	width:100%;
	border-top:2px solid #D4A62C;
	
}	

#content{
	margin:0 auto;
	width:850px;	
	position:relative;
	height:100%;
	border:solid 2px #000000;
}

#innercontent{
	float:left;
}	

#left{
	float:left;
	width:250px;
}


.intro{
	width:250px;
	padding:20px 20px 20px 20px;
	background:#eee;
}

	
	.menu{
	border:none;
	border:0px;
	margin:0;
	padding:0px;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	}
	



.menu ul{
	background:#333333;
	height:35px;
	list-style:none;
	margin:0 auto;
	padding:0;
	}
	.menu li{
		float:left; 
		padding:0px;
		list-style-type: none;

		}
	.menu li a{
		background:#333333;/* url("images/seperator.gif") bottom right no-repeat; */
		color:#cccccc;
		display:block;
		font-weight:normal;
		line-height:35px;
		margin:0px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background: #2580a2 url("images/hover.gif") bottom center no-repeat;
			color:#FFFFFF;
			text-decoration:none;
			}
	.menu li ul{
		background:#333333;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:225px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {
		/* background:url('images/sub_sep.gif') bottom left no-repeat; */
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:225px;
		}
	.menu li:hover li a{
		background:none;
		
		}
	.menu li ul a{
		display:block;
		height:35px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
			border:0px;
			color:#ffffff;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}

Open in new window

Your CSS is still showing that the intro class is bigger than the #left containing div.

Author

Commented:
I added the intro class to try and sort the problem, im honesty I just want the #left  to work correctly. So ive removed the intro.

Any ideas?
Long, unbroken strings of letters will always push against the div.  For normal words, this generally isn't a problem because the words will wrap at a white space.  The only thing I can suggest is to programmically break the word at certain lengths so that it fits in the div.

The only other possible solution might be to use word-wrap: break-word, but this is not cross-browser friendly.

Author

Commented:
Excellent point. Ok thats now sitting within the left div. I just need the left div to be within the inner content. So we currently have...

<div id="content">
<div id="innercontent">
 <div id="left">
 
      hello hello hello hello hello hello hello
            
</div> <!-- Left -->
</div> <!-- End Inner Content -->
</div> <!-- End Content -->


---------------------CSS-----------------------

#content{
margin:0 auto;
width:850px;      
position:relative;
height:100%;
border:solid 2px #000000;
}

#innercontent{
float:left;
}      

#left{
float:left;
width:250px;
}

http://www.deans-place.co.uk/activus/test.html

Thanks for the help so far.
The #left div is inside the #innercontent div.  What are you trying to say?  Do you want #innercontent to be centered?

Author

Commented:
No, I want the left div to sit inside the innercontent and content divs. When you look at it visually the content (with the border) is not expanding to encase the 'hello' text.

The content measures 850px, the hello text measures 250px.  Am I missing something here?
Oh, I'm sorry, you are referring to the height.  Set #content to overflow: hidden.

Author

Commented:
Ah!! Thats perfect! Any idea why overflow: hidden was required?

Ive never needed this before.
The behavior that you saw (the content set at 0 height) is normal behavior according to the W3C.  In order to modify that behavior you need to change the properties of the div.  There are several methods, but for me, overflow: hidden is a simple solution.

Author

Commented:
Lovely. Thanks for your help and patients :)
No problem.  Glad to assist.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial