-4

How to make two divs with same class to float or appear in the same line side by side. The problem is I can't add extra class/id. Those two divs have same default class which cannot be changed. I don't want to use javascript to add a new class/id. None of the answers whether on google or stack overflow or any where else show how to do it using same "class" If there is any other way to add class/id without using javascript than that would be appreciated too.

user3033448
  • 1
  • 1

3 Answers3

2

Two most common and simple ways are:

1. float: left

Example:

.myDiv {
    float: left;
}

Divs will stick to each other if they both fit in the line. Disadvantage of this method is that the parent container will get confused so that further elements outside this parent may flow over it. In that case you'll have to use clear-fix.

2. display: inline-block

Example:

.myDiv {
    display: inline-block;
}

Very similar result to float: left but there might be small space between the divs, caused by white-space. Here's more about this problem.

Community
  • 1
  • 1
matewka
  • 9,912
  • 2
  • 32
  • 43
1

Well, you can add a style propery for an element, where you can assign display:inline-block or float:left or such. It all would look like this:

<div class="divclass" id="div1" style="float:left"> asd </div>

<div class="divclass" id="div2" style="float:left"> asd </div>

Tomas Smagurauskas
  • 656
  • 5
  • 16
  • I understood he could not add or remove anything in HTML. he doesn't either say how many times in his document the class is used . – G-Cyrillus Nov 25 '13 at 18:08
0

http://jsfiddle.net/myc7N/1/

.myClass{
    width: 20%;
    float:left;
}
.someOtherClass{
    clear:both;
}
Uptown Apps
  • 707
  • 1
  • 5
  • 11
  • `clear:both` gives nothing here. You didn't add `content` and `display: block` property. – matewka Nov 25 '13 at 18:13
  • `clear:both` is resetting any floats which allows the next div to go back to being formatted properly on a new line. Check out the jsFiddle – Uptown Apps Nov 25 '13 at 18:14
  • No way, genius! Notice that `:after` is a _pseudo-element_ which **doesn't exist** without `content` property. The reason that third div in your fiddle stays in the new line is simple - there's no space for it since the first two are `50%` wide. Remove `clear: both` in your fiddle and you'll see NO change. – matewka Nov 25 '13 at 18:16
  • You're right, you'd have to clear on the next div on the DOM. I have updated my answer. – Uptown Apps Nov 25 '13 at 18:25