Как избежать перекрытия блоков? ⇐ CSS

[Anonymous]

enter image description here

Hi! I can't get rid of mixing the block with the "light bulb" and the floating block on the right. I would like the left block not to run over the right one. Parameters of the left block in the template body:

[[File:Line-style-icons-lightbulb.svg|14px|link=]]'''Совет:''' {{#if: {{{1|}}}|{{{1}}}}}{{Doc}} Parameters of the right floating block in the template body:

Class p-summary in Common.css:

div#p-summary p, div#p-summary dl, div.p-summary p, div.p-summary dl { margin: 0; } div#p-summary dl, div.p-summary dl { clear: both; } div#p-summary, div#p-summary dl, div#p-summary dt, div#p-summary dd, div#p-summary strong, div.p-summary, div.p-summary dl, div.p-summary dt, div.p-summary dd, div.p-summary strong, div.summarybox div.p-summary-title { line-height: 1.1; } div#p-summary dt, div#p-summary dd, div#p-summary div.p-summary-line, div.p-summary dt, div.p-summary dd, div.p-summary div.p-summary-line, div.summarybox div.p-summary-line { border-top: 1px solid #B1DBF9; padding: 0.35em 0em 0.3em; display: block; position: relative; overflow: hidden; } div#p-summary, div.p-summary { float: right; clear: right; width: 300px; padding-top:0.4em !important; } div#p-summary, div.p-summary, div.summarybox { padding: 0em 0.5em 0.5em 0.6em; margin: 0 0 1em 1em; border-left: 2px solid #CBE1EC; border-right: 6px solid #CBE1EC; border-top: 1px solid #CBE1EC; border-bottom: 1px solid #CBE1EC; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px; } div#p-summary div.thumbinner, div.p-summary div.thumbinner, div.summarybox div.thumbinner { background: white; border-color: #7FC7FF; } div#p-summary img.thumbimage, div.p-summary img.thumbimage, div.summarybox img.thumbimage { border: none; } div#p-summary div.magnify, div.p-summary div.magnify, div.summarybox div.magnify { display: none; } div#p-summary ol, div.p-summary ol, div.summarybox ol { margin-left: 2em; } div#p-summary p br, div.p-summary p br { display: none; } div#p-summary dt, div#p-summary div.p-summary-left, div.p-summary dt, div.p-summary div.p-summary-left { float: left; clear: both; width: 147px; font-weight: normal; font-size: 10pt; } div#p-summary dd, div#p-summary div.p-summary-right, div.p-summary dd, div.p-summary div.p-summary-right { float: right; clear: none; margin: 0; width: 150px; font-size: 10pt; } div#p-summary strong, div.p-summary strong { display: block; clear: both; padding: 0.75em 0; } div#p-summary strong.p-summary-title, div.p-summary strong.p-summary-title { padding: 0 0 0.25em; font-size: x-large; } div#p-summary div.p-summary-line, div.p-summary div.p-summary-line { clear: both; font-size: 9pt; } .p-summary-tools, .p-summary-tools *, .p-summary-tools a, .p-summary-tools a:link, .p-summary-tools a:active, .p-summary-tools a:hover, .p-summary-tools a:visited, .p-summary-tools a:focus { color: #467AD0; list-style-type: none; list-style-image: none; font-size: 9pt; font-weight: normal; } div.summarybox .p-summary-title a, div.summarybox .p-summary-title a:link, div.summarybox .p-summary-title a:active, div.summarybox .p-summary-title a:hover, div.summarybox .p-summary-title a:visited, div.summarybox .p-summary-title a:focus { color: inherit; } .p-summary-tools ul { margin-left: 0.5em; } .p-summary-line .thumbcaption { display: none !important } .p-summary sup.reference::before { content: " " } .p-summary sup.reference { vertical-align:middle !important } .p-summary sup.reference a { color: #006400 !important } I experimented with the "position" parameter in both templates, substituted different values, but the overlap does not disappear. I would like the blocks to be adjacent horizontally without crossing borders.


Источник: https://stackoverflow.com/questions/781 ... ing-blocks