Strange One Here Regarding float:left

[e1seix]

here's a watered down version of my code

 

echo '<div>This text does not stretch for 490 pixels</div>';
echo '<div id="block" style="width:490px">';
echo '<div id="left" style="float:left;width:60px">LEFT</div>';
echo '<div id="middle" style="float:left;width:370px">MIDDLE</div>';
echo '<div id="right" style="float:left;width:60px">RIGHT</div>'; }
echo '</div>';

 

now correct me if i'm wrong but the point of me having the "block" div up there is because what comes before this piece of code is text that does not stretch the whole 490px across the screen and therefore the LEFT appears alongside the text to the right, in Firefox. the "block" hence ensures that unless there is a spare 490px to the right of the text, everything within the "block" div automatically defaults to the next line. is that not right?

 

the "block" div seems to be having no effect whatsoever... help!

[obsidian]

In your example, your first div has no width at all assigned to it. Unless it is picking up styles from somewhere else, it should stretch the entire width of the screen (this is DIV behavior by default). If having the "block" div is simply to assure that the LEFT, RIGHT and MIDDLE divs get dropped down beneath the first div, you may need to put a clear: both on it to be sure that it is clearing any previous styles. It would be much easier to help debug if you have a link or can post the generated markup (this also assures you are getting the expected result).

[e1seix]

apologies, the first div SHOULD have had width assigned to it. to try and explain, the point of this code is to signify a PREVIOUS page button (left), a generic caption (middle) and a NEXT page button (right).

 

the div before that contains text in fact contains the results of an sql search resulting in displaying various product items (5 per row) that stretch 98px each, before defaulting to the next row.

 

all of this means i can't write the code as it's just too long-winded and not important. i can however give you the following links to show you how it is displaying in Firefox vs. IE. it might help you.

 

http://malegroomingfordummies.co.uk/shop/byBrand.php?brandID=204&startrow=125

http://malegroomingfordummies.co.uk/shop/byBrand.php?brandID=115&startrow=0

 

and how it should be:

 

http://malegroomingfordummies.co.uk/shop/byBrand.php?brandID=204&startrow=100

 

where the prev and next aren't relevant you'll see i've set the background to red to make it viewable etc.

 

i do appreciate the help

[e1seix]

oh yeah, here's the css too

#caption {
        background-color:#ffffff;
        float:left;
        font-family:arial;
        font-size:12px;
        font-weight:bold;
        height:25px;
        margin-bottom:5px;
        margin-top:5px;
text-align:center;
width:370px; }

#item {
background-color:#c0c0c0;
float:left;
height:274px;
margin-bottom:5px;
width:94px }

#next {
        background-color:#ffffff;
        float:left;
        height:25px;
        margin-bottom:5px;
        margin-top:5px;
text-align:right;
width:60px; }

#next a img {
        border:none; }

#prev {
        background-color:#ffffff;
        float:left;
        height:25px;
        margin-bottom:5px;
        margin-top:5px;
text-align:left;
width:60px; }

#prev a img {
        border:none; }

#small_price {
background-color:#c0c0c0;
color:#ff0000;
font-family:arial;
font-size:12px;
font-weight:bold;
margin-left:2px;
text-align:center;
width:90px; }

#small_retail {
background-color:#c0c0c0;
color:#ffffff;
font-family:verdana;
font-size:10px;
font-weight:bold;
margin-left:2px;
text-align:center;
width:90px; }

#small_saving {
background-color:#c0c0c0;
color:#ffffff;
font-family:verdana;
font-size:10px;
font-weight:bold;
margin-left:2px;
text-align:center;
width:90px; }

#small_title {
background-color:#ffffff;
color:#000000;
font-family:verdana;
font-size:10px;
font-weight:normal;
height:126px;
margin-left:2px;
text-align:center;
text-decoration:none;
width:90px; }

#small_title a {
background-color:#ffffff;
color:#000000;
font-family:verdana;
font-size:10px;
font-weight:normal;
height:126px;
margin-left:2px;
text-align:center;
text-decoration:none; }

#small_title a:hover {
background-color:#ffffff;
color:#ff0000;
font-family:verdana;
font-size:10px;
font-weight:normal;
height:126px;
margin-left:2px;
text-align:center; }

#thumb {
background-color:#ffffff;
margin-left:2px;
margin-top:2px; }

#thumb a img {
border:none; }

[TheFilmGod]

add a this:

 

<div style="clear: both; height: 0;"></div> after <div id="right"></div>

 

I think that you are overusing the divs. You shouldn't place text without a proper text block tag like <p> or <h1>. I suggest taking out the first div completely and replacing it with <p>. This is semantics, one of the main rules.