Float alignment issue outside of IE

HTML & CSS
1

Hi, In firefox and chrome I cannot get my css to align right.

The site is http://www.barbourchiro.com/

The html code in question is -


    <div class="focus_block">
      <div class="block_left"></div>
      <div class="block_right"></div>
      <br clear="all" />
    </div>

Any help would be great as I am not strong in CSS and just got this from someone else.

My full css is -


/* CSS Document */

body{
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
margin:0px;
font-family: tahoma, Verdana, sans-serif;
font-size: small;}

.holder{
width:748px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
background-image:url(images/curve_mid.jpg);
background-repeat:repeat-y;
}

.header{
height:36px;
padding:5px;
padding-left:22px;
}

.navigation{
float:right;
font-size: 20px;
font-weight: normal;
letter-spacing: -1px;
color: #006699;
padding-right:22px;
padding-top:2px;
}

.block_left{
background-image:url(images/nav_block1.gif);
background-repeat:no-repeat;
float:left;
width:227px;
height:191px;
margin-left:22px;
}

*html .block_left{
background-image:url(images/nav_block.gif);
background-repeat:no-repeat;
float:left;
width:227px;
height:191px;
margin-left:10px;
}

.block_right{
	background-image:url(images/side_banner_bg.jpg);
	;
	background-repeat:no-repeat;
	float:right;
	width:437px;
	height:86px;
	margin-right:22px;
	font-size: 36px;
	padding-left: 10px;
	padding-top: 105px;
	color: #FFFFFF;
}

*html .block_right{
	background-image:url(images/side_banner_bg.jpg);
	;
	background-repeat:no-repeat;
	float:right;
	width:437px;
	height:86px;
	margin-right:10px;
	font-size: 36px;
	padding-left: 10px;
	padding-top: 105px;
	color: #FFFFFF;
}

.top_curve{
background-image:url(images/curve_top.jpg);
background-repeat:no-repeat;
height:16px;}

.left_shade1{
background-image:url(images/curve_left.jpg);
background-repeat:no-repeat;
width:5px;
float:left;
height:600px;
}

.center_content{
width:738px;
background-color:#FFFFFF;
float:left;
}

.right_shade1{
background-image:url(images/curve_right.jpg);
background-repeat:no-repeat;
width:5px;
float:left;
height:600px;
}

.left_content{
float:left;
width:227px;
margin-left:22px;
margin-top:10px;
}

*html .left_content{
float:left;
width:227px;
margin-left:10px;
margin-top:10px;
}

.right_content{
	margin-top:10px;
	float:right;
	width:437px;
	margin-right:22px;
	padding-left: 10px;
	border-left: solid 1px #F2F2F2;
}

*html .right_content{
	margin-top:10px;
	float:right;
	width:437px;
	margin-right:10px;
	padding-left: 10px;
	border-left: solid 1px #F2F2F2;
}

.bottom_curve{
height:17px;
background-image:url(images/curve_btm.jpg);
background-repeat:no-repeat;
background-position: center center;
clear:both;
}

.footer{
width:748px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:10px;
margin-bottom:25px;
}

h2 {
	margin: 0;
	color: #006699;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: -1px;
	padding-left:25px;
	background-image:url(images/bullet.gif);
	background-repeat:no-repeat;
	background-position: 5px 3px;
}

h2 a:link, h2 a:hover, h2 a:visited {
	color: #000;
	text-decoration: none;
}
	
h1 {
	font-size: 20px;
	font-weight: normal;
	letter-spacing: -1px;
	color: #006699;
	margin: 0;
}

h1 a:link, h1 a:visited, h1 a:hover {
	text-decoration: none;
	color: #003366;
}
	
h4 {
	margin: 0;
	color: #006699;
	font-size: 12px;
	padding-top:5px;
	padding-bottom:9px;
	background-image:url(images/dots-hr-4.gif);
	background-repeat:repeat-x;
}

h3 {
	margin: 0 0 8px 0;
	color: #999;
	font-size: 19px;
	font-weight: normal;
	letter-spacing: -1px;
	text-transform: uppercase;
}

h5 {
	margin: 0 0 8px 0;
	color: #999;
	font-size: 12px;
	font-weight: normal;
	text-transform: uppercase;
}

.hr{
	width: 100%;
	height:8px;
	background-image:url(images/dots-hr.gif);
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
	background-repeat: repeat-x;
	background-position:center;
}

a:link, a:visited {
	color: #006699;
	text-decoration: none;
	}
a:hover {
	text-decoration: underline;
	}


.nav{
color:#006699;
text-decoration:none;
padding-left:20px;
padding-right:5px;
background-image:url(images/nav_buddy.gif);
background-repeat:no-repeat;
background-position: 7px 9px;}

.nav:hover{
color:#003366;
text-decoration:none;
padding-left:20px;
padding-right:5px;
background-image:url(images/nav_buddy.gif);
background-repeat:no-repeat;
background-position: 7px -9px;}
2

mxfrail,
I don’t see the block_left in your markup. So I added it, and found that you seem to have a problem with the float in the logo type. If you take the inline style of float:left off the Logo type and change float:right to left in the block_right and the navigation, it seems to fix the issue for me getting both to align with eachother.

The fact that you are floating the logo left, is causing that block_left to sidle up next to the logo which is causing the two blocks to break up.

3

Hi, Block_left is there do you mean focus_block?

I also made your suggested changes on http://www.barbourchiro.com/marctest2.html but now the images are not showing up in any browser.

4

Sorry I found the block_left missing.

With all your proposed changes it does not look right in IE, Chrome, or Firefox.

http://www.barbourchiro.com/index2.html

The div navigation seems to get pulled in with the second image. So the navigation section is too low and the image below it is not centered to the right. I want to try to get it to look like it currently looks in IE on http://www.barbourchiro.com/index.html

5

To fix index.html just add these styles:


.header img{float:left;}
.header div{width:220px}
.header .navigation{width:440px}

You have made the classic mistake of floating multiple elements left and right which means that floats will snag if there is something in the way and the floats won’t be level either. Your layout is a well defined 2 column layout so just make two floated columns of appropriate width and then stack all the left side elements inside one float and all the right side elements in the other float. No need for multiple floats at all.

Your navigation should be a list structure to be semantically correct also.

You have gone straight from an h1 to an h4! What happened to h2 and h3? If there are no h2 and h3 then there can’t be an h4. Don’t use elements for what they look like but use them for what they stand for.

Also avoid the depecated “align attributes” and use css instead.

6

Yes, but if he does that, then he loses more control of his navigation positioning doesn’t he? For example, what if he expands the width of his site in the future, but he wants the navigation to sit just to the right of the logo, even after having expanded column widths?

I’m thinking, just take the navigation markup out of and place below the header header markup, put the nav in a list of course, then float the header left so the nav bumps up to the right of the logo, then clear the floats in the images below. That way the distance between the navigation and the logo is not forced by the width of the columns and he can always control that. Then for the centering of the right hand image, just add some margin left to block_right.

7

Yes it does depend a bit on the dynamics of what’s required. I was assuming the nav would always be centred above the right column so it wouldn’t really matter but there might be a case for separating the top line anyway so that you get the h1 followed by the nav and then start the two main columns underneath. As long as the top two items are contained in a parent that contains the floats then the other two columns can start neatly underneath.

It all depends on what comes next:) The point I was making was that multiple left and right floats never work as you expect and they either snag or they won’t make two columns unless all items are exactly the same height.

8

Yeah I’ve made that float left/right mistake too, many times. (: