how to float 4 divs within another div

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!

And the floats are not (sure) cleared? `
` below the 4 divs you have now. — , Mar 22 '13 at 20:47
A bunch of folks below say that you can't start an ID with a number. They're mistaken, at least for modern browsers. However, CSS hasn't caught up: http://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names — isherwood, Mar 22 '13 at 20:51
@isherwood the floats break because they aren't cleared (most likely at least, as we can't see that for sure). The OP can try 4x 20% to see if it's not a overflowing issue. If so, he/she can try to use `box-sizing: border-box;` to push outside pixels to the inside. — , Mar 22 '13 at 20:53

score 6 · Answer 1 · edited May 23 '17 at 12:21

6

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>

edited May 23 '17 at 12:21

Community

1
1

answered Mar 22 '13 at 20:46

dfsq

191,768
25
236
258

I use a `.floatClear` default class for it too dfsq +1 :) – Mar 22 '13 at 20:54
@Allendar or even use `inline-block`'s :) – dfsq Mar 22 '13 at 20:56
Your references are out of date, sir. :-) – isherwood Mar 22 '13 at 21:01
@isherwood As far as I know lexical grammar rules have not changed. ID still can't start with a number. At least it will not work without hacks like yours. It's funny but not too practical. – dfsq Mar 22 '13 at 21:06
Hack? Ouch. What grammar rules do you speak of if not HTML spec? – isherwood Mar 22 '13 at 21:08
http://www.w3.org/TR/css3-syntax/#syntax *In CSS3, identifiers ... cannot start with a digit or a hyphen followed by a digit* – dfsq Mar 22 '13 at 21:10
thank you for all of your answers. Ive changed the names of the divs and added the clear floats and all is now working. thanks a ton – user2197457 Mar 24 '13 at 16:04

score 3 · Answer 2 · answered Mar 22 '13 at 20:53

3

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/

answered Mar 22 '13 at 20:53

isherwood

58,414
16
114
157

Wow this is interesting, never thought about this! – dfsq Mar 22 '13 at 20:55

score 2 · Answer 3 · answered Mar 22 '13 at 20:49

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.

score 0 · Answer 4 · answered Mar 22 '13 at 20:47

0

#bottomsections div{ float:left; width:25%}

As others have said, numbers aren't valid beginnings to ids

answered Mar 22 '13 at 20:47

Brad

6,106
4
31
43

score 0 · Answer 5 · answered Mar 22 '13 at 20:51

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;
}

how to float 4 divs within another div

5 Answers5