• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

How to use css for layout

 
Ranch Hand
Posts: 33
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
So I've read in several places "don't use tables for layout - use css." OK, sounds great, but how do it do that? I have a div that contains two labels, one selector, and one checkbox. How do I display these on a single line from left to right, instead of from top down - one on each line - as the default seems to be.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Labels, selects and checkboxes are all inline elements. If they are appearing as block elements, either some other CSS is affecting them, or the container is too narrow to contain them inline.
 
Ranch Hand
Posts: 98
Angular Framework Chrome Linux
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
make your div element style as inline



learn css layout from here Learn layout
& responsive layout (for various device width ) Responsive Layout

 
Dave Southern
Ranch Hand
Posts: 33
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
There is a style sheet that controls the whole app - maybe that is having an affect. I put style="display:inline;" in the div that contains the elements, but that didn't change anything - except that now the 'submit' button that I had below the div is inline with the last element in the div.

I may punt on this one and let my dev lead handle it. ;)
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Putting inline on the container is useless. The elements need to be inline -- which they are by default.

To actually see what css is affecting the element you should use the CSS inspector in the Chrome Dev tools. Firebox has something similar.
 
Dinesh Kumar Ramakrishnan
Ranch Hand
Posts: 98
Angular Framework Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
may be css is affecting your div element try CSS inspector to view style setting and try the following code to


 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
No, don't do that. That's using a sledgehammer to crack walnuts. And it wouldn't work anyways as I noted before.

Get into the Dev Tools and see what's going on. Otherwise you are either just guessing, or adding a lot of band-aids to fix a problem that likely needs to be fixed elsewhere.
 
Dinesh Kumar Ramakrishnan
Ranch Hand
Posts: 98
Angular Framework Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
@Bear Bibeault no sir i think it will work give a try.here the priority of css declaration

Declarations from the user agent
Declarations from the user
Declarations from the author
Declarations from the author with !important added
Declarations from the user with !important added


The first item in the list having the least weight(source)
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Just because something will work does not always make it the correct approach.
 
Dinesh Kumar Ramakrishnan
Ranch Hand
Posts: 98
Angular Framework Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
@Bear Bibeault well said sir.
adding inline as !important will not affect any things from the imported css file that's why i said
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Yes, !important will usually override anything inherited, but its use is widely considered as a tactic of last resort; in large part because it is such a sledgehammer that interrupts the normal flow of the cascade.

Unless we know that the OP's situation has reached the point of last resort, the !important modifier should not yet be a consideration.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic