Wednesday 15 July 2015

html - Two fluid divs nex to one with fixed size -



html - Two fluid divs nex to one with fixed size -

i have problem placing 2 fluid divs next 1 fixed size. image improve explain i'm trying do

#menu fixed width;

#owl 60% of wrapper;

#right menu 40% of wrapper

bigger version of image http://prntscr.com/5071zd give thanks in advance.

please check solution. have warped right part new div set width 100%. problem sec margin has added percentage if want avoid calc().

class="snippet-code-css lang-css prettyprint-override">#menu { position: fixed; width: 100px; border: 4px solid black; } #inner_container { width: 100%; padding-left: 110px; } #owl { position: relative; width: 60%; border: 4px solid red; display: inline-block; } #right_menu { position: relative; width: 38%; border: 4px solid green; display: inline-block; margin-left: 2% } #menu, #inner_container, #owl, #right_menu { box-sizing: border-box; } class="snippet-code-html lang-html prettyprint-override"><div id="container"> <div id="menu">menu</div> <div id="inner_container"> <div id="owl">owl</div><!-- --><div id="right_menu">right menu</div> <div> </div>

fiddle: http://jsfiddle.net/wxk7j07k/

html css responsive-design

No comments:

Post a Comment