CSS problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

CSS problem

Post by alex.barylski »

Code: Select all

<div style="text-align: right">
  Item 1<br>
  Item 2<br>
  Item 3
</div>
<div>
  Answer 1
  Answer 2
  Answer 3
</div>
The first div is to the left and it's contents right aligned. The second should follow shortly after and it's text is left aligned. Very common design. :)

I have tried everything from floating the DIV's to display: inline and more...

I can't figured it out??? Any ideas?

The first and second column both have dynamic text so i cannot reply on padding the second column a fixed number of pixels...

Help please :)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

It appears interestingly tabular in nature. Is there a reason you aren't using a table?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Yeah... Generally, any time that you have to use <br /> and it's not due to user input, you're probably thinking of the wrong HTML. Like feyd said, you should use a table. Or, if you really don't want to, use lists. However, if you plan for these items to align, you will need to use a table.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

feyd wrote:It appears interestingly tabular in nature. Is there a reason you aren't using a table?
Ahhhhhm...not sure. Mostly cause it's not data just some random information:

Code: Select all

System: Windows XP Pro
Objects: 12 (3 private, 11 public)
Path: a -> b -> b -> e
The colons indicate where the break should occur...

Still say it's tabular data?

I didn't even consider using a table to be honest...although you may have a point. :)
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

That seems like a list. Try it this way:

Code: Select all

<ul>
<li><span class="title">System:</span> <span class="value">Windows XP Pro</li>
</ul>

Code: Select all

.title {
width: 12em;
}
You may want to make the title class a block and float it left. Maybe.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Hockey, what is it that you want to achieve? 2 columns side by side? Fixed, fluid, flexible? One-fixe, second fluid?

Float:left and float:right on the divs should do it. Or both float:left works as well. Or positioning. So many possibilities, if I don't know the context or how it's supposed to look I cannot help specifically.

The markup of the items look like they should be a list. You could also mark it up with a definition list.
User avatar
Gente
Forum Contributor
Posts: 252
Joined: Wed Jun 13, 2007 9:43 am
Location: Ukraine, Kharkov
Contact:

Post by Gente »

Code: Select all

	<div style="float:right; text-align: right">
	  Item First<br>
	  Item Second<br>
	  Item Third
	</div>
	<div style="float:left;">
	  Answer 1
	  Answer 2
	  Answer 3
	</div>
Try this :) Also it's better to use list tags for code like yours.
Last edited by Gente on Thu Jun 14, 2007 10:24 am, edited 1 time in total.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

I ended up going with a table because although not truely tabular data when I viewed in FireFox without CSS (like some devices would?) the table made the page render best and make most sense.

Thanks :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Mm, that's kind of unsatisfying. We (/I) try to help but you sort of won't let us (/me). What was it that you tried to achieve? Why didn't another solution (CSS) work?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Well, lists and tables were the only way for him to have that render correctly without CSS. Though the list would have been the best choice if he wasn't concerned about alignment, the table was best in this case.
Post Reply