Problem with stacking/repsonisve divs

SpaceCrawler · Jan 21, 2023

Hello, hopefully someone can help me with this issue and I thank everyone in advance fo reading this.
I have a website where the header has two sections that contain images (one on left and several small ones on the right linking to various social media pages). When viewing on a phone currently the left image resizes, but the images in the right do not. (see attached image, circled in green)

But the main problem is that I would like the images (social media buttons) in the right div to move as a block under the image on the left when viewing on a phone, but currently they do not.
I have tried many revisions, adding extra div areas to contain these images (rather than the table in the current HTML, seen in link below) but I cannot center them and they overlap each other, align weirdly.

I also have other div areas that act properly (stack when viewing on phone), but unsure if that coding is interfering in the header coding I am trying to figure out.

test10

Any help is very much appreciated!

Sean

Johna · Jan 21, 2023

We'll need to see your code to be able to help you.

SpaceCrawler · Jan 21, 2023

I hope I'm posting this correctly. I am not sure what to include here in my commebt as the instructions say don't post a "wall of code".

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>test10</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;


}

body {
  font-family: Arial, Helvetica, sans-serif;
background-color: #000000;

padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;

}

.header {
  background-color: #000000;
  padding: 10px;
  text-align: center;
  font-size: 0px;
}



/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  height: 430px;

}

.left {
  width: 12%;
background-image: url('https://www.londonaftermidnight.com/images/2023/seemlessbg3.jpg');
background-size: contain;
border: 1px solid #424242;
border-radius: 25px;
 
overflow: auto;

}

.middle {
  width: 60%;
overflow: auto;
border: 1px solid #727272;
border-radius: 25px;

}

.right {
  width: 28%;
background-image: url('https://www.londonaftermidnight.com/images/2023/columnBGr.jpg');
background-size: contain;
    background-repeat: no-repeat;
border: 1px solid #424242;
border-radius: 25px;
 
overflow: auto;

}


.rightone {
  width: 242px;
height: 120px;
border: 1px solid #33f6ff;
border-radius: 25px;
background-image: url('https://www.londonaftermidnight.com/images/2023/IND_website-spreadshop-image.jpg');
background-size: absolute;
    background-repeat: no-repeat;
}

.righttwo {
  width: 242px;
height: 120px;
border: 1px solid #33f6ff;
border-radius: 25px;
background-image: url('https://www.londonaftermidnight.com/images/NEWitunessidebarSMALL.png');
background-size: absolute;
    background-repeat: no-repeat;
}


.rightthree {
  width: 242px;
height: 120px;
border: 1px solid #33f6ff;
border-radius: 25px;
background-image: url('https://www.londonaftermidnight.com/images/instagram_widget_image.gif');
background-size: absolute;
    background-repeat: no-repeat;
}



/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}



.footer {
  background-color: #000000;
  padding: 10px;
  text-align: center;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .left, .middle, .right{
    width: 100%;

  }


.responsive {
  max-width: 100%;
  height: auto;
}



}


