How To Make A Div In The Middle Of Two Others To Span Multiple Rows, Like Rowspan In Tables
It's been a while I try to keep away from using tables for laying out elements, as I realized that they were not meant for that and that normal container elements like div,p along
Solution 1:
To demonstrate the changes , i have used border-color on the div, the code is pretty simple and clear.
In the example below the height has been fixed to 400px
<html><head><styletype="text/css">
*, *:before, *:after {
box-sizing: border-box;
}
.row{
width : 100%;
border : 1px solid #ff0000;
padding: 5px;
float:left;
}
.cont{
height :400px;
border : 1px solid #00ff00;
width:33%;
padding:10px;
float:left;
}
.small-row{
height:25%;
border: 1px solid #0000ff;
width:100%;
padding:2px;
float:left;
}
</style></head><body><divclass="row"><divclass="cont"><divclass="small-row"></div><divclass="small-row"></div><divclass="small-row"></div><divclass="small-row"></div></div><divclass="cont"><divclass="large-row"></div></div><divclass="cont"><divclass="small-row"></div><divclass="small-row"></div><divclass="small-row"></div><divclass="small-row"></div></div></div></body></html>Solution 2:
I'd t ry using display:inline-block on the outer divs like so:
<divstyle='display:inline-block;height:100px;'><divstyle="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div><divstyle="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div><divstyle="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div><divstyle="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div></div><divstyle='display:inline-block;height:100px;'><divstyle="width:200px;background-color:blue;height:20px;margin: 5px 0;height:100px;"></div></div><divstyle='display:inline-block;height:100px;'><divstyle="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div><divstyle="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div><divstyle="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div><divstyle="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div></div>No floats required :)
Post a Comment for "How To Make A Div In The Middle Of Two Others To Span Multiple Rows, Like Rowspan In Tables"