Make Column and Main Content Stay on Left or Right, as Browser Is Resized

Why do my columns wrap with window resize?

You have specified different width for first column and other columns, to make it resizeable they should be given percentage width or you have to use bootstrap CSS.

And also with margin it will not work with same percentage width. in this case you have to calculate each column width after applying margin/padding with relative to window/document width and then apply in width style. You have to also calculate the same on window resize event.

Remove margin from your column style and add below one property:

box-sizing:border-box;

For testing purpose I have change your first column width to 200px, better to assign 25% width to each column to test.

#ColumnMain {      width: 100%;      height: auto;      float: left;      margin-left: auto;      margin-right: auto;      min-width: 44%    }
    .col1 {      float: left;      padding: 10px 20px 15px 20px;            width: 200px;      height: 100px;      border-left: solid 1px #35488C;      box-sizing:border-box;    }
    .col2 {      float: left;      padding: 10px 20px 15px 20px;            width: 22%;      height: 100px;      border-left: solid 1px #35488C;      box-sizing:border-box;    }
    .col3 {      float: left;      padding: 10px 20px 15px 20px;           width: 22%;      height: 100px;      border-left: solid 1px #35488C;      overflow: hidden;      box-sizing:border-box;    }
    .col4 {      float: left;      padding: 10px 20px 15px 20px;           width: 22%;      height: 100px;      border-left: solid 1px #35488C;      Overflow: hidden;      box-sizing:border-box;    }

<div class="columns" id="ColumnMain">  <div class="col1">content</div>  <div class="col2">content</div>  <div class="col3">content</div>  <div class="col4">content</div></div>

The elements on my page move when the page is resized

We ideally need to see the html of your header, but here's an example:

The header is set to display: flex and flex-direction: row keeps it from wrapping.

The button-container inside the header is the same.

The magic is justify-content: space-between - this pushes each child under <header> out to the left and right, and because we have flex-direction on the button-container, they don't wrap.

Try the snippet below and resize to see it in action.

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

header .button-container {
  display: flex;
  flex-direction: row;
}

<header>
  <div class="greeting">Hello, name</div>
  <div class="button-container">
    <div class="button">Button 1</div>
    <div class="button">Button 1</div>
  </div>
</header>

Prevent div from moving while resizing the page

1 - remove the margin from your BODY CSS.

2 - wrap all of your html in a wrapper <div id="wrapper"> ... all your body content </div>

3 - Define the CSS for the wrapper:

This will hold everything together, centered on the page.

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

Elements move when browser is resized

Give your wrapper a min-width, and declare a max-width/width. You will get a horizontal scrollbar, but your 'elements' will stay in position. Your 'elements' naturally flow with the viewport size, so if you shrink the browser, the 'elements' are supposed to move with the flow. If you declare that the viewport is a certain size, then the flow will move within the new size.

Hope this helps.

P.S. - IE7/8 doesn't like min-width or max-width, so you will have to either use Modernizr, or Google for a CSS hack.

Align cards next to each other when the screen is resized

If you are perfectly okay to got with display: flex, go with this approach.

Add display: flex to .actions

Add display: flex; flex: 0 1 200px; to .column. This will set flex-grow: 0, flex-shrink: 1 and flex-basis: 200px; This will the element a maximum width of 200px and shrink below that if resized.

.actions {
  justify-content: center;
  display: flex;
  height: 200px;
  width: auto;
  margin: 0 15px;
  margin-left: 250px;
  margin-top: 400px;
  flex-wrap: nowrap;
}

.cards {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  opacity: 0.5;
  height: 200px;
  width: calc(100/4);
  text-align: center;
  background-color: #f1f1f1;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 2px;
  border-radius: 20px;
  color: #95a7b7;
  margin: auto;
}

.column {
  /* float: left; */
  margin: auto;
  display: flex;
  flex: 0 1 200px;
  max-width: 100%;
}

<div class="actions">
  <div class="column">
    <div class="cards">
      <div class="content">
        <h2><a href="#"> About </a></h1>
          <p> Here you can find more about myself </p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="cards">
      <div class="content">
        <h2><a href="#"> Interest </a></h1>
          <p> Here you can find the list of my interests and the blogs that I have created</p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="cards">
      <div class="content">
        <h2><a href="#"> Notes </a></h1>
          <p> Here you can find the list of my notes and things that I like to keep track of. You might not be able to
            access to all informatio</p>
      </div>
    </div>
  </div>
</div>

Content Moves when resizing

If you want the image and headerText stay side by side, you must give them enough room to do so. Add an appropriate width to the #wrapper

#wrapper {
    margin-left: auto;
    margin-right: auto;
    width:960px;
}

JSFiddle (wrapper/width)

If you always want to occupy the whole width, use min-width instead

#wrapper {
    margin-left: auto;
    margin-right: auto;
    min-width:960px;
}

JSFiddle (wrapper/min-width)

Text inside div moves right or left when resize window

Well, maybe i didn't explain myself.
However, i've already fixed, took a very large time to figure out. Time for me and anyone who wants to compare:

CSS

.headbar {
position:fixed;
width: 100%;
height: 42px;
margin: 0px auto;
background-color: #9B9595;
background-image: -moz-linear-gradient(#B6AAAA,#000000);
background-image: -webkit-gradient(linear,0% 0,0% 100%,from(#B6AAAA),to(#000000));
background-image: -webkit-linear-gradient(rgb(177, 185, 185),rgb(73, 68, 73));
background-image: -o-linear-gradient(#B6AAAA,#000000);
border-bottom: 1px solid #A29A9A;
z-index: 3000;
opacity: 0.65;
}

#menu {
margin: 0px 332px 0px auto;
width: 48%;
position: relative;
right: 178px;
}

#menu>ul>li {
float:left;
height:27px;
margin-top:13px;
}

.uwpqsf_classsr { 
}

input#uwpqsf_id_keysr {
color: #FFFFFF; 
width:277px;
height:30px; 
padding-left: 32px;
background: rgba(56, 53, 53, 0.12) url(/lupa.png) no-repeat; 
border: 1px solid rgba(0,0,0,0.2);
-webkit-border-radius: 3px; -moz-border-radius: 3px;
}

HTML

<div class="headbar">
                <h1 id="logo">
                    <a href="http://www.peliculadicto.tk" title="Ver peliculas de terror, de miedo, infantiles">Películas buenas</a>
                </h1>
<div id="menu">
<ul>
<li><a href="http://www.peliculadicto.tk">Inicio</a></li>
<li><a href="http://www.peliculadicto.tk/tag/peliculas" class="drop">Peliculas</a></li> 
<li><a href="http://www.peliculadicto.tk/tag/estrenos" class="drop">Estrenos</a></li>           
<li><a href="http://www.peliculadicto.tk/ranking">Ranking</a></li><li><a href="http://www.peliculadicto.tk/archivos/proximamente">Proximamente</a></li>
<li><a href="http://www.peliculadicto.tk/tag/peliculas/?v_sortby=views&v_orderby=desc">Más vistas</a></li>
</ul>
</div>

<div id="uwpqsf_idsr"><form id="uwpqsffrom_641" method="get" action="http://www.peliculadicto.tk/"><div class="uform_titlesr"></div><input type="hidden" name="unonce" value="4b52cced4e"><input type="hidden" name="uformid" value="641"><input type="hidden" name="s" value="uwpsfsearchtrg"><div class="uwpqsf_classsr"><input id="uwpqsf_id_keysr" type="text" name="skeyword" class="uwpqsftext" placeholder="Busca por título, actor, director, género..." value=""></div></form></div>

</div>