Aligning Two Divs Side-By-Side

Aligning two divs side-by-side

If you wrapped your divs, like this:

<div id="main">
  <div id="sidebar"></div>
  <div id="page-wrap"></div>
</div>

You could use this styling:

#main { 
    width: 800px;
    margin: 0 auto;
}
#sidebar    {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin-left: 200px;
}

This is a slightly different look though, so I'm not sure it's what you're after. This would center all 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.

Update based on comments: For this off-centered look, you can do this:

<div id="page-wrap">
  <div id="sidebar"></div>
</div>

With this styling:

#sidebar    {
    position: absolute;
    left: -200px;
    width: 200px;
    height: 400px;
    background: red;    
}

#page-wrap  {
    position: relative;
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin: 0 auto;
}

Aligning multiple divs side by side

.frontpageBoxLeft,.frontpageBoxRight {  border-radius: 5px;  border-color: lightgrey;  background: #ffffff;  height: 150px;}
.left-container {  float: left;  width: 750px;}
.frontpageBoxLeft {  margin-bottom: 15px;  width: 750px;  display: inline-block;  min-height: 100px;  float: right;  position: relative;  outline: 1px solid red;}
.frontpageBoxRight {  width: 540px;  float: right;  height: 300px;  position: relative;  vertical-align: top;  outline: 1px solid red;}
.frontpageBoxContainer {  width: 1300px;  height: 500px;  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  margin: auto;}

<div class="frontpageBoxContainer"><p class="newsfeedheadline">NEWS FEED</p><hr class="hrstarter">  <div class="left-container">  <div class="frontpageBoxLeft" id="1">     et eksempel på en kasse1</div><div class="frontpageBoxLeft" id="2">     et eksempel på en kasse2</div><div class="frontpageBoxLeft" id="3">     et eksempel på en kasse3</div>  </div>
<div class="frontpageBoxRight">     et eksempel på en anden kasse</div></div>

How to make two div align side by side?

You need to add display: inline-block on the elements you wish to align side by side, as div elements have a default style of display: block, meaning they will stack vertically instead of horizontally (not the behaviour you want).

From the looks of it; the shopping cart box is too wide to fit side by side in the content container as well. Make the div with the id centre wider (possibly to 1000px instead of 960px), and coupled with the addition of changing the display property, that should do it.

In terms of the code you need to write directly in order to get this to change, do the following:

#centre {
    width: 1000px;
}

.cartbox {
    display: inline-block;
}

EDIT: I modified these changes to your website locally and it appears to have worked.

Sample Image

How can i place two divs side by side and a third div aligning with the second

You can do this with below:

    .wrapper {      display: flex;      flex-wrap: wrap;      justify-content: flex-end;    }        .div {      flex-basis: 50%;      min-height: 100px;    }        .div1 {      background: red;    }    .div2 {      background: blue;    }    .div3 {      background: aqua;    }

<div class="wrapper">  <div class="div div1">div1</div>  <div class="div div2">div2</div>  <div class="div div3">div3</div></div>

Align 2 Divs side by side

#content {  background:#eee;  width: 300px;  height:auto;  float: left;}     
#sidebar {  background:#c00;  width: 200px;  height:auto;  float:left;}

<div id="content">Content</div><div id="sidebar">Sidebar</div>

Is it possible to align two DIVs side by side if one is fixed?

I tried to write this code and it is responsive too.

* {
    padding: 0px;
    margin: 0px;
}
#one {
    float: left;
    position: fixed;
    width: 25%;
    background: #666;
    height: 100%;
}
#two {
    box-sizing: border-box;
    padding: 20px;
    position: absolute;
    left: 25%;
    right: 0%;
    float: right;
    width: 75%;
    background: #333;
}

I hope this helps.

How to align two divs side by side when one has margin auto

The problem is the display - to make your centering work you need the element to be a block:

.papertextfield {  width: 200px;  margin: auto;  background-color: red;  display: block;}

<iframe name="textfield" id="textareathingy" class="papertextfield"></iframe>

align two divs side by side with floating (responsive)

I think this is what you are after. display: flex; is very powerful property and useful when it comes to take up rest of the space and centering.

Modification

here is a demo, I would not suggest this approach with using max-width as it's not "mobile-first". But if this is what you want for this project then ok.

.container {
  display: flex;
  flex-direction: row;
  background-color: deepskyblue;
}

#img {
  width: 140px;
  height: 140px;
}

#text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  background-color: deeppink;
  min-height: 100px;
}

@media screen and (max-width: 700px) {
  .container {
    flex-direction: column;
  } 

  #img {
    width: 100%;
    height: auto;
  }
}

.container {  display: flex;  background-color: deepskyblue;}
#img {  width: 140px;  height: 140px;}
#text {  display: flex;  align-items: center;  justify-content: center;  flex-grow: 1;  background-color: deeppink;}

<div class="container">  <img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png" />  <div id="text">text on the left, next to the img</div></div>

Align two divs side by side covering entire page width

No have problem with your code... Divs are aligned side by side...

.container {  width: 100%;}
.left,.right {  float: left;  width: 50%;    border: 1px solid red;  box-sizing: border-box;}

<div class="container">  <div class="left">    (an image)  </div>  <div class="right">    (some divs and other text)  </div></div>

Aligning Two Divs Side-By-Side