Utilizing the float: left property for creating additional spacing in a responsive CSS layout

My frustration levels are off the charts as I struggle to understand why this code refuses to cooperate. As I work on setting up my personal website, I want everything to be perfectly responsive before I even think about adding my content. One major headache - I am aiming for a 3x3 grid of boxes to showcase my work (with div id = container), but each time I introduce the ninth div block (p9), chaos reigns and the layout falls apart with no apparent cause. Here's the snippet for the desktop layout:

body{
    background-color:#FFB51E;
    width:100%;
    height:1000px;
    position:absolute;
}

 /* unvisited link */
a:link {
    text-decoration:none;
    background-color: #2A56C4;
    color:#fff;
    padding:15px;
    border-radius:26px;
    }
/* visited link */
a:visited {
    color: fff;
    }
/* mouse over link */
a:hover {
    background-color:#FF581E;
    }
/* selected link */
a:active {
    color:#FF581E;
    background-color:fff;
    }

#header{
    width:80%;
    height:160px;
    margin: 0 auto;
    position:relative;
    display:block;

}

.left{
    color:#fff;
    text-align: left;
    margin-top:25px;
    margin-bottom:15px;
    font-size:36px;
    position:relative;
    float:left;
    width:310px;
    display:block;
}

.right{
    text-align:right;
    width:300px;
    float:right;
    padding-top:5px;
    margin-bottom:15px;
    font-size:24px;
    position:relative;
    float:right;
    z-index:2;
}

.works{
    text-align:center;
    position:relative;
    float:left;
    left:30%;
    font-size:25px;
    width:100px;
    display:inline-block;
}

.about{
    text-align:center;
    position:relative;
    float:right;
    right:30%;
    font-size:25px;
    width:100px;
    display:inline-block;
}

.border{
    background-color:none;
    width:100%;
    height:85px;
    margin:0 auto;
    border:none;
    border-bottom: 6px solid #000;
    float:none;
    position:relative;
}
/*body stuff*/
    #container{
    position:static;
    display:block;
    margin:0 auto;
    font-size:0px;
    margin-top: -10px;
    width:80%;
    height:550px;
}

    .p1{
        background-color: aliceblue;
        color:000;
        font-size:12px;
        width:230px;
        z-index: 1;
        float:left;
        margin: 0px;
        padding:0px;

    }

    ... /*Styles for p2 to p8 remain unchanged*/

    .p9{
        background-color: green; /*Changed from previous duplicate entry*/
        width:230px;
        z-index: 1;
        float:left;
        margin-top: 20px;
        padding:0px;
    }

The urge to fling my laptop out the window grows stronger by the minute. Any advice or assistance you could provide would be immensely valued! Feel free to ask if you require the html code as well.

cssresponsivespace

Answer №1

Here is a simple starting point for you to work with. I have provided the CSS styling focused on creating a responsive container using flexbox. Each item within the container has a width of 33% and a height of 30px for demonstration purposes.

/* Custom Styles */

#container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  margin-top: -10px;
  width: 80%;
}

[class^="p"] {
  width: 33%;
  height: 30px;
}

.p1 {
  background-color: aliceblue;
}

.p2 {
  background-color: red;
}

.p3 {
  background-color: blue;
}

.p4 {
  background-color: purple;
}

.p5 {
  background-color: green;
}

.p6 {
  background-color: brown;
}

.p7 {
  background-color: yellow;
}

.p8 {
  background-color: red;
}

.p9 {
  background-color: green;
}
<div id="container">
  <div class="p1"></div>
  <div class="p2"></div>
  <div class="p3"></div>
  <div class="p4"></div>
  <div class="p5"></div>
  <div class="p6"></div>
  <div class="p7"></div>
  <div class="p8"></div>
  <div class="p9"></div>
</div>

Answer №2

Initially, I made a modification to the CSS code by adding a new rule at the end, which successfully achieved the desired outcome:

#container > div {
   width: 230px;
   margin-top: 20px;
}

Check out the updated version here

Furthermore, when dealing with elements that share similar parameters (like your floated elements with the same width, size, and margin-top), it is advisable to use a universal class for all of them, along with separate classes for specific elements containing unique properties. In my adjustment above, I addressed the width and margin-top. You could also incorporate the height into this approach, while leaving the definition of background-color for individual classes. Additionally, please note that z-index serves no purpose in this context, so you can eliminate it from all rules.

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

The CSS overlay effect refuses to shut down

Greetings everyone, I'm new around here so please bear with me. I am encountering an issue wherein the overlay only works in one direction - it appears when the button is clicked, but nothing happens when attempting to close it. I have tried adjustin ...

jqueryhtmlcssscrolloverlay

Ways to reset a JQuery/JavaScript filter

I am currently working on a list of div items that are being filtered and sorted using JavaScript. Each item animates as it enters the screen, scaling up to its final size. However, when I apply filters using buttons, items that are already displayed do n ...

javascriptjquerycss

