CSS Overlapping Issue With Divs

Я пытаюсь сделать что-то с CSS и HTML, что, похоже, не работает для меня. Это мой CSS и HTML:CSS Overlapping Issue With Divs

#site p { 
margin-left: -625px; 
margin-right: -400px; 
} 

#wikicontent { 
top: 331px; 
left: 144px; 
position:fixed; 
background: #E0E0E0; 
border-radius: 15px 0px 0px 15px; 
height: 100px; 
} 

#site { 
border-radius:15px 15px 15px 15px; 
background: #fff; 
width: 1075px; 
margin-left: auto; 
margin-right: auto; 
box-shadow: 0px 0px 15px 0px #000; 
padding: 2px; 
-moz-box-shadow: 0 0 15px 0px #000; 
-webkit-box-shadow: 0 0 15px 0px #000; 
} 

#site h3 { 
margin-right: 30px; 
margin-left: 30px; 
text-align: left; 
} 


<html> 
<div id="site"> 
<div id="wikicontent"> 
<h3>Testing</h3> 
</div> 
<p>This is some really long text for an example. And I'm still writing an example. This is really looooooooooooooooong. Looooooooooong. This is just an example of the text.</p> 
</div> 
</html>

Проблема заключается в DIV «wikicontent» перекрывает текст, предотвращая его показали. Есть ли способ установить границу, чтобы предотвратить перекрытие?

Вот пример того, что происходит: http://prntscr.com/6q1p9m

Спасибо за вашу помощь.

источник

2015-04-05 JugglingBob

Можете ли вы создать jsfiddle, чтобы мы могли быстрее и проще решить вашу проблему? –

Почему вы установили wiki ... исправили? – Legends

@Legends В настоящий момент это не нужно, но когда div 'site' становится длиннее с большим количеством текста, мне нужен div 'wikicontent' для прокрутки вниз. – JugglingBob

Yo!

Там вы идете: http://jsfiddle.net/Bladepianist/wxe0L4xb/

Это не реагирует на все, хотя. Мне пришлось играть с полями, отображением и процентом в процентах, чтобы отобразить его на вашем примере.

#site p { 
    width: 88%; 
    margin-left: 11%; 
    display: inline-block; 
} 
#wikicontent { 
    position:fixed; 
    background: #E0E0E0; 
    display: inline-block; 
    border-radius: 15px 0px 0px 15px; 
    height: 68px; 
    width: 10%; 
} 
#site { 
    border-radius:15px 15px 15px 15px; 
    background: #fff; 
    width: 1075px; 
    padding: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    box-shadow: 0px 0px 15px 0px #000; 
    -moz-box-shadow: 0 0 15px 0px #000; 
    -webkit-box-shadow: 0 0 15px 0px #000; 
} 
#site h3 { 
    margin-right: 30px; 
    margin-left: 30px; 
    text-align: left; 
}

Серьезно надеюсь, что это поможет вам решить вашу проблему.

источник

2015-04-05 22:39:47 Bladepianist

УДИВИТЕЛЬНО! Спасибо, Bladepianist, я ценю это! – JugglingBob

CSS Overlapping Issue With Divs

ответ

Смежные вопросы