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

Pug conditional elements not styling with CSS

Currently immersed in the world of Pug, node.js, and express as I build a web application. Facing hurdles when trying to style elements within Pug conditionals using CSS. For instance, consider this Pug snippet: div(id='outside') if authoris ...

javascripthtmlcssexpresspug

What is the most efficient way to load a PHP page once the webpage has completely finished loading?

I'm relatively inexperienced when it comes to PHP and JQuery, so please bear with me if my knowledge is limited. Currently, I'm facing an issue where loading a small HTML table that contains information queried from game servers (like shown in t ...

phpjqueryhtmlcssquerying

Error code 102 appeared, stating: "The server has declined the connection attempt"

Recently, I successfully developed a Facebook application that mirrors the registration and sign-in features of my website. Users have the option to register or log in to my site through their Facebook accounts. To achieve this, I created a basic HTML page ...

htmlfacebookfacebook-graph-api

Create a div that can grow in size without the need to set a specific height for it

Here is an example of my HTML code: <div id="wrapper" class='common'> <div id="left" class='common'>Menu I Menu II Menu III Menu IV</div> <div id="right" class='common'>hello world..hello world ...

htmlcss

Styling multiple divs using CSS

What is the method for attaching CSS to sp-copyright? <div class="container"> <div class="row"> <div id="sp-footer1" class="col-sm-12 col-md-12"> <div class="sp-column "> <span class="sp-copyright"> ...

htmlcss

Smooth animation is not being achieved with the Jquery dlmenu

I have implemented a multi-level navigation menu using a demo of the jquery dlmenu plugin v1.0.2. Although most of the functions are working smoothly, the CSS3 menu navigation lacks the fluidity of the jQuery left/right sliding effect. Is there a way to ...

javascriptjqueryhtmlcssjquery-animate

Having trouble with my Angular application, seems to be stuck at the loading screen. Not sure what's causing it, possibly

Hey there, I'm hoping to create a straightforward app that showcases posts. However, I've encountered an issue when deploying the initial page which is stuck on "Loading...". I believe it's a minor problem and would appreciate your assistan ...

htmlangulartypescript

When trying to set the focus on the first item in a list using HTML and Angular, the focus unexpectedly shifts to the second

I've been tackling a UI requirement where the focus needs to be set on the first element of a list item constructed from an array of objects when the tab key is pressed for the first time. Subsequent tab key presses should cycle through the list items ...

htmlangulartypescripttabindex

What is causing elements like divs, paragraphs, or text not to display within an ion-item after an ion-input is added?

I am currently working on validating a simple form and everything seems to be functioning properly. However, I have encountered an issue with displaying text messages within an ionic 3 list item. The ion-item consists of an ion-input element. When I place ...

javascripthtmlangularionic-framework

Using Bootstrap 4 to create a fixed-top navbar and other sticky-top elements

Check out the reproduction here: https://jsbin.com/lawafu/edit?html,output Could this be a bug, an error, a challenge, or an unattainable concept? Prior to scrolling: After scrolling: What I require: Essentially, I need the sidebar to remain visible a ...

htmlcsstwitter-bootstrapbootstrap-4sticky

Do individual JavaScript script tags operate independently of one another in terms of error handling?

My main goal is to establish a connection to my server using websockets and send messages to the browser for remote page reloads. I want to ensure that this code runs independently of any other errors on the page, allowing me to remotely refresh the page i ...

javascripthtmlruntime-error

Issue with CSS on various mobile devices

Using this CSS to display a fixed part at the bottom of the mobile screen, I noticed that it works well on the Samsung Grand Prime but appears narrower on the Samsung J7 Max. Here is the code snippet and images for reference: .footer { position: fixed ...

cssresponsive

Adding descriptive text before a website link is a helpful way to provide context for the reader. For example

My goal is not just to have JavaScript change the URL after my page has loaded. I want to be able to enter something like 'blog.mywebsite.com' into the omnibar and have it locate my website similar to how Steam does with 'store.steampowered. ...

javascriptphphtml.htaccessweb

Looking for consistent vertical and horizontal scrolling behavior in a React project

I am in need of assistance as I lack the necessary expertise in ReactJs to transform this design. Currently, it is written in Jquery but I would like guidance on how to recreate it in ReactJs. Specifically, I want the left div with the topic for each row t ...

javascriptjqueryhtmlcssreactjs

Geolocation API for determining altitude

When using the geolocation API, I am experiencing no issues with latitude and longitude. However, I have encountered a problem with Altitude. For instance, when I retrieve the coordinates for my current location using my mobile phone with integrated GPS, i ...

html

Preview your uploaded image before finalizing

I am currently working on implementing a new upload feature for users of our forum. This feature will allow them to upload a personal picture. Here is what I have developed so far: HTML <label>Profile image</label> <div class="phot ...

javascriptjqueryhtmlcss

Safari's anchor links tend to leap higher than necessary

One of the anchor links on my website is behaving strangely in Safari, both on iPhone and MacOS. Instead of scrolling to the correct position of the anchored div, it scrolls to a random location around 400-500px higher than it should be. All other anchor l ...

javascripthtmlreactjssafari

The issue with HTML where the header and footer elements are continuously repeating when

I'm struggling with the title header and footer repeating on every printed page. I just want to show the title at the top of the page and display the footer at the end of the print page. Can anyone provide a solution or suggestion? You can view my fid ...

javascripthtmlcssprinting

Aligning the stars with CSS

One of the components I have deals with a star rating system, and I thought it would be cool to use Font Awesome icons for half stars. Everything is working well except for the CSS styling aspect. While I managed to position some of the stars correctly by ...

javascriptcssreactjsreact-functional-component

Employ the JQuery Datepicker functionality to enhance the user experience

Is it possible to integrate jQuery Datepicker into a web page that includes an iframe? And where is the optimal placement for linking the CSS and script references? ...

jqueryhtmljquery-ui