how to float 4 divs within another div - css

Question

im trying to float 4 divs side by side. they are in a parent div width = 100% and each child div is width:25% there is no margin or padding either... they are not displaying correctly!
heres the code...
<div id="bottomsections">
<div id="1a">
<h1>a</h1>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat</p>
</div>
<div id="1b">
<h1>b</h1>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat</p>
</div>
<div id="1c">
<h1>c</h1>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat</p>
</div>
<div id="1d">
<h1>d</h1>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat</p>
</div>
and css...
#bottomsections {
width:100%;
}
#1a {
width:25%;
float:left;
margin:0;
padding:0;
}
#1b {
width:25%;
float:left;
margin:0;
padding:0;
}
#1c {
width:25%;
float:left;
margin:0;
padding:0;
}
#1d {
width:25%;
float:left;
margin:0;
padding:0;
}
heres the fiddle..http://jsfiddle.net/aM2UL/1/
thanks!

Answer 1

Id can not start with a number:
/* change #1a to #a1 */
#a1 {
width:25%;
float:left;
margin:0;
padding:0;
}
http://jsfiddle.net/dfsq/aM2UL/3/
Refer this comprehensive answer about what characters are allowed: https://stackoverflow.com/a/449000/949476
Upd: As pointed by Allendar in comments you should also clear your floats. You can insert one more element after your floated divs with clear: both. Personally I use .clearfix class as more semantic:
.clearfix:before,.clearfix:after{content:"";display:table}
.clearfix:after{clear:both}
to be used as <div id="bottomsections" class="clearfix">...</div>

Answer 2

You certainly can use numbers to start IDs, but you have to select them differently.
[id="1a"], [id="1b"], [id="1c"], [id="1d"] {
width:25%;
float:left;
margin:0;
padding:0;
}
http://jsfiddle.net/aM2UL/11/

Answer 3

id's cannot start with numbers in any revision of HTML and/or CSS, also, all 4 of your styles are the same, so you would be better off using a class such as
div.inner {
width:25%;
float:left;
margin:0;
padding:0;
}
and set <div id="1d" class="inner">
this will keep your code smaller and more manageable and mean less changes if and when you need to do anything else to the code later on.

Answer 4

#bottomsections div{ float:left; width:25%}
As others have said, numbers aren't valid beginnings to ids

Answer 5

ids cant start with a number, try to change for #a1, or something. but if you want to apply the same properties in all divs of you main div, why you not do this way?
#bottomsections div{
width:25%;
float:left;
margin:0;
padding:0;
}