I’ve tried everything I could think of, including google-ing incessantly for an answer. On my webpage: http://eric-garduno.com/. The two rightmost columns shift downwards when I resize the window and make it smaller. This happened with all the columns except for the leftmost one when I switched from float to inline-block and vertical-alignment:top. I’m new to coding, but I’ve done pretty well so far until this point. Does anyone have any suggestions as to why the columns behave as they would with the float property and how I can solve this?

Thanks in advance…coding is pretty fun until I realize how little I know.

@import url("../../xone/style.css");
/*---------------------------------------------- 
13. COLUMNS GRID
------------------------------------------------*/
.column-section { margin-top: 0px; }
div .column-section:first-child { margin-top: 0px; }
.column { 
    float:none;
    display: inline-block !important;
    vertical-align:top !important;
    margin-right:5px;
    border-radius:5px;
    -moz-border-radius:5px; 
    -khtml-border-radius:5px; 
    -webkit-border-radius:5px;
    }
.column .bg-col-inner {
    padding: 5px;
    }
aside .column { width: 100% !important; float: none !important; margin-right: 0 !important; }
.last-col {float:none; overflow:hidden; margin-right: 0px !important; }
/*---------------------------------------------- 
3. HEADER
------------------------------------------------*/
header {display:none;}
header.header-overlay {display:none;}
#navmenu {display:none;} 
/*---------------------------------------------- 
15. ELEMENTS / SHORTCODES
------------------------------------------------*/
a.sr-button {
    display: inline-block;
    font-family: 'Open Sans';
    font-weight: 600;
    line-height: 22px !important;
    letter-spacing: 0.15em; 
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 50px;
    border-radius: 3px;
    position:absolute;
    bottom:0;
    left:0px;
    -moz-border-radius:3px; 
    -khtml-border-radius:3px; 
    -webkit-border-radius:3px;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
    }
a.medium-button { font-size: 13px; padding: 12px 42px; }
a.sr-button4 {  border: 2px solid #ffffff; color: #ffffff;  background: transparent; }
a.sr-button4:hover { background-color: #ffffff; color: #262626; }
a.sr-button_1 {
    display: inline-block;
    font-family: 'Open Sans';
    font-weight: 600;
    line-height: 22px !important;
    letter-spacing: 0.15em; 
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 110px;
    border-radius: 3px;
    position:absolute;
    bottom:0;
    left:0px;
    -moz-border-radius:3px; 
    -khtml-border-radius:3px; 
    -webkit-border-radius:3px;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
    }
a.sr-button_1:hover {
    background-color: #ffffff;
    color : #1a1a1a;
    transform: scale(1.07);
    -ms-transform: scale(1.07); 
    -webkit-transform: scale(1.07);
    }
a.medium-button_1 { font-size: 13px; padding: 12px 54.5px; }
/*---------------------------------------------- 
22. CUSTOM
------------------------------------------------*/
#tight {
    width:900px;
    margin:0px 0px 0px 21px;
    overflow:hidden;
    }
/*---------------------------------------------- 
2. GENERAL ELEMENTS
------------------------------------------------*/
#page-content {
    overflow: hidden;
    margin: 0
    width:100%;
    }
.wrapper {
    width: 100%;
    overflow:visible;
    margin: 0 !important;
    }
.main-content {
    width: 100%;
    }
    .main-content.no-sidebar { margin: 0 !important; }
/*
<div id="tight">
<div class="column one-fourth" style="position:relative; margin: 0px 1px 0px 0px;padding:1px;background: #c6c6c6; width: 148px; height: 498px;">
<p style="line-height: 5px; position:relative;margin: 25px 0px 0px 10px;font-size: 65px; font-family: titillium web; font-weight: 600; color: #2e2e2e; text-align: left;">ERIC</p>
<p style="margin: 30px 0px 0px 13px; font-size: 28px; font-family: titillium web; font-weight: 600; color: #424242;">GARDUNO</p>
<a class="sr-button sr-button4 medium-button" href="http://eric-garduno.com/wp-content/uploads/2014/07/Eric-Garduno-Acting-Resume-NYC.pdf" target="_blank">Resume</a>
</div>
<div class="column one-fourth" style="margin: 0px 1px 0px 0px;padding:1px; background: #c6c6c6; width: 240.71px; height: 498px;">
<div class="bg-col-inner">
Column 2
</div>
</div>
<div class="column one-fourth" style="padding: 1px; background: #c6c6c6; width: 390.71px; height: 498px;">
<div class="bg-col-inner"><a href="http://eric-garduno.com/wp-content/uploads/2014/06/Eric-Garduno-H2-3057995004.jpg"><img src="http://eric-garduno.com/wp-content/uploads/2014/06/Eric-Garduno-H2-3057995004.jpg" alt="Eric Garduno H2 3057995004" width="1642" height="2149" class="aligncenter size-full wp-image-419" /></a></div>
</div>
<div class="column one-fourth" style="margin:0px 1px 0px -3px; padding:1px; background: #c6c6c6; width: 91px;height: 498px;">
<div class="bg-col-inner">Reelwoefienfhub feinfenfi feinrfienine fienfienini einfiefef</div>
</div>
</div>

Read more here: How can I keep the two rightmost <div> columns from shifting down? I’m already using inline-block and vertical-alignment:top


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , ,

Wordpress related questions and answers: