Two fluid divs nex to one with fixed size

Question

I have a problem with placing two fluid divs next to one with fixed size. This picture will better explain what I'm trying to do

#menu is with fixed width;

#owl is 60% of the wrapper;

#right menu is 40% of the wrapper

Bigger version of the picture http://prntscr.com/5071zd
Thank in advance.

Answer 1

Please check this solution. I have warped the right part to a new div to set the width 100%. The only problem is that second margin has to be added as percentage if you want to avoid calc() .

 #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; } 

 <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/

Answer 2

the #owl width: 60% will take 60% of the parent div #wrapper.

. #owl width + #right-menu + #menu = 100px + 60% + 40% .

Is better ifcan you wrap your #owl and #right-menu together is one div.

<div id="wrapper">
    <div id="#menu></div> // 100px
    <div class="inner-warpper> // this will take the rest of the #wrapper width
        <div id="owl"></div> width 60% of the #inner-wrapper
        <div id="right-menu"></div> width 40% of the #inner-wrapper
   </div>
</div>

http://jsfiddle.net/j2arkx66/

Answer 3

We can simplify the markup a little.

HTML is reduced to:

<div id="menu"></div>
<div id="owl"></div>
<div id="right"></div>

Note: I have created this example without a container, but a container could be used if really needed.

The CSS

• max-width: 1024px is placed on the body which will be centered with margin: 0 auto

• vertical-align: top to go along with display: inline-block is going to come in handy when you add text. This prevents the columns from being dragged down as the default vertical-align value is baseline

• The left and right flexible columns are given width: calc(x% - 60px) to account for the 10px gaps and the left menu between them. Older browsers ( IE 8 and below ) are accounted for with an un-optimised width. This is a great opportunity for graceful degradation in older browsers.

• The min-height: 100% on the columns allow them to stretch with content. The 100% height is received through the height: 100% on html,body

Working Example

Note the use of <!-- --> . This is to remove a gap that occurs when using inline elements.

 * { box-sizing: border-box; } html { height: 100%; } body { margin: 0; height: 100%; max-width: 1024px; margin: 0 auto; } #menu { width: 100px; border: 4px solid black; min-height: 100%; display: inline-block; vertical-align: top; margin-right: 10px; } #owl { width: 50.5%; width: calc(60% - 60px); border: 4px solid red; display: inline-block; vertical-align: top; min-height: 100%; margin-right: 10px; } #right { width: 30.5%; width: calc(40% - 60px); border: 4px solid green; display: inline-block; vertical-align: top; min-height: 100%; } 

 <div id="menu">menu</div><!-- --><div id="owl">owl</div><!-- --><div id="right">right</div>