GeeCON Prague 2014*
The moose likes HTML, CSS and JavaScript and the fly likes Simple CSS puzzle? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Simple CSS puzzle?" Watch "Simple CSS puzzle?" New topic
Author

Simple CSS puzzle?

Aron Daburn
Ranch Hand

Joined: Mar 18, 2007
Posts: 36
I have a div with two spans in it. I need the first span to align left within the div, and the second span to align right within the div. I have tried everything I could think up to try and nothing seams to work. What do I need to do?

Say the following HTML



Then the .CSS file is


What do I need to fill in the CSS to get it such that all of the 'form-label' spans align left, and all of the 'form-input' spans align right within the div.
Bauke Scholtz
Ranch Hand

Joined: Oct 08, 2006
Posts: 2458
You may find this useful: http://www.alistapart.com/articles/prettyaccessibleforms

Here are another examples:
http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/
http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/
http://www.sitepoint.com/article/fancy-form-design-css/
Aron Daburn
Ranch Hand

Joined: Mar 18, 2007
Posts: 36
If only the style sheet is accessible, is this possible to do?
Bauke Scholtz
Ranch Hand

Joined: Oct 08, 2006
Posts: 2458
Just apply the desired styles on the desired elements/classes.
Anuj Troy
Ranch Hand

Joined: Apr 07, 2005
Posts: 30
hi

i wish i had a board to express my thoughts but i will try to do the same with words..

imagine the div to be a rectangular box of 300px width. now you want to place two more smaller boxes inside (you used spans, but i would recommend divs). lets call the boxes as A and B. width of box A=B=150px.(this could vary according to your need)

inside box A you want to write FirstName and inside box B you want to write LastName. Put the first and last name in spans.

Divs are Block element that is they have a new line before them and after them by defualt. so if you put two divs together they will lie on top of each other. but if you change the display style to inline then they behave as inline element and will be next to each other.

What i would do is :



do let me know if it worked for you.


SCJP 1.4, SCWCD 1.4
your eyes cannot see what your mind does not know
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
YOu can always attach an image.

Shouldn't you be using a <label for="elemName">

You should be using float, not inline.

Eric
Aron Daburn
Ranch Hand

Joined: Mar 18, 2007
Posts: 36
I figured it out. It seams a little silly having the solution, but for some reason I just wasn't coming up with it. On the first span I just set its width to give the proper spacing to move the other span to the right. Thanks for the help guys
 
GeeCON Prague 2014
 
subject: Simple CSS puzzle?