Putting 2 divs next to each other with same class

Question

I have 2 divs which i cannot give different class names, due to them being the same but in a repeatable php code, which doesen't allow me to give them different class names. So i basically want to display them side by side. I have tried giving them a float left and relative position and a master div surrounding them with absolute position and other things like that, but to no avail.

HTML:

<div class="master"> 
<div class="second">1st</div>
<div class="second">2nd</div>
</div>

CSS currently applied:

.second{
    color:#FFF;
    width:300px;
    height: 10%;
    background-color:#69F;
    border-radius:25px;
    opacity: 0.7;
    filter: alpha(opacity=40);
    float:left;
}
.master{
width:960px;
padding-top:12%;
margin: 0 auto;
font-size:50px;
}

Simply using float left is not working for some reason. Do you want me to display all the CSS currently being applied on them? — Heatmanofurioso, May 28 '15 at 11:32
Chrome Here are the 2 files https://gist.github.com/anonymous/72958ac2fbd7d42179c6 — Heatmanofurioso, May 28 '15 at 11:45
@Jay Moy I can't. As you see on my github, the divs are both the same, except it is repeated on a while inside the php. I can't give it separate names or do any individual work on them. — Heatmanofurioso, May 28 '15 at 13:37

score 2 · Accepted Answer · answered May 28 '15 at 11:32

2

<div class="master"> 
<div class="second" style="float:left">1st</div>
<div class="second">2nd</div>
</div>

answered May 28 '15 at 11:32

Ashwani

674
1
6
15

I can't give the inside divs specific styles, whatever is being applied to one, also goes to the other. – Heatmanofurioso May 28 '15 at 11:36
I think your code itself working see jsfiddle http://jsfiddle.net/cashwanikumar/7nd7dmkt/ This is what you want? – Ashwani May 28 '15 at 11:41
1

try to put float : left !important; see if it work – Ashwani May 28 '15 at 11:50
It has float left @Ashwani. But insn't working. For some reason unknown to me. – Heatmanofurioso May 28 '15 at 11:51
2

i mean put !important also – Ashwani May 28 '15 at 11:52

score 2 · Answer 2 · answered May 28 '15 at 11:32

2

Add this css -

.second {

    float: left;
    margin-left: 5px;

}

Check the DEMO

answered May 28 '15 at 11:32

Sougata Bose

30,169
8
42
82

score 1 · Answer 3 · answered May 28 '15 at 11:53

1

Try adding display: inline-block

.second {
  display: inline-block;
}

and make sure not to increase the width of any .second container to more than half of the parent

answered May 28 '15 at 11:53

Friendly Crook

930
1
7
13

score 0 · Answer 4 · answered May 28 '15 at 11:32

0

In your css code put this:

.class
{
float:left;
}

also make sure that if you put the width of that class .second then it should not exceed 50% as these two divs are only contained in the main div with the class .master

answered May 28 '15 at 11:32

Sourabh Kumar Sharma

2,756
3
20
31

Their sizes aren't exceeding 50%. But the float left isn't working – Heatmanofurioso May 28 '15 at 11:39
use float:left at the top in the .second class declaration and use `display:block` after that – Sourabh Kumar Sharma May 28 '15 at 11:40
i ran your code in the question and it works fine in my screen divs are exactly beside each other – Sourabh Kumar Sharma May 28 '15 at 11:43
For some reason on my page it isn't working. Might be some conflict with other CSS or something :( I posted on a reply my full page code and CSS – Heatmanofurioso May 28 '15 at 11:52

score 0 · Answer 5 · edited May 23 '17 at 11:43

0

If you use "float:left" you have to set a width (in percentage -obviously they must not exceed 100%-, or pixels) for the floated divs. Also, you might want to use this css for the container:

.container:after {
  content: "";
  display: table;
  clear: both;
}

Putting 2 divs next to each other with same class

5 Answers5