How to position three divs horizontally


Tags: html,css

Problem :

I want to get structure like this:

---------------------------------------------
| head                                      |
---------------------------------------------
|left-menu||---content-div-------------------
| fixed   ||                     |          |
|         ||    content-left     | con-right|
|         ||--------------------------------| 

css file:

.left-menu {
    position:fixed; /* fix menu, no scroll  */
    left:0;
}
.content-div {
    position:absolute;
    float:right;
    left:150px;
}
.content-right {
    width: 310px;
    float: right;
}
.content-left {
    float: left;
}

divs:

<div>
    <div class="left-menu" >    </div>

    <div class="content-div">
        <div class="content-left">  </div>
        <div class="content-right"> </div>
    </div>
</div>

I get content-right in the next line, not in the same line with content-left, like i have content-left width=105%, but i don't. I tried this and some other suggestion, but no luck. How can i fix this problem?



Solution :

Flexbox can do that.

* {
  margin: 0;
  padding: 0;
}
.parent {
  display: flex;
  height: 100vh;
}
.left-menu {
  position: fixed;
  /* fix menu, no scroll  */
  left: 0;
  width: 150px;
  background: red;
  height: 100%;
}
.content-div {
  margin-left: 150px;
  background: blue;
  flex: 1;
  display: flex;
}
.content-right {
  flex: 0 0 310px;
}
.content-left {
  flex: 1;
  background: orange;
}
<div class="parent">
  <div class="left-menu"></div>
  <div class="content-div">
    <div class="content-left"></div>
    <div class="content-right"></div>
  </div>
</div>


    CSS Howto..

    How to organize CSS Sheets [closed]

    How to select any item preceded by some word in CSS

    how to remove selected option background color in IE browser through css?

    how to deselect the active span element?

    How do I add a border to an (8 point star) css shape?

    How to create CSS styled dom element inside Google Maps InfoWindow?

    How do you get the height of a form div + error messages after hitting the submit button in javascript?

    How to Highlight a list item after user clicks on link

    How can I get text to be vertically-aligned to the bottom and fill the empty space above it as needed?

    How to apply an active state to a CSS sprite?

    how to set css for html page opened by 'appAPI.openURL' in crossrider

    how to make menu on mouse hover in CSS

    How to Change Css coding with a link [closed]

    How to reset css before repeating sequence

    How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?

    How to use CSS to vertically center a form in a div

    How to set numerous links in a single line with CSS?

    How not to override property in CSS

    How to change tinymce scrollbar color?

    How to show parts of sprite with CSS keyframes to create animation?

    How to transform (move whole child dives) div to max width with css?

    Gantry Framework-Joomla How to edit logo from CSS

    How to highlight a row in a table on certain occasions

    How to display grid line on top of highchart

    custom radio button show value inside

    How to code vertical banner

    TUMBLR CSS - How to move the caption on the permalink page to the right of the image

    How to reflow DIV boxes in CSS to stick to bottom right?

    How to align text and buttons next to canvas (WebGL + JavaScript + CSS)

    how to put css max-left or min-left position to absolute object?