Firefox – Div aligning issues – one under another.

@riz-manMar 10.2008

Hi,

I’ve got several divs that are meant to be directly underneath the preceding div.

In IE, this looks fine but in Firefox, there’s a gap. As result, my design is getting screwed royally.

Is there a fix for this?

Thanks for your time.

Riz

to post a comment

CSS

15 Comments(s) _↴

@riz-manauthorMar 10.2008 — #I seem to have fixed the problem.

If I remove the tags in all the divs, the divs then fall directly underneath each other in Firefox. So instead of...

[code=html]<div class="level-1">Header</div>
 
 <div class="level-2">
 <p align=left>This is the title</p>
 <p align=left>This is the first paragraph.</p>
 <p align=left>This is the second paragraph.</p>
 </div>
 
 <div class="level-3">Footer</div>[/code]

I have to do this...

[code=html]<div class="level-1">Header</div>
 
 <div class="level-2">
 <div align=left>This is the title<br>
 <br>
 This is the first paragraph.<br>
 <br>
 This is the second paragraph.<br>
 </div>
 
 <div class="level-3">Footer</div>[/code]

Doing this then makes the div's (class=level-1 to 3) sit right on top of each other in FF.

Can someone please confirm if this is a common problem or am I not doing something right? ?

@ray326Mar 10.2008 — #You're not doing something right. Got link?

@riz-manauthorMar 10.2008 — #Sorry, no link but this is a sample code - as I said, it looks fine in IE but in firefox, there is a gap between each DIV. That gap is removed if I take away all the tags.

[code=html]<div class="level-right-box-holder"> 
 <div class="level-right-box-1">
 <p align="left"><img width="180" height="30" border="0" src="jpg/advert_title_downloads.jpg" alt="Downloads"></p>
 </div>
 <div class="level-right-box-2">
 <p align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('downloads_rules','','gif/downloads_rules2.gif',1)"><img name="downloads_rules" border="0" src="gif/downloads_rules.gif" width="54" alt="Download Rules"></a><br>
 <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('downloads_applications','','gif/downloads_applications2.gif',1)"><img name="downloads_applications" border="0" src="gif/downloads_applications.gif" width="127" height="31" alt="Download Applications"></a><br>
 <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('downloads_maps','','gif/downloads_maps2.gif',1)"><img name="downloads_maps" border="0" src="gif/downloads_maps.gif" width="60" alt="Download Maps"></a></p>
 </div>
 <div class="level-right-box-3">
 <p align="right"><img src="jpg/corner_white-on-red4.jpg" width="30" height="30" border="0" alt="This image is for design purposes. It carries no informational purpose."></p>
 </div>
 </div>[/code]

@drhowarddrfineMar 10.2008 — #I'd bet you are floating those. This is a typical IE bug.

@drhowarddrfineMar 10.2008 — #Is there any CSS involved?

@riz-manauthorMar 10.2008 — #drhowarddrfine - The problem is not with IE but Firefox. I'm not floating the coding you see above. Copy that into a page and save it - and see for yourself.

I am using CSS and here it is:-

[code=html].level-right-box-holder {
 left : 0px;
 top : 0px; 

 width: 180px;
 margin-left : 29px;
 margin-top : 0px;
 padding : 0px;
 z-index : 0; 

 }
 .level-right-box-1 {
 left : 0px;
 top : 0px; 

 width: 180px;
 margin-left : 0px;
 margin-top : 0px;
 padding : 0px;
 z-index : 0; 

 }
 .level-right-box-2 {
 left : 0px;
 top : 0px; 

 width: 180px;
 margin-left : 0px;
 margin-top : 0px;
 text-align: center; 

 padding : 0px;
 z-index : 0;
 background-color : #FFFFFF;
 }
 
 .level-right-box-3 {
 left : 0px;
 top : 0px; 

 width: 180px;
 margin-left : 0px;
 margin-top : 0px;
 text-align: right;
 padding : 0px;
 z-index : 0;
 background-color : #FFFFFF; 
 }[/code]

