CODEWITHSUNDEEP
htmlcsscss-float
Jonathan Calb
Jonathan Calb

Reputation: 761

Vertical top align 2 column divs of different height with float:left

The problem is that i have a form with different fields of different sizes. Each field is inside a div with float:left. And they distribute automaticlly in 2 columns. If they are all of the same height there is no problem but if not it happens the following:

float:left problem

The divs are selected in blue. I need that the last div for example goes up because if not i have a dead space there and in many other forms of my site. They are dinamic forms so i cant solve it manually. The placement must be automatic. I searched in Stack Overflow and in the internet but i couldnt find any solution.

Here is the Divs CSS

#popup #form .left{
    float:left;
    margin-left:25px;
    display:inline-block;
    vertical-align:top;
}

And the General CSS

#popup{
    width:645px;
    height:auto;
    background-color:#e3e3e3;
    border-style:solid;
    border-width:1px;
    border-radius:5px;
    border-color:#afafaf;
    padding:15px;
    color:#4d4d4d;
}

#popup #titulo{
    font-size:15px;
    font-weight:bold;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#afafaf;
    padding-bottom:10px;
}

#popup #form #input{
    display:block;
    width:289px;
    margin-top:10px;
}

#popup #form .left{
    float:left;
    margin-left:25px;
    display:inline-block;
    vertical-align:top;
}

#popup #form .right{
    float:right;
    margin-right:25px;

}

#popup #form #input label{
    font-size:12px;
    font-weight:bold;
}

#popup #form #input input[type='text'], #popup #form #input select, #popup #form #input textarea{
    font-size:12px;
    border-radius:5px;
    border-style:solid;
    border-width:1px;
    border-color:#afafaf;
    width:280px;
    background-color:#f0f0f0;
}

#popup #form #input #foto{
    width:191px;
    height:87px;
    background-image:url(images/img_background.png);
    border-style:solid;
    border-width:1px;
    border-color:#afafaf;
    border-radius:5px;
}

#popup #form input[type='button']{
    text-align:center;
    border-radius:5px;
    border-style:solid;
    border-width:1px;
    border-color:#afafaf;
    font-size:12px;
    color:#4d4d4d;

    -moz-box-shadow:    inset 1px 1px 1px #ffffff;
    -webkit-box-shadow: inset 1px 1px 1px #ffffff;
    box-shadow:         inset 1px 1px 1px #ffffff;
}

#popup #form #input input[type='button']{
    width:82px;
    height:17px;
    margin-left:4px;
    line-height:14px;
}

#popup #form #submit_buttons{
    text-align:right;
    border-top-style:solid;
    border-top-width:1px;
    border-top-color:#afafaf;
    padding-top:10px;
    margin-top:15px;
}

#popup #form #submit_buttons input[type='button']{
    width:82px;
    height:30px;
}

#popup #form input[type='button']:hover{
    background-color:#cccccc;
    cursor:pointer;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#popup #form #input table{
    width:284px;
    margin-top:2px;
    margin-bottom:5px;
}

#popup #form #input table tr{
    text-align:right;
    vertical-align:top;
}

#datepicker{
    background-image:url(images/datepicker.png);
    background-repeat:no-repeat;
    background-position:right;
}

#popup #form #input textarea{
    height:115px;
    max-height:115px;
    min-height:115px;
    width:275px;
    max-width:275px;
    min-width:275px;
}

Upvotes: 4

Views: 6955

Answers (4)

Kennedy Nyagah
Kennedy Nyagah

Reputation: 3645

I would in your case have the id, nombre and descripcion sit in the same div, call it left div. Then have the rest of the content on the right sit on another div call it right div and have them both float left. as follows

css

.left { 
  float:left;
}
.right {
 float:left;
}

HTML

<div id="left">
/*id, nombre and descripcion */
</div>

<div id="right">
/* the rest */
</div>

Upvotes: 0

ignacioricci
ignacioricci

Reputation: 1276

I'm providing a simplified version of the problem, but is simple enough to carry on to your example. You just need to alternate the float between left and right so they don't break :)

HTML Code:

<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize2"></div>
<div class="box boxSize3"></div>

CSS Code:

.box {float:left; width:48%; height:40px; background:red; margin:0 1% 2%;}
.box:nth-child(even){float:right;}
.boxSize2 {height:80px; background:green;}
.boxSize3 {height:120px; background:blue;}

Live example: http://jsfiddle.net/h4kE8/

Upvotes: 2

cimmanon
cimmanon

Reputation: 68339

The Multi-column Layout module spec has been around for a long time, but browsers have been slow to implement, so IE is almost definitely out (though there may be a polyfill that will help it limp along).

http://www.quirksmode.org/css/multicolumn.html

http://www.opera.com/docs/specs/presto28/css/multicolumnlayout/

Note that this will change the order that your elements display, but it will eliminate the gap.

Upvotes: 0

CDizzle
CDizzle

Reputation: 15

I would try throwing a position:relative; in with those two DIVs. I've found that any sort of positioning problem can usually be fixed by setting a clear position attribute.

Also helps when using position:absolute; to have it's parent's position set. If that doesn't work, don't underestimate tables. People might not like them much, but if you know how to use them, they work well for stuff like this.

Lengthy, but the best advice I can give.

Upvotes: 0

Related Questions