CSS width: question

[balsam]

Please bear with me if this is a dopey question, but I’m learning! Also, if I use incorrect terms, please feel free to point it out as it’ll help me learn.

I want to have boxes of text of various sizes scattered around the page. I did a style called “mission” like so:

the width: has been commented out for my experimenting. What I wanted to do is for each individual paragraph or box, specify a width that is appropriate and not have to make endless styles with the only difference between them being the width.

Down in the body of the html, I just have a div class of mission applied to a paragraph, like this

a bunch of text 


even more text


you guessed it, yet more text

but I can’t quite figure out how to make say this grouping of text be 500px wide, while another grouping would maybe be 300px wide, etc. I thought I could add something to that div class that would make it 500px wide, while in the next div class make it another width. I guess I could make styles for each width and combine the div’s but perhaps there’s a better way.

Thanks in advance for any guidance.

Brian

p.s. I know the background/text colours are hideous – they’re just random while I assemble this thing

[soap]

A div is a block-level element by default, meaning its width will be as wide as its containing element. If you want the width to be a certain number, I’m im afraid you will have declare it. The thing is, how would it know by itself how wide to be based on text inside of it. Now if you wanted random widths, that can done easily with javascript. Let know if me that is your goal.

[soap]

I think the point is that he didn’t want to have a bunch of different classes. Lazy boy :)

[soap]

maybe

[balsam]

Thanks for all the help guys. I was hoping to be able to specify the width at the text location of the html. Sort of something like this:

a bunch of text 


even more text


you guessed it, yet more text

but it appears that simply adding “width=” doesn’t work. So the next best way is to keep .mission class defining everything but the width and then separate classes for the various widths I’m wanting.

[guiniveretoo]

You would have to declare different classes for different widths I’m afraid; but it’s not as terrible as you might think. You could declare classes like this:

.mission { /* the code you want for each div */ }

.skinny { width: 300px; }

.medium { width: 500px; }

.wide { width: 700px; }

Then declare it in the html like so:

some text here

I’m not sure what a pro would say, but thinking about it I’d keep the class names to something generic but understandable (as in not “.width500” but “.medium”) so that if you need to change the widths of the divs then the class names would still make sense.

[balsam]

Thanks guiniveretoo!

[Author]

Posts