CODEWITHSUNDEEP
htmlcss
DPMC87
DPMC87

Reputation: 85

divs not floating as expected

I have a containing div with 3 boxes inside of it. I'm trying to get them to display on the same line as each other.

I've used floats to try achieve this but they appear messed up.

I know this is a common problem and have looked through here to find what I was looking for but none of the solutions seemed to work as expected.

Here's my JSFiddle

<div class="aboutcol1">

  <div class="aboutbox1">
    <div id="aboutbox-image1">
    </div>
  </div>


  <div class="aboutbox2">
    <div id="aboutbox-image2">
    </div>
  </div>

  <div class="aboutbox3">
    <div id="aboutbox-image3">
    </div>
  </div>

</div>

Upvotes: 1

Views: 73

Answers (4)

Raul Montejo
Raul Montejo

Reputation: 21

How to float adjacent divs on a line:

  1. for each adjacent div float: left (or right if you want to read right-to-left)
  2. define a width for each (I recommend % width for responsive design)
  3. To separate rows, wrap the adjacent divs inside another div and clear: both to reset the float.

.aboutbox {
    width: 20%;
    float:left;
}
.aboutbox-image {
    height:10vw;
    background-image: url('http://placehold.it/350x150');
    background-size: cover;
    cursor: pointer;
    border-radius: 1.8vw;
}
.bordered {
    border: 25px solid #000000;
}
<div class="aboutbox">
    <div class="aboutbox-image">box1</div>
</div>
<div class="aboutbox">
    <div class="aboutbox-image bordered">box2</div>
</div>
<div class="aboutbox">
    <div class="aboutbox-image">box3</div>
</div>

That will clear the float so the next item starts on a new line.

Upvotes: 1

N Kumar
N Kumar

Reputation: 1312

I think adding vertical-align property might help 

vertical-align: top;

Upvotes: 0

Basil Baby
Basil Baby

Reputation: 101

You didn't put float left for .aboutbox2 class

updated css

.aboutboxes1 {
  min-width:100%;
  max-width:100%;
  width: 100%;
}     

.aboutbox1{
  max-width:20%;
    width:20%;
  min-width:20%;
  height:10vw;
  float:left;
}


#aboutbox-image1 {
    background-image: url('http://placehold.it/350x150');
    background-position: left top;
    background-size: 100%;
    background-repeat:no-repeat;
    cursor: pointer;
    margin-left:auto;
    margin-right:auto;
    height: 100%;   
    border-radius: 1.8vw;
    border: hidden;
}

.aboutbox2{
  max-width:20%;
  min-width:20%;
  height:10vw;
  width:20%;
  float:left;
}

#aboutbox-image2 {

     background-image: url('http://placehold.it/350x150');
    background-position: left top;
    background-size: 100%;
    background-repeat:no-repeat;
    cursor: pointer;
    margin-left:auto;
    margin-right:auto;
    height: 100%;   
    border-radius: 1.8vw;
    border: 25px solid #000000;

}
.aboutbox3{
    max-width:20%;
  min-width:20%;
  height:10vw;
  float:left;
width:20%;
}


#aboutbox-image3 {

     background-image: url('http://placehold.it/350x150');
    background-position: left top;
    background-size: 100%;
    background-repeat:no-repeat;
    cursor: pointer;
    margin-left:auto;
    margin-right:auto;
    height: 100%;   
    border-radius: 1.8vw;
    border: hidden;

}

Upvotes: 1

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

You have forgotten to put float rule to div with class aboutbox2

Try this fiddle and see if only the float was the issue. FIDDLE

Upvotes: 1

Related Questions