Page 1 of 1

CSS problem

Posted: Wed Jun 13, 2007 9:02 pm
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 :)

Posted: Wed Jun 13, 2007 9:10 pm
by feyd
It appears interestingly tabular in nature. Is there a reason you aren't using a table?

Posted: Wed Jun 13, 2007 9:25 pm
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.

Posted: Wed Jun 13, 2007 9:28 pm
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. :)

Posted: Wed Jun 13, 2007 9:37 pm
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.

Posted: Thu Jun 14, 2007 1:11 am
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.

Posted: Thu Jun 14, 2007 3:01 am
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.

Posted: Thu Jun 14, 2007 9:13 am
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 :)

Posted: Thu Jun 14, 2007 9:17 am
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?

Posted: Thu Jun 14, 2007 9:29 am
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.