Is it possible for the `drop-shadow` shadow to be applied only to certain elements?

In the top image below, you can see how the drop-shadow effect would be drawn if applied to the top element. I am exploring the possibility of having the shadow cast only on specific objects, as shown in the bottom image. I am open to unconventional solut ...

cssdropshadowcss-filters

Ways to display the main image on a blog post

This piece of code is designed for displaying the relevant post associated with wp_ai1ec_events function display_event($atts ) { global $wpdb; $event = $wpdb->get_results("SELECT * FROM wp_ai1ec_events ORDER BY start"); ...

phphtmlcsswordpress

The selection choices in the HTML <select> dropdown appear oversized on Chrome browsers

There has been a recent change in Chrome versions, likely in June 2017, that is causing options in a <select> input to appear much larger than in other browsers or older versions of Chrome. For instance, on some machines, the dropdown on this w3scho ...

htmlcssgoogle-chromehtml-selectchromium

Top and bottom borders embraced by text: the ultimate header design

I'm looking to create a screen-wide headline with a simple text-logo. The challenge is to make it touch the container's top and bottom borders like this example, including its half-height variations. Upon inspecting the HTML, I noticed that ther ...

htmlcss

Choose either nth-child or nth-of-type within a nested element

Here is the HTML code snippet: <div class="homepage-body"> <a href="#"> <div class="homepage-item"> <div class="homepage-icon"></div> <div class="homepage-text"> Test1 </di ...

htmlcsscss-selectors

Maintain the fixed position of the table header while scrolling

I am facing an issue with my table setup - I want the header to stay fixed while scrolling through the body. Here is how my table structure looks: <table> <thead> <tr> <th>Header 1</th> ...

jqueryhtmlcsshtml-tablecss-position

The inline-block property can become unstable when dealing with a large number

When I create a parent container div with three child divs and set the display property to inline-block, everything looks great on jsfiddle CSS #container { border: 1px solid blue; padding: 2px; display: inline-block; } .child { width: ...

htmlcss

Fancybox 2 - CSS styles vanish when using Ajax request

I have a fancybox2 with static dummy content that has styling applied. It works fine, but now I need to load dynamic content via ajax. However, when I make the ajax call, the required content loads but loses all css styling, most likely due to changes in t ...

jqueryhtmlcssajaxfancybox-2

Ways to stop button from wrapping inside a div

While working on a search page, I encountered an issue where the submit button overlaps with the text input when zooming in due to lack of space. Is there a solution to prevent this overlapping and keep the layout intact? HTML <input type="text> &l ...

htmlcss

Pictures failing to appear in css/jquery slider

I have a total of 12 divs that are configured to display a thumbnail along with some text dynamically retrieved from a database query. When displayed individually, they appear fine in a column format with a border around them showcasing the thumbnail and t ...

jquerycsseasyslider

Tips for implementing a CSS override for a block element's relative date

I am looking to customize this source code by using a CSS override to ensure that the "lightning-relative-date-time" element is not utilized. I want to keep it displaying the timestamp information by default. Can you guide me on how to achieve this throu ...

css

Changing background images with CSS upon mouse hover

I've been attempting to create a mega menu-like design, but so far, I haven't had much success. Below is the code I've been using for the simplest possible result. The setup involves two divs - one for an image and another for the menu. The ...

javascriptjqueryhtmlcss

How can you position text to the right of an image using CSS?

Trying to right-align text next to an image; CSS .p1 { position: absolute; width: 100px; height: 50px; top: 40%; left: 70%; } HTML <img src=../images/diagram1.png alt="Diagram"/> <span class="p1">This is a tes ...

csshtml

Completely adaptable progress bar that adjusts to any screen size

I need to develop a responsive progress bar that adjusts its width dynamically. However, when I set the width to auto, the progress bar line becomes detached from the stars. How can I resolve this issue and make the progress bar responsive on mobile device ...

htmlcssflexboxresponsive

Is there a way to align these images vertically on a smaller device screen?

I am attempting to arrange these images vertically on a smaller screen, displaying them in one column instead of two. https://i.sstatic.net/B0aTJ.png Below is the code I currently have: <div class="container"> <div class="ro ...

cssbootstrap-5

The CSS div mysteriously vanishes right before I can trigger the click event

My CSS code looks like this: #searchbar-wrapper input#header-searchbar:focus + #search-dropdown-wrapper { display: block; } The purpose of this code is to make a dropdown visible when a user focuses on a textbox. The default behavior should be th ...

css

Deletion of a custom function in JavaScript

I have written some basic code to generate and remove an image using functions. Specifically, I need help with removing the image created by the function Generate() when a button linked to the function Reset1() is clicked. Here's the code snippet for ...

javascripthtmlcss

Pressing the button in the navigation bar results in an expansion of the navbar

Can someone help me figure out why my navbar's height is different from the example on this Bootstrap navigation bar snippet? Here's the code I used: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h I copi ...

htmlcssbootstrap-4