CSS Div + Span help

Arctic · #1 (**permalink**) 07-11-05, 04:18 AM

Hi, this must be so simple, but I just can't figure it out. Although, I did do this successfully in my breadcrumb navigation. Anyways, heres my code:

This is my html:

Code:

<div><span class="headline_left"><img src="left.gif" alt="" /></span><div class="headline" align="center">Headline text goes here</div><span class="headline_right"><img src="right.gif" alt="" /></span></div>

Heres the CSS:

Code:

.headline{
	margin: 0;
	padding: 0;
	width: 517px;
}
.headline_left{
	margin: 0;
	padding: 0;
	float:left;
	width: auto;
}
.headline_right{
	margin: 0;
	padding: 0;
	float:right;
	width: auto;
}

Some of the stuff might not be required, I was just trying a bunch of stuff to try and get it working.

I am just stumped, because I did this for my breadcrumb nav and it worked, but not for this, if you need to see all my CSS or HTML look at http://www.sloaner.net. Any help would be great, thanks.

Arctic · #2 (**permalink**) 07-18-05, 08:43 PM

Sorry, I also forgot to mention that I just need the right quotation mark to be aligned with the left one. For some reason it is down pretty far, I used a negative margin but I need a different solution so it looks the same on each browser, or at least very similar.

earthman · #3 (**permalink**) 07-20-05, 01:19 AM

Hard to tell whats going on without the images. What part of the site is this on?

nothingofvalue · #4 (**permalink**) 07-20-05, 02:19 AM

I am not good enough with css to offer a "css only" solution, but an easy fix that should display exactly as you want it in any browser would be the following:

<table width="517">
<tr>
<th scope="col"> 
<div class="headline_left">
<img src="left.gif" alt="" />
</div></th>
<th scope="col"> 
<div class="headline" align="center">
Headline text goes here
</div></th>
<th scope="col"> 
<div class="headline_right">
<img src="right.gif" alt="" />
</div></th>
</tr>
</table>

Arctic · #5 (**permalink**) 07-20-05, 02:49 AM

Thanks anyways, but I would like it to be complete CSS, because the rest of my site is all CSS (except for the header/nav).

nothingofvalue · #6 (**permalink**) 07-20-05, 05:27 PM

This should work, it did for me anyway an it is css only:

<style type="text/css">

</style>
</head>

<body>
<p>
<img src="image1.jpg" class="floatleft">
<img src="image2.jpg" class="floatright" >
</p>
<p>Some text here</p>