html - Display three blocks inline CSS -
i have 3 div
's, #left_sidebar
, #records_list
, #right_sidebar
, want display them inline, when using display:inline-block
, seems fine sidebars placing on bootom of page, try use float
, still getting creppy behavior, this:
#left_sidebar { top: 0px; width: 142px; float: left; } #records_list { width: 530px; display: inline-block; } #right_sidebar { background-image: url('../images/enstein_banner.png'); width: 174px; height: 231px; float: right; }
(you see mix float
's , display
), , works fine, can explain me, if right? or need somehow else? thanks!
p.s. if need more info, or little bit unclearly asking say, , try improve question.
#left_sidebar { width: 10%; padding: 20px; background: red; float: left; margin-right: 1%; color: #fff; } #records_list { width: 50%; padding: 20px; background: red; float: left; margin-right: 1%; color: #fff; } #right_sidebar { background-image: url('../images/enstein_banner.png'); width: 15%; padding: 20px; background: red; height: 231px; float: left; color: #fff; }
<div class="wrapper"> <div id="left_sidebar">left bar</div> <div id="records_list">center part</div> <div id="right_sidebar">right bar</div> </div>
please check this
Comments
Post a Comment