@cootheadMar 10.2008 — #Hi there riz-man,

you do not seem to know that certain elements have default margins, the [b]p element[/b] being one of them.

Also your CSS contains many meaningless rules.

Here is your code, tidied up somewhat....

[color=navy]
 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;style type="text/css"&gt;
 .level-right-box-holder {
 width:180px;
 margin-left:29px;
 }
 .level-right-box-holder p {
 margin:0;
 }
 .level-right-box-holder img {
 border:0;
 }
 .level-right-box-1 { 
 }
 .level-right-box-2 {
 background-color:#fff;
 text-align:center;
 }
 .level-right-box-3 {
 background-color:#fff;
 text-align:right;
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div class="level-right-box-holder"&gt;
 
 &lt;div class="level-right-box-1"&gt;
 &lt;p&gt;
 &lt;img width="180" height="30" src="jpg/advert_title_downloads.jpg" alt="Downloads"&gt;
 &lt;/p&gt;
 &lt;/div&gt;
 
 &lt;div class="level-right-box-2"&gt;
 &lt;p&gt;
 &lt;a href="#" 
 onmouseout="MM_swapImgRestore()" 
 onmouseover="MM_swapImage('downloads_rules','','gif/downloads_rules2.gif',1)"&gt;
 &lt;img name="downloads_rules" src="gif/downloads_rules.gif" width="54" alt="Download Rules"&gt;
 &lt;/a&gt;&lt;br&gt;
 &lt;a href="#" 
 onmouseout="MM_swapImgRestore()" 
 onmouseover="MM_swapImage('downloads_applications','','gif/downloads_applications2.gif',1)"&gt;
 &lt;img name="downloads_applications" src="gif/downloads_applications.gif" width="127" height="31" alt="Download Applications"&gt;
 &lt;/a&gt;&lt;br&gt;
 &lt;a href="#" 
 onmouseout="MM_swapImgRestore()" 
 onmouseover="MM_swapImage('downloads_maps','','gif/downloads_maps2.gif',1)"&gt;
 &lt;img name="downloads_maps" src="gif/downloads_maps.gif" width="60" alt="Download Maps"&gt;
 &lt;/a&gt;
 &lt;/p&gt;
 &lt;/div&gt;
 
 &lt;div class="level-right-box-3"&gt;
 &lt;p&gt;
 &lt;img src="jpg/corner_white-on-red4.jpg" width="30" height="30" alt="This image is for design purposes. It carries no informational purpose."&gt;
 &lt;/p&gt;
 &lt;/div&gt;
 
 &lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;
 [/color]

[i]coothead[/i]

p.s. Firefox rendered your code correctly. ?

@riz-manauthorMar 11.2008 — #coothead - you are the CSS master! ?

Who knew the element had default margins! Well, I do now.

Just to note, for anyone reading this who wasted a couple of days on this issue like me, I didn't need to set it for IE (I use version 6) but did need it for Firefox (I use version 2).

Anywayz, coothead, thanks for all the help! ?

@riz-manauthorMar 11.2008 — #Sorry to be such a pain but if I set the element as...

.level-content-holder p {

margin:0;

}

....this kills off the space between each paragraph as well. So instead of...

Paragraph 1

Paragraph 2

Paragraph 3

...I get...

Paragraph 1

Paragraph 2

Paragraph 3

Which doesn't look good.

If I specify a margin-top and margin-bottom, I will get a space above the first and last paragraph that creates the problem I had from the start. That is, a gap appears between the div in which the text is coded and the divs above and below it.

Anyone know how I can keep the space between paragraphs but kill the space above the top paragraph and below the bottom paragraph?

@cootheadMar 11.2008 — #Hi there riz-man,
[color=navy]

Anyone know how I can keep the space between paragraphs but kill the space above the top paragraph and below the bottom paragraph?

[/color][/quote]
Just add this rule to your stylesheet...

[color=navy]
 .level-right-box-2 p {
 margin:10px 0; [color=purple] /*change the 10px value to suit*/[/color]
 }[/color]

[i]coothead[/i]

@WebJoelMar 11.2008 — #Starting your CSS rules with:

* {margin:0; padding:0;}

solves a host of evils. Make this always be your very fist CSS rule.

It removes the default margin & padding, from EVERYTHING (TABLE, TD, form, DIV, h1-6 inclusive, p, img, etc etc.). [U]Compliant[/U] browsers do this anyway, it is IE that does not.

The beauty of this is that, -once stated, you will never need to state "margin:0;" or "padding:0;" again on the page, anywhere. ?

Also:

z-index : 0;

this is the default z-index. Stating it thus, is unnecessary. And without [I]also[/I] stating one of either "position:relative;" or "position:absolute;", it does nothing anyway. "z-index:[I]value[/I];" whereby [I]value [/I]is either "0" or any positive integer, requires a "position:" other than "static"..

the 'default [I]position[/I]' is "position:[B]static[/B];", which by it's very defualt nature, will always be "[B]z-index: 0 [/B]"

@riz-manauthorMar 11.2008 — #

* {margin:0; padding:0;} is a wonderful idea.

However, with regard to coothead's answer...

.level-right-box-2 p {

margin:10px 0; /*change the 10px value to suit*/

}

...it did not kill off the space above the first paragraph and below the last paragraph.

I'll try and explain exactly what I want.

The dashed line represents the top and bottom of the div.

Setting the to 0 does this...

---------------
paragraph 1

paragraph 2

paragraph 3
---------------

Is it possible to to do this...

---------------
paragraph 1

paragraph 2

paragraph 3
---------------

The code I was given...

.level-right-box-2 p {

margin:10px 0; /*change the 10px value to suit*/

}

...does this...

---------------

paragraph 1

paragraph 2

paragraph 3

---------------

The reason this is an issue to me is because there is a div right above and right below this div and using this code, creates a gap above and below that div. Setting the element to 0 kills this space but then it also kills the space between the paragraphs. Having each paragraph right under each other makes it hard to read.

I'm sorry, if I'm not making this clear.

Riz

@WebJoelMar 11.2008 — #level-right-box-2 p {

margin:10px 0; /*change the 10px value to suit*/

}

