Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Simple CSS puzzle?

 
Aron Daburn
Ranch Hand
Posts: 36
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Aron Daburn
Ranch Hand
Posts: 36
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If only the style sheet is accessible, is this possible to do?
 
Bauke Scholtz
Ranch Hand
Posts: 2458
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Just apply the desired styles on the desired elements/classes.
 
Anuj Troy
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 36
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic