Column 6

sigh mean · Sep 12, 2023

Hello I'm wondering why column 6 isn't appearing in the row as it should. It's stacking underneath column 5 on desktop instead of to the side. This code is being inserted into an html widget in Wordpress.

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {font-size:.7em; background-color:#46555C}
a:link {
  text-decoration: none;
font-size:.7em;

}
a:hover {
  color: #2B9348;
}

* {
  box-sizing: border-box;

}


.column1 {
  float: left;
  width: 14%;
padding:10px;
border-right: 4px solid #2B9348;
valign:center;
text-align:center;
  
}

.column2 {
  float: left;
  width: 14%;
padding:10px;
border-right: 4px solid #2B9348;
text-align:center;
  valign:center;
}

.column3 {
  float: left;
  width: 14%;
 padding:10px;
border-right: 4px solid #2B9348;
text-align:center;
  
}

.column4 {
  float: left;
  width: 14%;
padding:10px;
border-right: 4px solid #2B9348;
text-align:center;
  
}

.column5 {
  float: left;
  width: 14%;
padding:10px;
border-right: 4px solid #2B9348;
text-align:center;
  valign:center;
}

.column6 {
  float: left;
  width: 14%;
padding:10px;
border-right: 4px solid #2B9348;
text-align:center;
  valign:center;
}



.row:after {
  content: "";
  display: table;
  clear: both;
}


@media screen and (max-width: 600px) {
  .column1 {
    width: 100%;
  }
.column2 {
    width: 100%;
  }
.column3 {
    width: 100%;
  }
.column4 {
    width: 100%;
  }
.column5 {
    width: 100%;
  }
.column6 {
    width: 100%;
  }
}

/* Media Query for low resolution  Tablets, Ipads */
        @media (min-width: 481px) and (max-width: 767px) {
           .column1 {
    width: 100%;
  }
.column2 {
    width: 100%;
  }
.column3 {
    width: 100%;
  }
.column4 {
    width: 100%;
  }
.column5 {
    width: 100%;
  }
.column6 {
    width: 100%;
  }
        }



</style>
</head>
<body>


<div class="row">
  <div class="column1" style="line-height:2em;">

    <h6><a href="https://509-3rd-avenue-rentcafewebsite.securecafe.com/onlineleasing/509-3rd-avenue/floorplans.aspx" style="color:#ffffff;">Availability</a><br>
<a href="/residences/" style="color:#ffffff;">Residences</a><br>
<a href="/amenities/" style="color:#ffffff;">Amenities</a><br>
<a href="/neighborhood/" style="color:#ffffff;">Neighborhood</a><br>
<a href="/contact/" style="color:#ffffff;">Contact</a></h6>
  </div>
  <div class="column2">
    <h6><a href="https://509-3rd-avenue-rentcafewebsite.securecafe.com/residentservices/509-3rd-avenue/userlogin.aspx" style="color:#ffffff;">Bill Pay</a><br>
 <a href="https://509-3rd-avenue-rentcafewebsite.securecafe.com/residentservices/509-3rd-avenue/userlogin.aspx" style="color:#ffffff;">Resident Login</a><br>
<a href="https://calendly.com/themurraynyc/30min?back=1&month=2023-05" style="color:#ffffff;">Schedule Tour</a><br>
<a href="https://509-3rd-avenue-rentcafewebsite.securecafe.com/onlineleasing/509-3rd-avenue/guestlogin.aspx" style="color:#ffffff;">Apply Now</a></h6> 
   
  </div>
  <div class="column3">
    <h6 style="color:#ffffff;">606 W. 30th Street<br>
New York, NY 10001<br>
 <a href="mailto:[email protected]" style="color:#ffffff;">[email protected]</a><br>
 <a href="tel:212-606-3000" style="color:#ffffff;">212-606-3000</a>

</h6>
  </div>


 <div class="column4">
    <h6 style="color:#ffffff;">© 606 W. 30. ALL RIGHTS RESERVED<br>PRIVACY POLICY

</h6>
  </div>

  <div class="column5” style="display: block; margin:auto; margin-top:40px; ">
 &nbsp;  &nbsp; &nbsp;<img src="https://themurraynyc.com/wp-content/uploads/2023/04/Lalazerian-1.png" alt="Lalezarian Properties" width="84" height="54" style="margin-top:20px;"/>
<img src="https://themurraynyc.com/wp-content/uploads/2023/04/Equal-Housing.png" alt="Equal Housing Opportunity" width="25px" style="padding:5px; margin-top:20px;"/>

</div>

<div class="column6”>
 &nbsp;  &nbsp; &nbsp;<img src="https://sixzerosix.wpengine.com/wp-content/uploads/2023/09/606W30-Gray-Logo_WEB.png" alt="Lalezarian Properties" width="84" height="54" style="margin-top:20px;"/>

</div>

</div>

</body>
</html>

OldMan · Sep 13, 2023

Your columns have this “valign:center;" in CSS and this does not exist. Think you want text-align:center;.
Your use of /> and &nbsp tells me you're using old coding.
Most importantly when I loaded your code into VSCoder I got a warrning message that illigal endig were being used. and I had a number of red coding lines on the sheet. I re-entered the lines manually, like
<div class="column6"> and the error color went away. This code works, but the @media doesn't.
Good luck.

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-size:.7em; background-color:#46555C}
a:link {
text-decoration: none;
font-size:.7em;
}
a:hover {
color: #2B9348;
}
* {
box-sizing: border-box;
}
.column1 {
float: left;
width: 14%;
padding:10px;
border-right: 4px solid #2B9348;
text-align:center;
text-align:center;
}
.column2 {
float: left;
width: 14%;
padding:10px;
border-right: 4px solid #2B9348;
text-align:center;
text-align:center;
}
.column3 {
float: left;
width: 14%;
padding:10px;
border-right: 4px solid #2B9348;
text-align:center;
}
.column4 {
float: left;
width: 14%;
padding:10px;
border-right: 4px solid #2B9348;
text-align:center;
}
.column5 {
float: left;
width: 14%;
padding:10px;
border-right: 4px solid #2B9348;
text-align:center;
text-align:center;
}
.column6 {
float: left;
width: 14%;
padding:10px;
border-right: 4px solid #2B9348;
text-align:center;
text-align:center;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column1 {
width: 100%;
}
.column2 {
width: 100%;
}
.column3 {
width: 100%;
}
.column4 {
width: 100%;
}
.column5 {
width: 100%;
}
.column6 {
width: 100%;
}
}
/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
.column1 {
width: 100%;
}
.column2 {
width: 100%;
}
.column3 {
width: 100%;
}
.column4 {
width: 100%;
}
.column5 {
width: 100%;
}
.column6 {
width: 100%;
}
}
</style>
</head>

