View Full Version : CSS div/span

02-26-2005, 07:19 PM
I'm in the proccess of making a site which will dynamicly post art, with the news poster "cutenews"

This is how I want to post the news:

<span id="art">
<h1>February 23, 2005</h1>
<img src="../art/draw/test.jpg" width="50px" height="50px">
<p>0 Comments</p>

And the css file is:

#art {
position: relative;
margin: 10px;
padding: 5px;
height: 50%;
width: 50%;
border: 1px solid #000000;
background-color: #ffffff;
text-align: center;

#art p {
font-size: 12px;
margin: 0;
padding: 0;

#art img {
border: none;

#art h1 {
font-size: 15px;
margin: 0;
padding: 0;

#art a {
color: #000000;


I originally did this with div tags and not spans (there is one large div covering all of these new spans) but they would align verticaly, and not horizontally. So I tried to put in "float: left;" under #art. this "solved" the problem of alignment but made the div tag incasing the previous div tags, truncate at about 20 pixels from the top.

Trying with the spans, with firefox, the content of the span gets pushed to the center of the outlaying div tag, and the span itself stays at the left, with a small width and hieght of about 10x20px. In IE the span shows as normal, except the width gets cut down to eliminate space waste.

I just want this to work in Firefox withought the outlaying div tag being truncated (remember these spans will be dynamicly posted, so it would be best to have the height set dynamicly as well), if it looks like fodder in IE I could care less right now

02-26-2005, 07:46 PM
If you're using multiple spans, you'll need to change the id="art" to class="art" and all #art should be .art in your CSS. IDs are for elements that appear once in the document, and classes are for elements that appear multiple times in the document.

02-26-2005, 07:59 PM
No go. same problem.

I tried changing the text-align: center; in the css file, rather completely removing it, and in the php file using the <center> tag on the inside of the span, since the contents were being pushed outside, but still no luck.

Removing the <center> tags after that, put the contents of the span inbetween two of those smaller spans with the .art class properties. One above, one below. Again, same problem, now its all left aligned though.

IE still shows it the way I intend, though.

(P.S.: in the css document, it says height/width=50% just to prove to myself that IE parses the size of the span while FF does not. Which is true, IE shows the span very large)

Puffin the Erb
02-26-2005, 09:23 PM
Firefox is doing what it should do - <span> is an inline tag, not a block tag like <div>
You can use CSS to make the <span> behave like a block:

span {display:block;}

You probably just want that to apply to these spans so just make a class.
Bear in mind non-styling browsers.

02-26-2005, 09:30 PM
Not sure I understand fully but are you trying to make a line of images run horizontally? If so, what about trying a <ul><li></li></ul> and tell it to display inline?


02-26-2005, 09:31 PM
Yeah, span is a problem too. Is this what you're going for? http://offtone.com/art.html

02-26-2005, 10:02 PM
Thats exactly what im trying to do.

So lets see if I understand correctly from your coding.
Use <div> tags instead of span tags, with a class instead of an ID?

This will make it line horizontally?

02-26-2005, 10:42 PM
Not quite. I've floated each item to the left, and given the body itself a width of 400px. You can emulate this with any container (wrap it all in a div and give it a width).

Then .art's margin is 10px and padding 5px. There is a 1px border. The width for .art is calculated by:

// Assume container_width is 400
width = (container_width / 2) - (margin * 2 + padding * 2 + border * 2)
= (400 / 2) - (10 * 2 + 5 * 2 + 1 * 2)
= 168px

Your container needs to have a fixed width, or you you'll have to use percentages for padding and margin (and your border may cause problems).

If you don't care if they take up the full width of their container, you just set the width/margin/padding/border to whatever you want.

02-27-2005, 03:00 AM
Thats the problem though, these <span> tag's were already in a <div> container. But the div container had a background color, and when I floated the spans (even when they were div's) it truncated the length of my div container and thus cuttong of the background color, throwing off the whole idea in the first place.

Go there and click "Drawings" in the navigation menu, I through my web server temporarly on a rediercter i found for free, so maybe you guys would have better chances helping me out

02-27-2005, 03:11 AM
Try this.

CSS code


HTML code, after the spans in the truncated div

<span class="clear_float" />

HTH, Dan

02-27-2005, 03:58 AM
No go, still truncates the div container

02-27-2005, 01:43 PM
Bump, the span with a display: block; as part of the style made them line verticaly again, floating them to the left, truncated my div container still also