CODEWITHSUNDEEP
phphtmlcssweb
Heatmanofurioso
Heatmanofurioso

Reputation: 1028

Putting 2 divs next to each other with same class

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

Upvotes: 1

Views: 2023

Answers (5)

Friendly Crook
Friendly Crook

Reputation: 1198

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

Upvotes: 0

gmast
gmast

Reputation: 192

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

More on this:

How do you keep parents of floated elements from collapsing?

Upvotes: 0

Sougata Bose
Sougata Bose

Reputation: 31749

Add this css - 

.second {

    float: left;
    margin-left: 5px;

}

Check the DEMO

Upvotes: 2

Ashwani
Ashwani

Reputation: 732

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

Upvotes: 2

Sourabh Kumar Sharma
Sourabh Kumar Sharma

Reputation: 2817

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

Upvotes: 0

Related Questions