<body>
<div class="row">
    <div class="column1" style="line-height:2em;">
        <h6><a href="https://509-3rd-avenue-rentcafewebsite.securecafe.com/onlineleasing/509-3rd-avenue/floorplans.aspx" style="color:#ffffff;">Availability</a><br>
        <a href="/residences/" style="color:#ffffff;">Residences</a><br>
        <a href="/amenities/" style="color:#ffffff;">Amenities</a><br>
        <a href="/neighborhood/" style="color:#ffffff;">Neighborhood</a><br>
        <a href="/contact/" style="color:#ffffff;">Contact</a></h6>
    </div>

    <div class="column2">
        <h6><a href="https://509-3rd-avenue-rentcafewebsite.securecafe.com/residentservices/509-3rd-avenue/userlogin.aspx" style="color:#ffffff;">Bill Pay</a><br>
        <a href="https://509-3rd-avenue-rentcafewebsite.securecafe.com/residentservices/509-3rd-avenue/userlogin.aspx" style="color:#ffffff;">Resident Login</a><br>
        <a href="https://calendly.com/themurraynyc/30min?back=1&month=2023-05" style="color:#ffffff;">Schedule Tour</a><br>
        <a href="https://509-3rd-avenue-rentcafewebsite.securecafe.com/onlineleasing/509-3rd-avenue/guestlogin.aspx" style="color:#ffffff;">Apply Now</a></h6>
    </div>

    <div class="column3">
        <h6 style="color:#ffffff;">606 W. 30th Street<br>
        New York, NY 10001<br>
        <a href="mailto:[email protected]" style="color:#ffffff;">[email protected]</a><br>
        <a href="tel:212-606-3000" style="color:#ffffff;">212-606-3000</a>
        </h6>
    </div>

    <div class="column4">
        <h6 style="color:#ffffff;">© 606 W. 30. ALL RIGHTS RESERVED<br>PRIVACY POLICY
        </h6>
    </div>

    <div class="column5" style="display: block; margin: auto; margin-top: 40px;">
        &nbsp;  &nbsp; &nbsp;<img src="https://themurraynyc.com/wp-content/uploads/2023/04/Lalazerian-1.png" alt="Lalezarian Properties" width="84" height="54" style="margin-top:20px;"/>
        <img src="https://themurraynyc.com/wp-content/uploads/2023/04/Equal-Housing.png" alt="Equal Housing Opportunity" width="25px" style="padding:5px; margin-top:20px;"/>
    </div>

    <div class="column6">
    <img src="https://sixzerosix.wpengine.com/wp-content/uploads/2023/09/606W30-Gray-Logo_WEB.png" alt="Lalezarian Properties" width="84px" height="54px" style="margin-top:20px;">
    </div>
</div>
</body>
</html>

sigh mean · Sep 21, 2023

Thank you so much for you response! It's greatly appreciated it.

Column 6

sigh mean

New Coder

OldMan

Gold Coder

sigh mean

New Coder

New Threads

Latest posts

Share this page

Buy us a coffee!

We value your privacy