html5 - force div to surround another div -


at moment have parent div containing 2 div's, both div's have own border. try have 1 div in left top corner , other div surround on right , bottom margin between them. image below:

enter image description here

is possible, using css3 , html5?

edit: here layout of div's.

<div id="main">     <div id="leftdiv">         here text , image displayed     </div>     <div id="rightdiv">         <div class="profile"><h4>some text</h4><img src="...."></div>         <div class="profile"><h4>some text</h4><img src="...."></div>         <div class="profile"><h4>some text</h4><img src="...."></div>         <div class="profile"><h4>some text</h4><img src="...."></div>         <div class="profile"><h4>some text</h4><img src="...."></div>         ..............     </div> </div> 

you try fake effect pseudo-elements top-left container.

.first {     position: relative;     float: left;     height: 30px;      width: 30px;     border: 1px solid black;     margin: 0 5px 5px 0; }  .first:after {     content: '';     position: absolute;     top: -1px;     right: -5px;     height: 35px;     width: 3px;     background-color: #fff;     border-right: 1px solid black; }  .first:before {     content: '';     position: absolute;     bottom: -5px;     left: -1px;     height: 3px;     width: 35px;     background-color: #fff;     border-bottom: 1px solid black; }  .second {     height: 80px;      width: 100px;     border: 1px solid black; } 

see fiddle: http://jsfiddle.net/fqsdp/2/


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -