Ways to configure dynamic and responsive divs using CSS exclusively (no javascript needed)!

I am looking to have my main div expand in height based on the categories div, content, or product pictures. Check out the website here

Here are the issues I'm facing:

  • The content div and categories div are both within the main div, but the product pictures overlap outside of it. When zooming in, they float off to the right.

  • If I set the #main width as a percentage, the zoom behavior is odd as only the buttons in categories adjust size. Setting a constant width works better, but then responsiveness becomes an issue.

  • The border of the categories isn't aligning properly vertically.

  • In mobile view, the pictures overlap everything with a scroll bar when zooming is disabled. The footer appears in the middle while there's extra space between the header and categories. See the issue here.

Any help would be appreciated!

ps.: I've experimented with different heights, widths, margins, overflows, but haven't found a solution that works perfectly. pps: I've included the CSS code below for reference to avoid checking the source site for quicker assistance.

// Insert CSS code here

// Insert HTML code here

htmlcss

Answer №1

Implemented a widely accepted version of clearfix and eliminated excessive positioning. The key issue was the total width calculation causing the element to drop to the next line, which may have required absolute positioning to keep it in place. Adjusted widths to 15% and 75% to alleviate this problem. It’s not perfect, but it's a step in the right direction.

body {
  background-color:#161718;
  background-image:url('../pictures/mdbg.png');
  background-position:center; 
  background-repeat:no-repeat;
  background-attachment: fixed;
  background-size: cover;
  margin: 0px;
  padding: 0px;
  height: 100%;
}

header{
  width:100%;
  height: 60px;
  background: linear-gradient(to bottom, rgba(230, 16, 16, 1) 1%, rgba(136, 7, 8, 1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

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

#main{
  margin: 0 auto;
  width: 60%;
  background-color: #1d1e20;
  border: 3px solid #880708;
  border-top: 0px none transparent;
  min-height: 200px;
  position:relative;
}

#logo{
  margin: 20%;
  white-space:nowrap;
  overflow:hidden;
  width: 40%;
}

#categories{
  width: 15%;
  border-right: 3px solid #880708;
  margin: 0;
  height: 100%;
  padding: 0;
  float:left;
  font: 12px Verdana;
  list-style-type: none;
  text-align:center;
  white-space:nowrap;
}


ul#categories a {
  background: linear-gradient(to bottom, rgba(193, 32, 38, 1) 1%, rgba(104, 12, 13, 1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  text-shadow: 1px 1px 0 #000000;
  border-radius: 2px;
  color: white;
  display: inline-block;
  font-size: 1.3em;
  margin: 4px;
  padding: 2px 2px;
  text-decoration: none;
  width: 80%;   
}

#content{
  float:right;
  width:75%; /* 100% - 15% - 3px > 85% so mind the gap */
  height: 100%;
  margin: 0;
  padding: 0;
}

#content img{
  width: 26%;
}

footer {
  width: 100%; 
  height: 20px;
  background-color: black;
  color:white;
  text-align:center;
  border-top: 3px solid #880708;
  bottom: 0;
}



/* Laptop/Tablet (1366px) */
@media only screen and (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) {
  header {  }
  #main { width: 1000px; }
  footer {  }
  #categories {  }
  #content {  }
}

/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
  header { }
  #main { width: 100%; border:none;}
  footer {  }
  #categories { width: 20%; }
  #content { width: 70%; }
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {

  header { height: 10%; padding: 0px;}
  body {background-image:none;}
  #main {  border:0px; width: 100%; min-width: 200px;}
  footer { }
  #logo {display:none;}
  #categories { width: 100%; border:0px;}
  ul#categories a { width:100%; font-size:2.6em; margin: 0 auto; padding-top:10px; padding-bottom: 10px; display: inline-block;}
  #content {width: 100%; margin: 0 auto; left: 15%; overflow:scroll; padding-top: 15px;}
  #content img{width: 80%;}

}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
  .box { float: left; }
  header {height: 40px;}
  main { width: 100%; }
  footer { }
  #categories { width: 100%; }
  #content { width: 100%; }
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
  .box { float: left; }
  header { height: 40px;}
  main { width: 100%; }
  footer {  }
  #categories { width: 100%;}
  #content { width: 100%; }
}

Adjusted some HTML elements for better functionality

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <!--320 mobile devices cant zoom-->
    <title>Webshop</title>
    <style type="text/css"></style>
  </head>

  <body>

    <header></header>

    <div id="main" class="clearfix">


      <ul id="categories">
        <img id="logo" src="kecske.png">
        <li><a>Motherboard</a></li>
        <li><a>Processor</a></li>
        <li><a>Memory</a></li>
        <li><a>FSP</a></li>
        <li><a>Whatever</a></li>
        <li><a>Monitor</a></li>
        <li><a>Motherboard</a></li>
        <li><a>Processor</a></li>
        <li><a>Memory</a></li>
        <li><a>FSP</a></li>
        <li><a>Whatever</a></li>
        <li><a>Monitor</a></li>
      </ul>

      <div id="content">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
        <img src="termek.png" alt="picture">
      </div>


      <div class="clearfix"></div>
      <footer>All rights reserved Kecske PC 2015</footer>
    </div>


    <style>.tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}.tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}.ws_toolbar {z-index:100000} .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px}   .tb_highlight{background-color:yellow} .tb_hide {visibility:hidden} .ws_toolbar img {padding:2px;margin:0px}</style>
  </body>
</html>

Updated formatting for improved readability.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating the Title of a Page in Node.js

Is it possible to dynamically update the title of each page using NodeJS? The index.html file (located inside the public folder) looks like this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel= ...

htmlnode.jsexpress

What is the best way to create a mobile design in Dreamweaver while utilizing the same css file as my Desktop code?

Where does my layout provide a solution, and what adjustments can be made? I attempted modifying the screen dimensions in the Dw Design page without success. ...

htmlcssmobilelayoutdreamweaver

The UI does not display the html code (specifically svg) added through jquery appending

I am working with the following HTML code: <svg> <g> <rect></rect> <text> abc </text> </g> <g> <rect></rect> <text> def </text> </g& ...

jqueryhtmldomsvg

What is the best way to modify React state?

Can someone help me troubleshoot an issue with toggling React state after a button click? I want to be able to change "Work From Office" to "Work From Home" and vice versa, but it's only working once. Is there a way to achieve this using an if stateme ...

htmlcssreactjs

Can a HTML div be created with an animation and a hover-scale effect added to it?

I experimented with using divs as clickable buttons that direct to another page on my website. I added animations to make them rotate into view when the site is loaded. Now, I'm trying to implement a hover effect that will scale the buttons when hover ...

htmlcssanimationhovercss-animations

What is the best way to activate a click event when I set a radio button to checked?

I am facing an issue with an uninitialized property in my app.component.ts: color!:string; I am trying to automatically initialize the color property when a radio button is selected: <div> <input type="radio" name="colors" ( ...

javascripthtmlangular

Content creator: Enhancing HTML search functionality using parameters

Hey there, I'm facing an issue. I created a template on my Blogger site and I need to search for text with a specific label using this URL: www.my_blog.blogspot.com/search?q=label:Printers+SearchText This is the code I have: <form action=&ap ...

htmlblogger

I am having trouble inserting a table from a JSON object into an HTML file

getJSON('http://localhost:63322/logs', function(err, data) { if (err !== null) { alert('Something went wrong: ' + err); } else { //var myObj = JSON.parse(data); // document.getElementById("demo").innerHTML = myObj.ad_soy ...

javascripthtmljson

On a Samsung tablet with Moodle, the body background image is set to display at the top

Encountered an issue with Sambungs tables. I have a background image set on the body. Here is how the CSS looks: html, body{ background: url('img/background.jpg') no-repeat; background-position: top; // I also tried cover, fixed, etc } The ...

htmlcssmoodle

Is it necessary to wait for CSS to fully load on a static site built with Next.js?

I am currently working on a Next.js static site. The JavaScript loads quickly, but there seems to be a delay in applying the styled-components CSS as seen in the screenshot. The CSS only kicks in after the page has fully loaded. Does anyone have any sugge ...

cssnext.jsstyled-components

Learn the methods for successfully transferring dynamic values from Angular to a jQuery script

This is the script that I have included in my HTML code: <div class="progress-bar"></div> <script type="text/javascript"> $('.progress-bar').gradientProgressBar({ value: $(this).attr('$scope.moodvalue'), ...

jqueryhtmlangularjs

Navigating between two intervals in JavaScript requires following a few simple steps

I have created a digital clock with a button that switches the format between AM/PM system and 24-hour system. However, I am facing an issue where both formats are running simultaneously, causing the clocks to change every second. Despite trying various s ...

javascripthtml

Editable content <div>: Cursor position begins prior to the placeholder

Having an issue with a contenteditable div where the placeholder text starts behind the cursor instead of at the cursor position. Any suggestions on how to correct this? <div id="input_box" contenteditable="true" autofocus="autofocus" autocomplete="o ...

javascripthtmlcss

a non-breaking space within a hyperlink

While working on the subnavigation of a website, I encountered an issue with the link Suite «Mont Blanc», which was pulled from the backend. The desired format for this link was:       Suite «Mont Blanc» However, t ...

htmlcsswhitespace

Providing a BR tag with a distinctive on-screen look (prior to the break happening)

After coming across this particular inquiry, I discovered that in the past, styling the line break (BR) tag with CSS was not possible. Nevertheless, thanks to the latest browsers, this limitation is a thing of the past now. My aim is to give certain line b ...

htmlcss

What is the best way to preserve the background color of nested progress bars?

In this scenario, I am attempting to apply border-radius specifically to the upper and lower right corners of the progress bars. The idea is to create a cascading effect where each color (red, green, and blue) progress bar overlaps slightly with the next o ...

htmlcssbootstrap-4

Can someone explain the method for displaying or concealing a menu based on scrolling direction?

https://i.stack.imgur.com/tpDx0.jpg I want to hide this menu when scrolling down and show it when scrolling up. The code for my menu bot is: <script> var previousScroll = 0; $(window).scroll(function(event){ v ...

javascriptjqueryhtmlcss

Tips for halting the movement of marquee text once it reaches the center briefly before resuming animation

Is there a way to make text slide in, pause when centered, and then repeat the process? I'm looking for some help with this animation. Here is the code snippet: <marquee direction="left" id="artistslide"> <span id="currentartist">< ...

javascriptjqueryhtmlmarquee

Why does it seem like only one div is being added?

I am facing an issue with dynamically appending multiple div elements. Despite my efforts, only one div element is showing up on the browser when I try to test the code. I have searched for similar problems but could not find any solutions. Any assistanc ...

javascriptjqueryhtmlcss

Include a tooltip on every image by utilizing the title attribute

<br><img title="Cool as ninja!" src="/images/profile2.png" width="300"></br> <br> <strong>Who's this pretty girl ninja!?</strong> <br><img title="Cool dude bro!" src="/images/profile5.png"></br> & ...

htmlcss