Responsive divs with different percent widths and margin

Question

I'm working on a responsive template but I have a problem with the widths of my divs and they are all the same size, but they should not be, look at the code snippet. I tried some things but they all don't work :/

Html:

<div class="content">
            <div class="col 4">
                <div class="top">
                    <h4>Top</h4>
                </div>
                <div class="con">
                    <p class="inner">Content</p>
                </div>
            </div>
            <div class="col 3">
                <div class="top">
                    <h4>Top</h4>
                </div>
                <div class="con">
                    <p class="inner">Content</p>
                </div>
            </div>
            <div class="col 3">
                <div class="top">
                    <h4>Top</h4>
                </div>
                <div class="con">
                    <p class="inner">Content</p>
                </div>
            </div>
            <div class="col 3">
                <div class="top">
                    <h4>Top</h4>
                </div>
                <div class="con">
                    <p class="inner">Content</p>
                </div>
            </div>
        </div>

CSS:

.content {
    width: auto;
    height: auto;
    padding: 10px;
}

.col {
    box-shadow: 0 0 3px #bdc3c7;
    margin: 5px;
}

.col .4 {
    width: 100%;
    float: left;
}

.col .3 {
    width: 33.33333%;
    float: left;
}

.col .2 {
    width: 50%;
    float: left;
}

.col .1 {
    width: 25%;
    float: left;
}

.col .top {
    height: 40px;
    line-height: 40px;
    width: 100%;
    background: #3498db;
}

.col .top h4 {
    padding: 0 10px;
    color: #fff;
}

.col .con {
    width: 100%;
}

.inner {
    padding: 10px;
}

Chrillewoodz · Answer 1 · 2015-07-07T17:14:48.447

0

This:

.col .4 {
   width: 100%;
  float: left;
}

.col .3 {
  width: 33.33333%;
  float: left;
}

.col .2 {
  width: 50%;
  float: left;
}

.col .1 {
  width: 25%;
  float: left;
}

Should be this:

.col-4 {
  width: 100%;
  float: left;
}

.col-3 {
  width: 33.33333%;
  float: left;
}

.col-2 {
  width: 50%;
  float: left;
}

.col-1 {
  width: 25%;
  float: left;
}

or this, which means all col classes that also has another numeric class:

.col.col-4 {
   width: 100%;
  float: left;
}

.col.col-3 {
  width: 33.33333%;
  float: left;
}

.col.col-2 {
  width: 50%;
  float: left;
}

.col.col-1 {
  width: 25%;
  float: left;
}

Since they're not nested inside the col class. As having classes that starts with a number isn't allowed.

edited Jul 07 '15 at 17:14

answered Jul 07 '15 at 16:45

Chrillewoodz

27,055
21
92
175

I tried it with .col.4, .. and only .4, .. before but it didn't worked and now it dosen't work as well. – Dmitrij Kiltau Jul 07 '15 at 16:52
@DimaKiltau I've updated answer, it works now if you change it like this. – Chrillewoodz Jul 07 '15 at 17:15
@DimaKiltau Then you have to adjust the width till you get what you want. Consider accepting this answer. – Chrillewoodz Jul 07 '15 at 17:26

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

You should change your class names to something like "col-1", "col-2" ... Check this post

Also, your selectors are wrong. With this:

.col .col-1 {}

You are trying to access all the element with "col-1" class inside elements with class "col".

You should be doing:

.col.col-1 {}

To get the elements containing both classes.

edited May 23 '17 at 12:29

Community

1
1

answered Jul 07 '15 at 16:46

Mindastic

4,023
3
19
20

I tried it with .col.4, .. and only .4, .. before but it didn't worked and now it dosen't work as well. – Dmitrij Kiltau Jul 07 '15 at 16:53
OK, but that depends on the width you use. You have to play around with values and classes until you get the results you want. If this answer really helped you, please consider marking it as the correct one. Thanks. – Mindastic Jul 07 '15 at 17:24
Didn't knew that width: calc(100% - 20px); works in CSS3. Now it's good. – Dmitrij Kiltau Jul 07 '15 at 17:31

Responsive divs with different percent widths and margin

2 Answers2