CSS вертикальный делитель

Я пытаюсь установить вертикальный разделитель для нижнего колонтитула, но у меня возникают проблемы, поскольку он перекрывается с элементами в моем неупорядоченном списке. Как я могу сделать так, чтобы он перемещался соответственно размеру окна и положению неупорядоченного списка без перекрытия.CSS вертикальный делитель

CSS

html, body { 
    height: 70%; 
} 
#wrap { 
    min-height: 70%; 
} 
#main { 
    overflow: auto; 
    padding-bottom: 140px; 
} 
#footer { 
    position: relative; 
    height: 140px; 
    margin-left: -20px; 
    margin-right: -20px; 
    opacity: 0.8; 
    clear: both; 
    background: #545454; 
} 
#footer-inner { 
    padding-left: 300px; 
} 
#divider { 
    border-left: 1px solid #0099CC; 
    height: 100px; 
    position: absolute; 
    right: 500px; 
    top: 10px; 
    margin: 0 auto; 
    float: center; 
} 




</style>

HTML

<div id="wrap"> 
    <div id="main"> 
    </div> 
</div> 

<div id="footer"> 
<div id = "divider"> 
</div> 

<div id = "footer-inner"> 
    <ul> 
    <li> Info </li> 
    </ul> 

</div>

источник

2013-09-28 gsm4110

пожалуйста скрипку код – Anobik

http://jsfiddle.net/f9LLn/ – gsm4110

CSS

html, body {height: 70%;} 
#wrap {min-height: 70%;} 
#main {overflow:auto; padding-bottom: 140px;} 

#footer { 

position: relative; 
height: auto; 
margin-left: -20px; 
margin-right: -20px; 
opacity: 0.8; 
clear:both; 
background: #545454; 
padding: 15px; 
} 

#footer-inner 
{ 
    Padding:10px 25px; 
    border-right:1px solid #fff; 
    float:left; 
} 

#divider 
{ 
clear:both; 
} 
</style> 
</head> 
<body>

HTML

<div id="wrap"> 
    <div id="main"> 
    </div> 
</div> 

<div id="footer"> 

<div id = "footer-inner"> 
    <ul> 
    <li> Info </li> 
    <li>ABC</li> 
    <li>123</li> 
    </ul> 


</div> 
<div id = "divider"> 
</div> 
</div> 
</body> 
</html>

источник

2013-09-28 07:07:44 navin2013

добавить столько колонки вы хотите здесь скрипка

fiddle

и измененный CSS

html, body {height: 70%;} 

#wrap {min-height: 70%;} 

#main {overflow:auto; 
    padding-bottom: 140px;} 

#footer {position: relative; 
white-space:nowrap; 
    height: 140px; 
    width:inherit; 
    margin-left: -20px; 
    margin-right: -20px; 
    opacity: 0.8; 
    background: #545454; 
    overflow:hidden; 
} 

.footer-inner{ 
    width:auto; 
    float:left; 
    display:block; 
} 

#divider { 
    border-left:1px solid #0099CC; 
    height:100px; 
    position:relative; 
    top:10px; 
    margin: 0 auto; 
    float: left; 
    width:10px; 
}

добавил поплавок налево для всех и добавил ширина нижнего колонтитула ms родительского.

источник

2013-09-28 07:21:39 Anobik

Как это

demo

CSS

*{ 
    margin:0; 
    padding:0; 
} 
html, body { 
    height: 70%; 
} 
#wrap { 
    min-height: 70%; 
} 
#main { 
    overflow: auto; 
    padding-bottom: 140px; 
} 
#footer { 
    position: relative; 
    height: auto; 
    margin-left: -20px; 
    margin-right: -20px; 
    opacity: 0.8; 
    clear: both; 
    background: #545454; 
    padding: 15px; 
    float: left; 
} 
#footer-inner { 
    Padding: 10px 25px; 
    float: left; 
} 
#footer-inner ul{ 
    float:left; 
    border-right: 1px solid #fff; 
    margin:0 30px; 
    padding:0 30px; 

} 

#divider { 
    clear: both; 
}

источник

2013-09-28 07:29:57 falguni

CSS вертикальный делитель

ответ

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