I followed a Q&A from other thread to center 2 DIV which is inside a div but not solve. I added text-align center to outer DIV and display inline-block to both left and right DIV. Pls try to let me know what is lacking... Here is jsfiddle
HTML:
<div class="indexDiv" id="noPad">
<div class="results">
<div id="topResults">Top</div>
<div id="refineResults">Left</div>
<div id="listingsResults">Right</div>
</div>
</div>
CSS:
.indexDiv {
overflow: hidden;
width: 993px;
background: #ffffff;
margin: 0 auto;
padding: 10px;
}
.Results {
color: #D5241B;
font-size: 20px; font-weight: bold;
/* margin: 4px 0 8px;*/
border: 1px solid #D9D9D9;
}
.Results {
/* padding: 10px;*/
text-align: center;
width: 930px;
margin:0 auto;
}
#topResults {
float: right;
width: 100%;
margin: 0 0 10px 0;
border: 1px solid #D9D9D9;
}
#refineResults {
/* float: left;*/
width: 200px;
display: inline-block;
/* padding: 5px; */
border: 1px solid #D9D9D9;
}
#listingsResults {
/* float: right;*/
width: 715px;
/* margin-left:18px;*/
border: 1px solid #D9D9D9;
display: inline-block;
/* padding: 5px; */
}
CSS class selectors are case-sensitive. You have .Results
, which doesn't select your element with class = "results"
. Replace it with .results
; here's a fixed demo: little link .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.