• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Solution for ignoring width styling

Solution for

There are a lot of tutorials around which advocate using pure CSS for forms (and not to use tables) and these often use the <label> tag for the fieldname. An issue I have come across is that <label> is an inline element so setting the width is supposed to have no effect; in practise setting the width will work in Internet Explorer but not other browsers. This post shows the simple solution so other browsers can also assign a width to a label.

Make the label a block level element

The solution is simply to make the label into a block level element with display: block and to float it to the left so the input field remains alongside it. This is achieved like so, where the label is also set to a width of 150px:

label {
    display: block;
    float: left;
    width: 150px;
}

Personally, I almost always stick with tables for forms where the text label is alongside the field because there’s a lot less messing around 🙂

Check Out These Related posts:

  1. Using HTML
  2. Using the
  3. NordVPN vs PureVPN – Which Reigns Supreme?
  4. Using Internet Explorer Conditional Tags for Style Sheet Selection

Filed Under: HTML And CSS

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap