CODEWITHSUNDEEP
htmlcss
Vaibhav Jain
Vaibhav Jain

Reputation: 3755

Rearranging Div Structure

I have following div structure.

enter image description here

I want to rearrange this with the help of C.S.S. only such that there will be no space b/w Div-1(Data: Test-1, 25) & Div-3(Data: Test3, 45).

Here is the JSFiddle Link

HTML

<div class="test">
    Test 1
    <br/>
    25
</div>

<div class="test">
    <div class="abc">
       Test 2
       <br/>
       35
     </div>
</div>

<div class="test">
    Test 3
    <br/>
    45
</div>

CSS

.test{
    width: 48%;
    border: 1px solid black;
    border-radius: 12px;
    font-size:14px;
    text-align: center;
    float: left;
    display:inline-block;

}
.abc{

    height:75px; 

}

Upvotes: 0

Views: 55

Answers (3)

Pepelius
Pepelius

Reputation: 1609

You must make an additional CSS styling property for the right-hand div containers. They're all using the left float attribute, which is not going to work properly.

Try this to CSS:

.test-right {
   float: right;
}

and to HTML:

<div class="test test-right">
    <div class="abc">
    Test 2
    </div>
</div>

JSFiddle

Upvotes: 1

G.L.P
G.L.P

Reputation: 7207

Because of div 2 height, your 3rd div position gets affected. So you can arrange div 1,3 in a separate div and div 2,4 in separate div like this: DEMO

HTML:

<div class="col">
    <div class="test">Test 1
        <br/>25</div>
    <div class="test">Test 3
        <br/>45</div>
</div>

CSS:

.col {
    width: 48%;
    float: left;
    display:inline-block;
}
.test {
    width:100%;
    border: 1px solid black;
    border-radius: 12px;
    font-size:14px;
    text-align: center;
}

Upvotes: 2

SW4
SW4

Reputation: 71140

Unfortunately...

You cant (sorry).

If the heights of the div elements are not known and they must appear left to right, this cannot be accomplished using CSS- you will need to look into using a library like Masonry or Isotope

If the heights of the divs are known and proportionate- there are a number of solutions (CSS table derivation, or lists), if the display order is top to bottom and not left to right you could also look into using columns.

Upvotes: 0

Related Questions