a, a:link, a:visited {
font-size: 9pt;
color: #33f6ff;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
a:hover {
font-size: 9pt;
color: #A8A8A8;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
a:active {
font-size: 9pt;
color: #ffffff;

text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
span.smallgreyfont
{font-size: 8pt;
color: #888888;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
span.mainfontitalic
{font-size: 9pt;
font-style: italic;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
 
}
 
span.borderfont
{font-size: 9pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #382d2c;
 
}

span.mainfont
{font-size: 9pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
 
}

span.ufont
{font-size: 9pt;
font-weight: bold;
text-decoration: Underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
 
}
 
span.smallfont
{font-size: 8pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
 
}
 
span.boldmainfont
{font-size: 9pt;
     font-weight: bold;
     font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
 
}
 
span.largeboldmainfont
{font-size: 10pt;
     font-weight: bold;
     font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
 
}

span.ulargeboldmainfont
{font-size: 10pt;
     font-weight: bold;
     font-family: Verdana, Arial, Helvetica, sans-serif;
color: #888888;
 text-decoration: Underline;

}

span.boldgreysmallfont
{font-size: 8pt;
     font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #888888;
 
}

 
span.boldsmallfont
{font-size: 8pt;
     font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
 
}
 
span.redmainfont
{font-size: 9pt;
     color: #ff0000; font-weight : bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

span.boldredmainfont
{font-size: 9pt;
font-weight: bold;
     color: Red; font-weight : bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

 
span.boldsmallredfont
{font-size: 8pt;
color: #FF0000;
     font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
 table, th, td {
  border:0px 000000;

}

[snip]

<div class="header">


<center>

<table>
<tr>
    <th> <IMG SRC="https://www.londonaftermidnight.com/images/2023/IND_SMALL-2015_new_site_banner.jpg" ALT="London After Midnight" WIDTH="541" HEIGHT="120" border="0" class="responsive"></th>


    <th><a href="https://lamofficial.bandcamp.com" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_bandcamp.png" alt="Bandcamp" width="43" height="40" border="0" class="responsive"></a>

<a href="https://instagram.com/lamofficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_instagram.png" alt="instagram" width="43" height="40" border="0" class="responsive"></a>

<a href="https://twitter.com/LAMofficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_twitter.png" alt="Twitter" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.youtube.com/LAMtv" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_youtube.png" alt="YouTube" width="43" height="40" border="0" class="responsive"></a>

<a href="https://open.spotify.com/artist/51mEqzVhG2n9nD2kBAnWer?si=V9zjtLOURD-emDZBts3pnA" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_spotify.png" alt="spotify" width="43" height="40" border="0" class="responsive"></a>

<BR>

<a href="https://www.facebook.com/LAMofficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook1.png" alt="Facebook" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.facebook.com/sean.brennan" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook_sean.png" alt="Facebook" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.facebook.com/SeanBrennanOfficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook2.png" alt="Facebook" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.facebook.com/groups/2329264843/" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook3.png" alt="Facebook" width="43" height="40"
border="0" class="responsive"></a>



<a href="https://www.londonaftermidnight.com/mail.html"><img src="https://www.londonaftermidnight.com/images/icons/icon_mail.png" alt="Mailing List" width="43" height="40" border="0" class="responsive"></a>


</th>
  </tr>
  </table>

</center>

<P>
<BR>

<img src="https://www.londonaftermidnight.com/images/index_news_bar1.png" ALT="London After Midnight News" class="responsive">
<BR>

</div>



<div class="row">
 
<div class="column left" style="background-color:#000000; padding-left: 15px;">

<span class="mainfont">
<li type="square">Latest News
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/catalog.html">LAM Store</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/music.html">Preview Music</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/tour.html">Tour Dates</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/mail.html">Mailing List</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/interviews.html">Interviews</a>
<BR>
 
<li type="square"><A HREF="https://www.londonaftermidnight.com/history.html">Biography</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/links.html">Social Media</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/photo.html">Photos</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/lyrics.html">Lyrics</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/construct.html">LAM F.A.Q.</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/presskit.html">Press Kit</a>
<BR>

<li type="square"><A HREF="https://www.londonaftermidnight.com/contact.html">Contact</a>
</SPAN>
<p>
<BR>

<A HREF="http://darkriderecords.com" TARGET="NEW">
<IMG SRC="https://www.londonaftermidnight.com/images/2023/darkride_leftmenu.png" ALT="Darkride Records" WIDTH=100 HEIGHT=105 ALIGN=center border=0 class="responsive"></a>



</div>



<div class="column middle" style="background-color:#000000;">

<CENTER>
<span class="boldgreysmallfont">SCROLL FOR MORE:</span>
</center>
<P>

SpaceCrawler · Jan 21, 2023

Maybe it's easier to see what I am trying to do in this comment. This sort of works on the W3schools website tester, but I need these to be centered on the top of my page - but that is something I cannot make occur here.

HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.columnone {
  float: left;

}

.ldiv {
  width: 75%;
}

.rdiv {
  width: 25%;

}

/* Clear floats after the columns */
.rowone:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columnone {
    width: 100%;

  }

.responsive {
  max-width: 100%;
  height: auto;
}

}
</style>
</head>
<body>



<div class="rowone">
  <div class="columnone" style="background-color:#000000;">

   <IMG SRC="https://www.londonaftermidnight.com/images/2023/IND_SMALL-2015_new_site_banner.jpg" ALT="London After Midnight" WIDTH="541" HEIGHT="120" border="0" class="responsive">
  </div>


  <div class="columnone" style="background-color:#000000;">

  <a href="https://lamofficial.bandcamp.com" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_bandcamp.png" alt="Bandcamp" width="43" height="40" border="0" class="responsive"></a>

<a href="https://instagram.com/lamofficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_instagram.png" alt="instagram" width="43" height="40" border="0" class="responsive"></a>

<a href="https://twitter.com/LAMofficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_twitter.png" alt="Twitter" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.youtube.com/LAMtv" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_youtube.png" alt="YouTube" width="43" height="40" border="0" class="responsive"></a>

<a href="https://open.spotify.com/artist/51mEqzVhG2n9nD2kBAnWer?si=V9zjtLOURD-emDZBts3pnA" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_spotify.png" alt="spotify" width="43" height="40" border="0" class="responsive"></a>

<BR>

<a href="https://www.facebook.com/LAMofficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook1.png" alt="Facebook" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.facebook.com/sean.brennan" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook_sean.png" alt="Facebook" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.facebook.com/SeanBrennanOfficial" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook2.png" alt="Facebook" width="43" height="40" border="0" class="responsive"></a>

<a href="https://www.facebook.com/groups/2329264843/" target="NEW"><img src="https://www.londonaftermidnight.com/images/icons/icon_facebook3.png" alt="Facebook" width="43" height="40"
border="0" class="responsive"></a>

<a href="https://www.londonaftermidnight.com/mail.html"><img src="https://www.londonaftermidnight.com/images/icons/icon_mail.png" alt="Mailing List" width="43" height="40" border="0" class="responsive"></a>


  </div>
</div>

</body>
</html>

SpaceCrawler · Jan 21, 2023

Updated code is on my website, on a test page. It seems to be working correctly except that I can't get the header section/divs to be centered. You can see it here:

test12

Sean

SpaceCrawler · Jan 22, 2023

Ok, I found a solution. Thanks to anyone who read this.

Sean

Problem with stacking/repsonisve divs

SpaceCrawler

Coder

Attachments

Johna

Full-Stack Web Developer

SpaceCrawler

Coder

SpaceCrawler

Coder

SpaceCrawler

Coder

SpaceCrawler

Coder

Forum statistics

Connect with us