php/css

[jonniejoejonson]

okay this is going to be complicated to explain, and poss not the right forum, but cant find a suitable one that anyone responds to, so if you can help please do...

 

The following code should create a

-centralised pink box with 2 white boxes nested within it,

however in firefox the div class 'centralize_400', gets all its attributes lost, becuase it has divs within it that have float:left;

however i need the divs within the 'centralize_400' to float left, but i also need the div 'centralize_400' to retain all its attributes...

 

 

print'<style type="text/css">

 

.container_100P{

float:left;

width: 100%;

background-color:#FFFF00;}

 

.centralize_400{

margin-left:auto;

margin-right:auto;

width:400px;

border-left:10px solid #CCC;

border-right:10px solid #CCC;

background-color:#FF00FF;}

 

.container{

float:left;

width: 100px;

background-color:#FFF;}

 

</style>';

 

 

print '<div class="container_100P">';

print '<div class="centralize_400">';

 

print '<div class="container">';

print 'hello';

print '</div class="container">';

 

print '<div class="container">';

print 'hello 2';

print '</div class="container">';

 

print '</div class="centralize_400">';

print '</div class="container_100P">';

 

 

i know this isnt the right place and is kind of impossible to understand what i am getting at but if you can help please do... regards J

[webmaster1]

Howdy,

 

Firstly post your code in code blocks.

 

Secondly it would be helpful to post a mock-up of a corrosponding html file that picks up on the styling (again in code blocks).

 

That way we could copy and paste the two pages and try it for ourselves rather than speculating.

 

Thirdly just ignore point one and two because this unfortunatley isn't the right spot for styling. If the CSS is directly affecting your PHP process and not just your page layout then maybe.

 

Type the following into google: CSS Help Forum or CSS Firefox Conflicts or  CSS Cross Browser Firefox or CSS Cross Browser.

 

Good luck matey! Seems like a headscratcher... 

 

NUTS! This was obviously moved when I was posting. Stick to points one and two matey!

[jonniejoejonson]

Cheers buddy... i swear i looked three times for a css forum on this site, but didn't see it... no wonder im struggling with my problem!...

the actual problem only occuirs on firefox... i want a

-div class to be centralized with bg-color and more... therefore it does not have float but auto margin.

-but i want it to nest div tags that have float left.

- i cant get this to work unless i put a height on the centralized div, however i want it to have the height of the nested divs...

...sorry i know this is hard to understand.

regards J.

[atl_andy]

If I read your post correctly, you wanted centralize_400 to retain it's attributes.  It did but you didn't have the height set to see it.

 

Hope this helps.

 

(The borders were added for positioning aids.  You can remove when everything is set up the way you like.)

 

<style type="text/css">

.container_100P{
float:left;
width: 100%;
background-color:#FFFF00;
border:thin solid black; }

.centralize_400{
margin-left:auto;
margin-right:auto;
width:400px;
height:100px;
border-left:10px solid #CCC;
border-right:10px solid #CCC;
background-color:#FF00FF;
border:thin solid black; }

.container{
float:left;
width: 100px;
height:100px;
background-color:#FFF;
border:thin solid black;}

</style>

<?php
echo '<div class="container_100P">';
echo	'<div class="centralize_400">';

echo		'<div class="container">';
echo			'hello';
echo 		'</div>';

echo		'<div class="container">';
echo			'hello 2';
echo		'</div>';

echo	'</div>';
echo '</div>';
?>

[jonniejoejonson]

Thanks for the response, however the problem is that i don't want to set the height, becuase I want it to have the height of whatever is netsed inside it. However without the height as you pointed out it doesn't have most of its attributes.... there must be a way to say that a div without float inherits the height of whatever is nested inside it... i.e. does it automatically but firefox...doesn't.