...it did not kill off the space above the first paragraph and below the last paragraph.[/QUOTE]

Try:margin:[B]0 10px;[/B][/QUOTE] THIS means "[B]zero[/B]" top & bottom, and "[B]10px[/B]" right & left.

That is the point of "[I]change the 10px value to suit[/I]"

For:
--------------

Text text text...

Text text text...

Text text text...
---------------

do this:

<div style="border:2px dashed solid; border-right:0 none; border-left:0 none;">

Text text text...

Text text text...

Text text text...

</div>

@riz-manauthorMar 11.2008 — #WebJoel - Super!!!! Thanks.

style ="margin-top:0;" and style="margin-bottom:0;" were the pieces of CSS coding I needed!

Thanks again!!!

Also, Coothead, thanks for all your earlier assistance!

I think my CSS element lesson is well and truly complete.

?

@WebJoelMar 12.2008 — #There are not too many things that CSS, properly applied, cannot solve. :p

Also in #CSS _↴

Simple class question...positioning image besides text Help! Firefox/IE Difference

Success!

Help @riz-man spread the word by sharing this article on Twitter...

Tweet This

Firefox – Div aligning issues – one under another.

15 Comments(s) _↴

paragraph 3
---------------

paragraph 3
---------------

For:
--------------

Text text text...
---------------

Also in #CSS _↴

Success!

Social

Version

Firefox – Div aligning issues – one under another.

15 Comments(s) ↴

paragraph 3 ---------------

paragraph 3 ---------------

For: --------------

Text text text... ---------------

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

paragraph 3
---------------

paragraph 3
---------------

For:
--------------

Text text text...
---------------

Also in #CSS _↴