Divs in Divs - FF 1

audiopro · Jun 8, 2007

I have a file download page which I am trying to format.
For each file, I have a picture and some text, each with a link.
I have a main container and the pic is in its own div inside the container. The text is also in a div in the container.
No floats and the divs all line up underneath each other, as expected.
I float the pic div left and float the text div left and in IE6, they line up properly - job sorted.
I test it in FF and the divs are all over the place.
What am I doing wrong?

Keith

http://www.studiosoft.co.uk

feherke · Jun 8, 2007

Hi

While you did not provided anything to see/debug/analyze/etcetera, I suggest to read thread215-1371909, maybe you have the same problem.

Feherke.

http://rootshell.be/~feherke/

BillyRayPreachersSon · Jun 8, 2007

Give each outer div a style of "clear:both"... or use the "clearfix" trick at Position Is Everything.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

audiopro · Jun 8, 2007

I am feeling numb here.
I am sure this should be simple but I cannot get my head round it.
Add this code to the stylesheet

Code:

.clearfix{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

I can do that bit ok.
The next part:-

Code:

For the HTML, just add a class of .clearfix to any element containing a float needing to be cleared, plus any Guillotine-Bug-fixing block elements within the container.

If I have a class

Code:

.pagcont{
width:20px;
float:left;
etc.etc.
}

How do I add the clearfix to that class whilst keeping the original class working?

Keith

http://www.studiosoft.co.uk

BillyRayPreachersSon · Jun 8, 2007

Code:

<div class="pagcont clearfix">

Assuming the "pagcont" div is that around each image/text pair.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

audiopro · Jun 10, 2007

This is getting worse for me.
I solved the original proble by giving the containers a height attribute - had to sort it as it went beta on Friday, the suits wanted to see it working and they use FF.

I would still like to get this soulution in my tool box as I produce quite a few containers dynamically so cannot predict the actual height.
I have reduced the code to a minimum in order to see what is going on.
A div within a div, which drops out of the container.
Adding the clearfix results in a blank screen - the source is there but no secreen display.

Code:

.clearfix {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;

}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

.test{
width:300px;
}

.pagcont{
	width:990px;
	font-size:12px;
	font-family: Verdana, sans-serif;
	text-decoration: none;
	font-weight:normal;
	color: #00080;	
	text-align: center;
	background-color:#F0F0F0;
}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="mystyle.css">

<title>thatworksite</title>
</head>
<body>
<div class='pagcont clearfix'>
<div class='test'>
some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>
</div>
</div>

Keith

http://www.studiosoft.co.uk

BillyRayPreachersSon · Jun 10, 2007

That's because you're not using the correct clearfix code. You've somehow removed the ":after" pseudo-class, which effectlvly means you're hiding anything with that class.

Here's what you should be using:

Code:

.clearfix:after {
	clear: both;
	display: block;
	content: ".";
	height: 0px;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
li.clearfix {
	display: list-item;
}
/* End hide from IE-mac */

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

audiopro · Jun 10, 2007

Thanks Dan - I will have a go tomorrow with that but I am sure I read somewhere that IE6 does not support 'after'.
I have got to grips with the formatting side of CSS and wonder how I ever managed without it. Some of the positioning stuff doesn't make sense to me, particularly the behaviour of divs in some circumstances.
I would have thought that if I had a container and filled it with left floated divs, of different sizes, that each one would lie along side the previous one unless it could not fit into the remaining width of the container.
I would also expect the container to stretch vertically to contain the divs. If they can overlap at the bottom then, to me, the container is not a container but a locator.
Most of the pages I create are dynamic so it is not until I start entering large amounts of content into the boxes, that these problems show.

Keith

http://www.studiosoft.co.uk

ca8msm · Jun 11, 2007

I would also expect the container to stretch vertically to contain the divs. If they can overlap at the bottom then, to me, the container is not a container but a locator.

That's because floated elements do not contribute to the height of their container. You will obviously not see this behaviour if you use the clearfix method or if you have an element in the container that isn't floated.

____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.

BillyRayPreachersSon · Jun 11, 2007

IE 6 might not support after - that's what the "* html" hack is for.

Trust me - the code I posted works (I use it on a lot of sites).

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

audiopro · Jun 11, 2007

I trust you Dan - I have seen enough answers from you which solve problems to show that you know your stuff and I am grateful that you and the other knowledgeable people on this forum who take the time to help numb nutted individuals such as myself.
I have learned a lot more from other people's practical problems and solutions on TT than reading any amount of tutorials.
I am still thinking in terms of tables rather than free floating elements and it is hard to shake off methods which I have been using for a couple of hundred years.

Keith

http://www.studiosoft.co.uk

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Divs in Divs - FF 1

audiopro

Programmer

feherke

Programmer

BillyRayPreachersSon

Programmer

audiopro

Programmer

BillyRayPreachersSon

Programmer

audiopro

Programmer

BillyRayPreachersSon

Programmer

audiopro

Programmer

ca8msm

Programmer

BillyRayPreachersSon

Programmer

audiopro

Programmer

Similar threads

Part and Inventory Search

Sponsor