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 do I center a table?

    How to add some non-standard font to a website?

    How to prevent bootstrap css class to override my custom css class

    CSS Divs overlapping, how do I force one above the other?

    How to add spacing between checkboxlist items?

    How do I hide the borders around checkboxes in an ASP.Net CheckBoxList control with jQuery?

    How implement google fonts when download the font in collection?

    CSS div element - how to show horizontal scroll bars only?

    How do I make the dropdown menu width the same as the tab size?

    css - how to stretch and auto-resize background image

    How to scale a website for mobile devices?

    How to change color of Bootstrap warning class table row

    how to set the background color of the whole page in css

    How to change position of a sphere overtime using css

    How to separate form with horizontal line

    How to use CSS hover inside html-tag?

    Yii2 how to include multiple css files from specific view or controller action

    How to create a css file in eclipse with e(fx)clipse plug in

    How to debug less css variables

    CSS :hover - How to get lower DIVs to :hover as well?

    How to get rid of excess blank space in CSS slideshow without getting rid of manual button transition?

    How can I set the body color of a web page to the current width and height of the monitor?

    how to change the cssclass of a div after press a button in asp.net c#?

    How can I apply a CSS modification with a button [closed]

    How show button hovering above an image or pressing over it? [closed]

    How to get the “declared” CSS value, not the computed CSS value

    How to select all fields from a single box?

    How do I convert HTML to inline CSS in Google AppEngine?

    How to select html5 range's pseudo-elements in JavaScript

    How to make a CSS horizontal navigation menu?