CODEWITHSUNDEEP
htmlcssborder
user3833749
user3833749

Reputation: 15

Getting border divs same width and not to cross each other verticaly

Problem 1: I'm trying to get my div boxes to have the same width regardless from text length I use (I will use max 2 digits), but I can't get it to work.

Problem 2: The target platform is mobile and when the linewraping occurs the "boxes" positions right under the text from the text on the line above (the borders crosses each other).

The reson for using div "groups" is that a javascript is going to change the value of 4 boxes at a time.

<!DOCTYPE html>
<html>
<head>
    <style>
.wrap {
    white-space: normal !important;
    }
.online {
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border: 2px solid #00CC00;
    width: 20px;
    text-align: center;
    padding: 2px;
    display: inline;
}
.test {
    display: inline;
}

</style>
</head>

<body>
    <div id="A1-result" class="test">
        <div class="online">0</div>
        <div class="online">1</div>
        <div class="online">2</div>
        <div class="online">3</div>     
    </div>
    <div id="A2-result" class="test">
        <div class="online">4</div>
        <div class="online">5</div>
        <div class="online">6</div>
        <div class="online">7</div>
    </div>
    <div id="A3-result" class="test">
        <div class="online">8</div>
        <div class="online">9</div>
        <div class="online">10</div>
        <div class="online">11</div>        
    </div>
    <div id="A4-result" class="test">
        <div class="online">12</div>
        <div class="online">13</div>
        <div class="online">14</div>
        <div class="online">15</div>
    </div>
</body>
</html>

Upvotes: 0

Views: 125

Answers (1)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

Change display:inline property to display:inline-block. Read more about the difference between inline and inline-block.

.online {
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border: 2px solid #00CC00;
width: 20px;
text-align: center;
padding: 2px;
display: inline-block;
}
.test {
display: inline-block;
}

DEMO

Upvotes: 1

Related Questions