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>
<style type="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>
<div class="row">
<div class="cont">
<div class="small-row"></div>
<div class="small-row"></div>
<div class="small-row"></div>
<div class="small-row"></div>
</div>
<div class="cont">
<div class="large-row"></div>
</div>
<div class="cont">
<div class="small-row"></div>
<div class="small-row"></div>
<div class="small-row"></div>
<div class="small-row"></div>
</div>
</div>
</body>
</html>
Solution 2:
I'd t ry using display:inline-block on the outer divs like so:
<div style='display:inline-block;height:100px;'>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
</div>
<div style='display:inline-block;height:100px;'>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;height:100px;"></div>
</div>
<div style='display:inline-block;height:100px;'>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
<div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
<div style="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"