Two dynamic divs positioned next to a div with a set size

Question

Two dynamic divs positioned next to a div with a set size

I am struggling with the layout of placing two fluid divs next to one that has a fixed size. Let me show you a picture to better illustrate my issue:

#menu has a fixed width;

#owl takes up 60% of the wrapper;

#right menu takes up 40% of the wrapper.

For a larger view of the picture, please visit http://prntscr.com/5071zd
Thank you in advance.

html css responsive-design

Answer 1

Answer №1

Take a look at this solution. I moved the right section to a new div to ensure it fills up the entire width. The only issue is that the second margin must be set as a percentage if you want to avoid using 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

Take a look at this solution. I moved the right section to a new div to ensure it fills up the entire width. The only issue is that the second margin must be set as a percentage if you want to avoid using 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 3

Answer №2

When you set the width of #owl to 60%, it will occupy 60% of the parent div #wrapper.

The calculation for width is as follows: #owl width + #right-menu width + #menu width = 60% + 40% + 100px.

It is recommended to group your #owl and #right-menu together in a single div for better organization.

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

http://jsfiddle.net/x8mnqv7b/

Answer 4

When you set the width of #owl to 60%, it will occupy 60% of the parent div #wrapper.

The calculation for width is as follows: #owl width + #right-menu width + #menu width = 60% + 40% + 100px.

It is recommended to group your #owl and #right-menu together in a single div for better organization.

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

http://jsfiddle.net/x8mnqv7b/

Answer 5

Answer №3

We can make the markup simpler by organizing it as follows:

The HTML code becomes:

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

Please note that in this example, I haven't included a container, but you can add one if necessary.

CSS Styling

The max-width: 1024px rule is applied to the body element to center it using margin: 0 auto
To ensure proper alignment, vertical-align: top is used in conjunction with display: inline-block. This prevents any misalignment that could occur due to the default baseline vertical-align value.
The left and right flexible columns have a width of calc(x% - 60px) to account for 10px spacing and the left menu. In case of older browsers (such as IE 8 and below), a less optimized width is provided, offering graceful degradation for older browser support.
Setting min-height: 100% on the columns allows them to expand with content. The 100% height is achieved through height: 100% on html,body

Interactive Example

Pay attention to the use of  in the code. This is done to eliminate any gaps that may appear 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>

Answer 6

We can make the markup simpler by organizing it as follows:

The HTML code becomes:

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

Please note that in this example, I haven't included a container, but you can add one if necessary.

CSS Styling

The max-width: 1024px rule is applied to the body element to center it using margin: 0 auto
To ensure proper alignment, vertical-align: top is used in conjunction with display: inline-block. This prevents any misalignment that could occur due to the default baseline vertical-align value.
The left and right flexible columns have a width of calc(x% - 60px) to account for 10px spacing and the left menu. In case of older browsers (such as IE 8 and below), a less optimized width is provided, offering graceful degradation for older browser support.
Setting min-height: 100% on the columns allows them to expand with content. The 100% height is achieved through height: 100% on html,body

Interactive Example

Pay attention to the use of  in the code. This is done to eliminate any gaps that may appear 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>

Two dynamic divs positioned next to a div with a set size

Answer №1

Answer №2

Answer №3

CSS Styling

Interactive Example

Similar questions

What is the best way to use JavaScript to conceal a section of a form div?

Using AngularJS to update attributes in an HTML tag within a string

Using javascript to dynamically change text color depending on the selected item

The Ajax success function is failing to trigger after receiving a 200 network response

Addressing a pagination glitch

Pictures failing to display in their designated location

The menu content has a 50% chance of appearing when the open menu button is clicked

Sophisticated Arrangement of Div Elements

Trigger a function from a Bootstrap modal

Achieving Vertical Centering in Bootstrap: A Step-by-Step Guide

swap the positions of two distinct texts

Modify the select input's border color when it is in focus

I'm facing an issue with the footer and header that is preventing me from properly positioning any content on the website

:last-child is effective, but :first-child is inefficient

Is PHP the best choice for creating simple websites?

Exploring ways to retrieve checkbox values instead of boolean values upon submission in Angular

Transferring information between pop-up and webpage

Can the CSS of an iframe be modified if the iframe is located on a different domain?

Execute an AJAX request and dynamically update the page when the button is clicked simultaneously

Having trouble with clearing divs function not working as expected