Decorative vertical line div centered between two floating divs?

HTML & CSS
1

I am trying to place a 1 pixel wide by 300 pixels high vertical line centered in between two divs floated left and right and a footer div clearing both, all within a wrapper (not displayed in code below).

This works fine when I use an HR and style it with CSS in every web browser but IE 6/7. I read somewhere that you can’t use HRs in this way with IE and the work around was to use a div. When I attempt to use a div to do this everything breaks down completely and my footer div merges with the vertLine div in between the floats.

When I change the #vertLine to a div from HR, thumbWrapper collapses and merges into the vertLine div in the center of the floats, effectively ignoring the clear.

I can’t figure out any solution that works in IE7 whatsoever, and the only thing that I can get working for the other browsers is the HR.

hALP@!!!

A snippet of the source HTML looks like this:


     <div class="carPicBig" id="carPicOne"> </div>
     <div class="carPicBig" id="carPicTwo"> </div>
     <div id="vertLine" /> <!-- changing this to 'hr' gives me the effect I need -->
     <div id="thumbWrapper"></div>

The CSS styling and positioning this stuff is as follows:


#mainContent #carPicOne {
	float: left;
}

#mainContent #vertLine {
	width: 0px;
	border: 1px solid #2A437F;
	height: 300px;
	position: absolute; /* I manually centered this since margin auto doesn't automatically place it */
	left: 435px;
}

#mainContent #carPicTwo {
	float: right;
	margin-bottom: 20px;
	
}

#mainContent #thumbWrapper {
	background: #DBE0EC;
	height: 140px;
	border: 1px solid #2A437F;
	clear: both;
}
2

You could float the vertline and place it between the columns, or set a min-height on the element which contains your floats but doesnt contain your footer ( regular height for IE 6 ) as #vertLine is out of the flow. You could also make it a background image and set it on the element containing the columns, e.g.,

background:url(foo.jpg) no-repeat 435px 0;

Though, more code and a demo would help.

3

I’ve already tried floating it left and that doesn’t work, it collapses as well. Going with the background image would for sure work but I’m pretty stubborn and want to get it working the harder way.

This causes same thing.

#mainContent #vertLine {
	width: 0px;
	border: 1px solid #2A437F;
	height: 300px;
	margin-left: 15px;
	float: left;
}

I’ll work on putting up a working demo of my problem now.

4

First one is the HR, 2nd one is the Div. I can’t post a proper link due to the site’s spam protection.

naomarik . com / siteDemoHR . html
naomarik . com / siteDemoDiv . html

5

You’re supposed to close the vertLine div.

<div id=“vertLine”></div>
<div id=“thumbWrapper”></div>

6

Wow thanks. For some reason I thought you could open and close any tag like br and hr in swoop. It now works for all browsers. I would have thought Dreamweaver would flag things like that as an error but it did not.

7

DW should have flagged the unclosed div element if you had checked, doesn’t do it automatically :slight_smile: Also if you had validated the code, that should also have shown up the unclosed div.

8

You’re right for br and hr, but not for divs.

One small semantic point: it would be better to use div rather than hr for a vertical rule (hr stands for horizontal rule). Using hr worked because you can self close hr, whereas for the div you needed a separate </div>

9