Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

sigh mean

New Coder
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.

Screenshot-2023-09-12-at-4.32.52-PM.png


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>
 
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>
 

New Threads

Buy us a coffee!

Back
Top Bottom