Reputation: 956

CSS alignment of columns with multiple rows

I have the following snippet

.striped {
	height : 30px;	
	margin-right: 1px !important;  
    background: repeating-linear-gradient(-45deg,#E4003D,#E4003D 10px,#222 10px,#222 20px)!important;
}
.content{
	height  : 100%;
}
	
.mymedia {    
    font-size: 1.5vh !important;   
    color: #fff;
    text-align: justify;
    -ms-text-justify: inter-word;
    text-justify: inter-word;
    border-color: #E4003D;
    font-weight: normal !important;
	background-color:#363636 !important;
    background: repeating-linear-gradient( -45deg, #111 2px, #222 3px, #222 4px, #111 7px)!important;    
}

.rightpadding{
	 margin-right: 1px !important;
}
.top-buffer { 
    margin-top:13px; 
     overflow: hidden;
	 
}

.bottom {
    vertical-align: bottom; 
    bottom: 0 !important;
}

 .nolrpadding{
	 padding-left: 0 !important;
	 padding-right: 0 !important;
 }
 
.mymedia > p {
	  margin-left: 5vw !important;
	 margin-right: 5vw !important;	 
}

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}


.square-box{
    position: relative;
    width: 95%;
    overflow: hidden;    
    font-size: 2vh !important;
    font-weight: bold !important;
	background: repeating-linear-gradient( -45deg, #E4003D 2px, #D6003D 3px, #D6003D 4px, #E4003D 7px)!important;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
}
.square-content div {
   display: table;
   width: 100%;
   height: 100%;
}
.square-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white;    
}

.noRightMargin {
    margin-right: 0 !important;
}

.noLeftMargin {
    margin-left: 0 !important;
}
.row [class*="col-"]{
  margin-bottom: -99999px;
  padding-bottom: 99999px;  
}

.row{
  overflow: hidden; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/main.css" />    
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
   
</head>
<body>

<div class="container">
  <div class="row" style="margin-top:5%; margin-bottom: 10px;">
  
  </div>
  <div class="row">  
  <div class="col-xs-5">  	
  	<!-- <div class="row rightpadding"> -->
	 <div class="row striped"></div>	
	  <div class="row rightpadding">
        <div class="media mymedia">
          <img src="images/Mission/cluster.png" class="img-responsive"> 
          <p>        
		  asas
          </p>				  
       </div>
	   </div>
	   <div class="row striped bottom"></div>
  	<!-- </div> -->
  	
  </div>
   <div class="col-xs-7">
      <div class="row noRightMargin">
        <div class="col-xs-4 nolrpadding">
          <div class='square-box'>
             <a href="http://sky.esa.int/" data-internal="false">
               <div class="square-content"><div><span>xxx</span></div></div></a>
          </div>
        </div>

        <div class="col-xs-4 nolrpadding">
          <div class='square-box'>
             <a href="https://twitter.com/ESAscience" data-internal="false">
               <div class="square-content"><div><span>xxx</span></div></div></a>
          </div>
        </div>

        <div class="col-xs-4 nolrpadding">
          <div class='square-box'>
             <a href="#" data-internal="false">
               <div class="square-content"><div><span>xxx</span></div></div></a>
          </div>
        </div>

        </div>
        <div class="row top-buffer noRightMargin">
        <div class="col-xs-4 nolrpadding">
          <div class='square-box'>
             <a href="http://helioviewer.org/" data-internal="true">
               <div class="square-content"><div><span>xxx</span></div></div></a>
          </div>
        </div>

        <div class="col-xs-4 nolrpadding">
          <div class='square-box'>
            <a href="EXE" data-prog=" O:\Projects\xdisk\projects\ESAC-SOSR\Work\WP1000 - Visualization tool\wwt-windows-client\WWTExplorer3d\bin\gaiasandbox\gaiasandbox.exe" data-args="scripts\tests\Rosetta.py">
              <div class="square-content"><div><span>xxx</span></div></div></a>
          </div>
        </div>

      </div>
    </div>
   <!--  <div class="col-xs-3"></div> -->
  </div>  
</div>


</html>

the problem that I have is the bottom alignments in the two columns, as shown in the image

I have seen fixes for column vertical alignments but it seems that they do not work here, so how can I align the bottom of the three rows within the first column with the next column?

thanks in advance,

es.

UPDATE

I would like it to look something like this with the bottom strip row being vertically aligned with the bottom of the red box.

Upvotes: 0

Answers (3)

beercohol

Reputation: 2587

You should be able to achieve what you want by using absolute positioning, with fixed top and bottom so that the left column elements are "snapped" to the height of the row.

Try the snippet below.

.striped {
    height: 30px;
    background: repeating-linear-gradient(-45deg, #E4003D, #E4003D 10px, #222 10px, #222 20px)!important;
    position: absolute;
    left: 0;
    right: 15px;
}
.content {
    height: 100%;
}
.mymedia {
    font-size: 1.5vh !important;
    color: #fff;
    text-align: justify;
    -ms-text-justify: inter-word;
    text-justify: inter-word;
    border-color: #E4003D;
    font-weight: normal !important;
    background-color: #363636 !important;
    background: repeating-linear-gradient( -45deg, #111 2px, #222 3px, #222 4px, #111 7px)!important;
    top: 30px;
    bottom: 30px;
    left: 0;
    right: 15px;
    position: absolute;
    margin-top: 0 !important;
}
.top-buffer {
    margin-top: 13px;
    overflow: hidden;
}
.bottom {
    bottom: 0 !important;
}
.nolrpadding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.mymedia > p {
    margin-left: 5vw !important;
    margin-right: 5vw !important;
}
* {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
.square-box {
    position: relative;
    width: 95%;
    overflow: hidden;
    font-size: 2vh !important;
    font-weight: bold !important;
    background: repeating-linear-gradient( -45deg, #E4003D 2px, #D6003D 3px, #D6003D 4px, #E4003D 7px)!important;
}
.square-box:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
}
.square-content div {
    display: table;
    width: 100%;
    height: 100%;
}
.square-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white;
}
.noRightMargin {
    margin-right: 0 !important;
}
.noLeftMargin {
    margin-left: 0 !important;
}
.row {
    overflow: hidden;
    position: relative;
}
.myLeftCol {
    bottom: 0;
    padding-left: 0 !important;
    position: absolute !important;
    top: 0;
}
.myRightCol {
    margin-left: 41.6667%;
}

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</head>

<body>

<div class="container">
    <div class="row" style="margin-top:5%; margin-bottom: 10px;">

    </div>
    <div class="row">
        <div class="col-xs-5 myLeftCol">
            <div class="striped"></div>
            <div class="media mymedia">
                <img src="images/Mission/cluster.png" class="img-responsive">
                <p>
                    asas
                </p>
            </div>
            <div class="striped bottom"></div>
        </div>

        <div class="col-xs-7 myRightCol">
            <div class="row noRightMargin">
                <div class="col-xs-4 nolrpadding">
                    <div class='square-box'>
                        <a href="http://sky.esa.int/" data-internal="false">
                            <div class="square-content">
                                <div><span>xxx</span>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-xs-4 nolrpadding">
                    <div class='square-box'>
                        <a href="https://twitter.com/ESAscience" data-internal="false">
                            <div class="square-content">
                                <div><span>xxx</span>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-xs-4 nolrpadding">
                    <div class='square-box'>
                        <a href="#" data-internal="false">
                            <div class="square-content">
                                <div><span>xxx</span>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

            </div>
            <div class="row top-buffer noRightMargin">
                <div class="col-xs-4 nolrpadding">
                    <div class='square-box'>
                        <a href="http://helioviewer.org/" data-internal="true">
                            <div class="square-content">
                                <div><span>xxx</span>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-xs-4 nolrpadding">
                    <div class='square-box'>
                        <a href="EXE" data-prog=" O:\Projects\xdisk\projects\ESAC-SOSR\Work\WP1000 - Visualization tool\wwt-windows-client\WWTExplorer3d\bin\gaiasandbox\gaiasandbox.exe" data-args="scripts\tests\Rosetta.py">
                            <div class="square-content">
                                <div><span>xxx</span>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

            </div>
        </div>
        <!--  <div class="col-xs-3"></div> -->
    </div>
</div>


</html>

Upvotes: 1

Mihai T

Reputation: 17687

managed to do what you wanted with just a little jq . hope you don't mind

check here jsfiddle

css code added : .mymedia { height:100%;}

jq code added :

var result = $(".col-xs-7").height() - $(".row.striped").height()*2
$(".row.rightpadding").height(result)

result = height of the right col - the heights of both striped rows ( which are equal i presume )

then add that height to the middle row ( .row.rightpadding )

let me know if it helps.

Upvotes: 0

OverCoder

Reputation: 1603

Wrap everything in a <div>, and set the childs to have min-height: 100%

Upvotes: 0

CSS alignment of columns with multiple rows

Answers (3)

Related Questions