Nested DIVs with floats 1

[d0nny]

This has probably been answered so many times on this forum, but I'm having problems with my nested divs.

If you can see the attached image, I want to have a container that I repeat on the page, which has 3 DIVs within it...
A header div,
and then two floated divs

My issue is that I can't get the main container div to expand to the full height to 'contain' the nested divs, and then I can't repeat the whole process.

Any help appreciated.

 

[johnwm]

Try floating your main containers. It would be easier to help you if we had some code from you!

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[vacunita]

Without code its hard to say, but with floats you need to clear them at the end. The easiest way is to add a <p> tag and give it a clear:both; in ts style.






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[d0nny]

OK, this his what I've been playing with:

CSS

#teacherContainer {
	width: 610px;
}
#teacherHeader {
	position: absolute;
	width: 610px;
}
#photoTeacher {
	position: relative;
	width: 160px;
	float: left;
	min-height: 200px;
	text-align: left;
	padding-top: 15px;
	padding-left: 20px;
}
#textTeacher {
	position: relative;
	width: 396px;
	float: left;
	min-height: 300px;
	text-align: left;
	padding-top: 15px;
	padding-left: 30px;
}

And here's my HTML:

<div id="teacherContainer">
	<div id="teacherHeader">
		Teacher Title
	</div>
	<div id="photoTeacher">
		<img src="teacherImage.jpg" alt="teacher" width="130" height="167" border="0">
		<br/>
		Teacher Name
	</div>
	<div id="textTeacher">
		Teacher Bio
	</div>
</div>

 

[vacunita]

Any reason you are positioning them explicitly?

Unless you have to use it, in which case they should be used with top, and left properties to actually specify a position, position:relative and absolute should not be used at all as they just cause problems.


Anyway, back to your problem just add a <p> with the clear style at then end:

<div id="textTeacher">
        Teacher Bio
    </div>
<p style="clear:both;">
</div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[d0nny]

Nice!
That did the trick!