1. Home
  2. Forums Index
  3. Browser Side / CSS 9:22 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

help aligning divs cross browsers

         

smokeydj12

7:29 pm on Jun 4, 2009 (gmt 0)

10+ Year Member



In firefox and IE these divs display differently, as shown in the pictures [-links-] of FF and IE you will see the red square with f appears different in both browsers how can I make it the same?

IE :-
<snip>

FF :-
<snip>

HTML :-
<div class="wrapper">
<div class="l_sidebar">
<div class="l_block">
<h2 class="h2_block"><img src="images/menu.png"></h2>
menu<br>menu
<div class="l_block">
<h2 class="h2_block"><img src="images/cats.png"></h2>
<?=Showtest();?>
</div>
</div>
<div style="width:15px; background-color:red; float:left;">f</div>
<div class="conent">
<?=showconent();?>
</div>
<div class="r_sidebar">
<div class="r_block">
<h2 class="h2_block"><img src="images/top_stories.png"></h2>
<?=Showtext();?>
</div></div>

CSS :-
.l_sidebar{float:left; width:150px; margin-bottom:10px;}
.l_block{text-align:left; float:left; width:148px; margin-top:10px; background-color:#fff; border: 1px #adadad solid; padding-left:4px; padding-right:4px; padding-bottom:4px;}
.r_sidebar{float:right; width:188px; margin-top:10px; }
.r_block{text-align:left; background-color:#fff; border: 1px #adadad solid; margin-bottom:10px; padding-left:4px; padding-right:4px; padding-bottom:4px;}

.content{ margin-top:10px; margin-left:0px; margin-right:0px; width:430px; float:left; margin-top:10px;}

hope some one can help? thanks!

[edited by: swa66 at 8:17 pm (utc) on June 4, 2009]
[edit reason] No personal URLs please see forum charter and ToS [/edit]

SuzyUK

9:19 pm on Jun 4, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I would guess (untested) that you need to zero the default margins on the h2 - IE wrongly collapses margins when floats are involved, thus the alignment inside headings and paragraph looks a bit different

if that works and you still need some spacing try using padding on the l_block, r_block instead

smokeydj12

11:40 am on Jun 5, 2009 (gmt 0)

10+ Year Member



Hi the h2 is nothing to do with the div with the "f" in it all I was trying to do was get the "f" div to align the same so it has an equal space in-between each floating div, but even if I put a margin to sort it out on 1 browser it will make it wrong on the other?

SuzyUK

12:03 pm on Jun 5, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



OK I'm probably misunderstanding... Your code above is not clear and I thought you were talking about the vertical alignment :o. The H2 is affecting the vertical alignment in the guesstimate code I did, but are you saying you want the red "f" div centered in between the 2 x columns?

here's the code I'm using, I'm guessing where you wanted the left sidebar div closed, removed the wrapper div, and added some colors.. let us know if that's the right picture now..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
.l_sidebar{
float:left;
width:150px;
margin-bottom:10px;
background: #cfc;
}

.l_block{
text-align:left;
float:left;
width:148px;
margin-top:10px;
background-color:#ff0;
border: 1px #adadad solid;
padding-left:4px; padding-right:4px; padding-bottom:4px;
}

.r_sidebar{float:right; width:188px; margin-top:10px; }
.r_block{text-align:left; background-color:#fff; border: 1px #adadad solid; margin-bottom:10px; padding-left:4px; padding-right:4px; padding-bottom:4px;}

.content{ margin-top:10px; margin-left:0px; margin-right:0px; width:430px; float:left; margin-top:10px;}

/*h2 {margin: 0;}*/
</style>
</head>
<body>

<div class="l_sidebar">
<div class="l_block"><h2 class="h2_block">h2</h2>left block<br>menu
<div class="l_block">
<h2 class="h2_block">h2</h2>
<p>left block</p>
</div>
</div>
</div>

<div style="width:15px; background-color:red; float:left;">f</div>

<div class="content">
<p>some content</p>
</div>

<div class="r_sidebar">
<div class="r_block">
<h2 class="h2_block"><img src="images/top_stories.png"></h2>
<p>right block</p>
</div>
</div>

</body>
</html>

smokeydj12

12:51 pm on Jun 5, 2009 (gmt 0)

10+ Year Member



Hi Thanks for your reply, I have updated the code cop[y and paste this look at it in firefox and you will see that the "f" is floating over the left instead of next to the left div. 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
html, body, form {font:12px/17px Arial, Helvetica, sans-serif; background-color: #fff; color:#000; margin-right:auto; margin-left:auto;}
.wrapper{text-align:center; width:800px; margin-left: auto; margin-right: auto;}
.l_sidebar{
float:left;
width:150px;
margin-bottom:10px;
background: #cfc;
}
.l_block{
text-align:left;
float:left;
width:148px;
margin-top:10px;
background-color:#ff0;
border: 1px #adadad solid;
padding-left:4px; padding-right:4px; padding-bottom:4px;
}
.r_sidebar{float:right; width:188px; margin-top:10px; }
.r_block{text-align:left; background-color:#fff; border: 1px #adadad solid; margin-bottom:10px; padding-left:4px; padding-right:4px; padding-bottom:4px; background-color:green;}
.content{ margin-top:10px; margin-left:0px; margin-right:0px; width:430px; float:left; margin-top:10px; background-color:black; color:#FFF;}
/*h2 {margin: 0;}*/
</style>
</head>
<body>
<div class="wrapper">
<div class="l_sidebar">
<div class="l_block"><h2 class="h2_block">h2</h2>left block<br>menu
</div>
</div>
<div style="width:15px; background-color:red; float:left;">f</div>
<div class="content">
<p>some content</p>
</div>
<div class="r_sidebar">
<div class="r_block">
<h2 class="h2_block"><img src="images/top_stories.png"></h2>
<p>right block</p>
</div>
<div style="clear:both;"></div><br/>
</div>
</body>
</html>

SuzyUK

1:42 pm on Jun 5, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



sorry manners.. Welcome to WebmasterWorld smokeydj12!

It, the "f" block is next to the left sidebar, if you make the 

.l_block
have a top margin of 100px instead of the 10px that's on it now you will be able to 'see' that it is aligning perfectly with the left sidebar (light green color) both left side and top

all the other blocks do have default and explicit margins coming into play hence they all appear to be aligned a little lower, but the top of the left sidebar is the top.

the F block is 'overlapping' the left blocks because they are actually out of the flow (floated inside the left sidebar) and they are actually wider than the sidebar itself because of their padding and borders, you should see this once you move them down a bit. The "f" block does not know these internal (yellow) blocks exist so it is aligning with the light green sidebar edge.

smokeydj12

2:19 pm on Jun 5, 2009 (gmt 0)

10+ Year Member



ooo I see, so because of the padding I should make the l.bar and r.bar bigger to match sorry me being stupid.

Thanks a lot for your help!

SuzyUK

2:28 pm on Jun 5, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



YW, Yes making the sidebars bigger would do it, or making the blocks smaller (actual width of an element is width+padding+border)

..and a tip while developing, use background colors like we've been doing here, it helps "see" where the initial "frame" boundaries are

smokeydj12

2:36 pm on Jun 5, 2009 (gmt 0)

10+ Year Member



yes I do normally but I took those ones of because it was all in align until I made changes, and then I gave up.. lol

Thanks for your help! :-D

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 9:22 pm May 1, 2026