html - CSS - Clearfix not working when clearing div -
.frame { width: 1000px; position: relative; } .left { float: left; } .right { float: right; } .pre-left, .pre-right { height: 102px; width: 88px; } .pre-left { background-image: url('https://i.stack.imgur.com/bzjjc.png'); } .pre-right { background-image: url('https://i.stack.imgur.com/f2oly.png'); margin-right: -88px; margin-top: -30px; } .pre-mid { background-image: url('https://i.stack.imgur.com/kd1so.png'); width: auto; display: block; height: 30px; margin-left: 88px; } .after-left, .after-right { height: 53px; width: 79px; } .after-left { background-image: url('https://i.stack.imgur.com/wml1g.png'); margin: 19px 0px -40px -65px; } .after-right { background-image: url('https://i.stack.imgur.com/gddhd.png'); margin: -34px -65px -40px 0; } .after-mid { background-image: url('https://i.stack.imgur.com/jh00z.png'); width: auto; display: block; height: 53px; margin: 19px 0px -19px 14px; } .group:before, .group:after { content: ""; display: table; } .group:after { clear: both; } .group { zoom: 1; /* ie 6/7 (trigger haslayout) */ z-index: 100; } .content { position: absolute; background-color: rgba(0, 0, 0, 0.3); width: calc(100% - 42px); margin: 24px 0 24px 13px; padding: 30px 35px 0 35px; border-left: 17px solid transparent; border-right: 17px solid transparent; border-image: url("https://i.stack.imgur.com/nxc4d.png") 0% 50%; background-image: url("https://i.stack.imgur.com/qcznd.jpg"); background-size: cover; color: #fff; z-index: -1; }<div class="group frame"> <div class="content"> <p> du er boos </p> <p> du er boos </p> <p> du er boos </p> <p> du er boos </p> <div class="group after-group"> <span class="left after-left"></span> <span class="after-mid"></span> <span class="right after-right"></span> </div> </div> <div class="group"> <span class="left pre-left"></span> <span class="pre-mid"></span> <span class="right pre-right"></span> </div> </div> clearfixi having issues clearfixing page.
i got looking wanted to, reason cannot clearfix elemtent! have no idea wrong , have tried searching loads of different solutions - none working in case.
so issue here? need set of eyes on problem.
css - clearfix not working when clearing div
hi,
some minor changes , code run perfectly.
<!doctype html> <html> <head> <title>page title</title> <style> .frame { width:1000px; position:relative; } .left { float:left; } .right { float:right; } .pre-left, .pre-right { height:102px; width:88px; } .pre-left { background-image:url('images/frames_01.png'); } .pre-right { background-image:url('images/frames_04.png'); margin-right:-88px; margin-top: -30px; } .pre-mid { background-image:url('images/frames_02.png'); width:auto; display:block; height:30px; margin-left: 88px; } .after-left, .after-right { height:53px; width:79px; } .after-left { background-image:url('images/frames_10.png'); margin: 19px 0px -40px -65px; } .after-right { background-image:url('images/frames_13.png'); margin:-34px -65px -40px 0; } .after-mid { background-image:url('images/frames_11.png'); width:auto; display:block; height:53px; margin:19px 0px -19px 14px; } .group:before, .group:after { content: ""; display: table; } .group:after { clear: both; } .group { zoom: 1; /* ie 6/7 (trigger haslayout) */ z-index:100; } .content { position:absolute; background-color:rgba(0,0,0,0.3); width: calc(100% - 42px); margin: 24px 0 24px 13px; padding: 30px 35px 0 35px; border-left:17px solid transparent; border-right:17px solid transparent; border-image: url("images/frames_06.png") 0% 50%; background-image:url("images/framebg.jpg"); background-size:cover; color:#fff; z-index:-1; } .group.frame { position:relative; } .group.frame .content + .group { position: absolute; top: 0px; left: 0; right: 0px; } </style> </head> <body data-gr-c-s-loaded="true" cz-shortcut-listen="true"> <div class="group frame"> <div class="content"> <p> du er boos </p> <p> du er boos </p> <p> du er boos </p> <p> du er boos </p> <div class="group after-group"> <span class="left after-left"></span> <span class="after-mid"></span> <span class="right after-right"></span> </div> </div> <div class="group"> <span class="left pre-left"></span> <span class="pre-mid"></span> <span class="right pre-right"></span> </div> </div> clearfix </body> </html> 
Comments
Post a Comment