Sit divs next to each other that generate their own width to fill parent div

Question

I have a parent div that's 960px wide and I have 5 divs inside that which I want to fill the width of the parent equally.

The reason I'm not just dividing 960 x 5 is because they will act as buttons and if I add or take one away I want them to adjust to the parent divs width.

I also want a 5px gap between each div so they're not touching.

This is my HTML set up at the moment:

<div class="parent">

   <a href="home.html"><div id="home">HOME</div></a>
   <a href="about.html"><div id="about">ABOUT</div></a>
   <a href="getoffer.html"><div id="getoffer">GET OFFER</div></a>
   <a href="testimonials.html"><div id="testimonials">TESTIMONIALS</div></a>
   <a href="contact.html"><div id="contact">CONTACT</div></a>

  </div>

Full JSFiddle

One thing from looking at your fiddle, you have duplicated styles based on the `ID` of the elements, you should use a `class` instead of ID tags. i.e. `.button { }` and `
` — Nunners, Oct 21 '13 at 15:32
@Nunners yea I always get confused which to use, no matter how much I read into class and ID I don't really understand the difference — SaturnsEye, Oct 21 '13 at 15:34
@Adsy - it's really simple, ID is unique (only one per page), class is not unique. — Tomer, Oct 21 '13 at 15:39
@fatman but why use an ID over Class? What's so unique about it? — SaturnsEye, Oct 21 '13 at 15:40
No real reason, you can never use ids and still make beautiful sites :), actually there is a big debate on the web whether to use id's or not — Tomer, Oct 21 '13 at 15:43
Yea, so basically you could just always use class and be ok? — SaturnsEye, Oct 21 '13 at 15:44

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

if you want, you can use this JQuery code:

jsFiddle is here

var count = $(".parent a").length;
$(".parent div").width(function(){
    return ($(".parent").width()/count)-5;
}).css("margin-right","5px");

you can count children of parent element with count = $(".parent a").length;. resource

edited May 23 '17 at 12:28

Community

1
1

answered Oct 21 '13 at 15:49

Mohsen Safari

6,669
5
42
58

Doesn't work because if I add another div into the parent, it drops down underneath the others. I want all the divs to shorten to accommodate the new div – SaturnsEye Oct 21 '13 at 15:52

score 0 · Answer 2 · answered Oct 21 '13 at 15:32

0

Try

width: 18%

You can adjust the width accordingly as you add or remove.

Lastly, in your CSS you have a lot of repetition which can be further cleaned up by using a class='button'.

http://jsfiddle.net/WeQwc/1/

answered Oct 21 '13 at 15:32

beautifulcoder

10,832
3
19
29

this isn't making the divs fill out to the edge of the parent div. There is loads of gap after the far right div – SaturnsEye Oct 21 '13 at 15:36

Sit divs next to each other that generate their own width to fill parent div

2 Answers2