Create containers on the right side using HTML

Struggling to align the small boxes on the right side while keeping the left boxes from blending under them? I've attempted various solutions, but each time it seems like the code breaks. By the way, I utilized a generator to create the grid.

Here is the HTML & CSS:

/*  GRID OF TWO ============================================================================= */

.span_2_of_2 {
    width: 30%;
    border-top: 4px solid #fff;
    box-shadow: 0px 1px 2px #151515;
    clear: right;
    float: right;
}

.span_1_of_2 {
    border-top: 4px solid #fff;
    width: 65%;
    box-shadow: 0px 1px 2px #151515;
    clear: left;
    float: left;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 990px) {
    .span_2_of_2 {
        width: 100%; 
    }
    .span_1_of_2 {
        width: 100%; 
    }
}

body {
    background-color: #F2F2F2;
}

.body_large {
    background-color: white;
    height: auto;
    margin-top: 1.5%;
    color: black;
}

.box_text {
    padding: 3%;
    font-size: 14px;
}

/* SECTIONS ============================================================================= */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/* GROUPING ============================================================================= */

.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/* GRID COLUMN SETUP ==================================================================== */

.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

/* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0 1% 0%;
    }
}
<!DOCTYPE html>
<!-- HTML5 Boilerplate -->
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

<head>

<meta charset="utf-8">
<!-- Always force latest IE rendering engine & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Example of the Responsive Grid System</title>
<meta name="description" content="This is the Responsive Grid System, a quick, easy and flexible way to create a responsive website.">
<meta name="keywords" content="responsive, grid, system, web design">

<meta name="author" content="www.grahamrobertsonmiller.co.uk">

<meta http-equiv="cleartype" content="on">

<link rel="shortcut icon" href="/favicon.ico">

<!-- Responsive and mobile-friendly stuff -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Stylesheets -->
<link rel="stylesheet" href="css/html5reset.css" media="all">
<link rel="stylesheet" href="css/col.css" media="all">
<link rel="stylesheet" href="css/2cols.css" media="all">
<link rel="stylesheet" href="css/style.css" media="all">
<style type="text/css">

/*  
======================== 
Note: These styles are just for prettifying the basic page. 
Ignore these when pasting into your site as your stylesheet should handle aesthetics!
======================== 
*/
body { padding:2em; font : 100%/1.4 'Helvetica Neue', arial, helvetica, helve, sans-serif; 
 }
h1 { font-size:2.2em; padding:0 0 .5em 0; }
h2 { font-size:1.5em; }
.header { padding:1em 0; }
.col { background: black; color: white; padding: 1% 0; text-align: center;}

</style>

</head>
<body>

<!-- THE SMALL START HERE -->
<div class="section group">
<div class="col span_2_of_2">
Player of the Week
<div class="body_large" style="margin-top: 3%">
<div class="box_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div>

<div class="col span_2_of_2">
Clan Information
<div class="body_large" style="margin-top: 3%">
<div class="box_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div>
</div>

<!-- THE SMALL END HERE -->

<div class="section group">
<div class="col span_1_of_2">
New Clan Name!
<div class="body_large">
<div class="box_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div>
</div>



<div class="section group">
<div class="col span_1_of_2">
New Teamspeak 3 server!
<div class="body_large">
<div class="box_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

</div>
</div>


<!-- -->
</div>

<div class="section group">
<div class="col span_1_of_2">
New clan with a brand new website!
<div class="body_large">
<div class="box_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div>
</div>

</body>


</html>
htmlcss

Answer №1

Here's a suggestion:

body {
      font-family: 'Helvetica Neue', arial;
}

#wrapper {
      overflow: auto;
      padding: 10px;
}

#right {
     width: 30%;
     float: right;
}

#left {
     width: 65%;
     float: left;
}

.parent {
      text-align: center;
      border: 1px solid #ccc;
      background-color: #fff;
      padding-top: 5px;
      margin-bottom: 5px;

}

#left .parent {
     margin-bottom: 18px;
}
        
.main {
     background-color: #000;
     padding-bottom: 10px;

}


.main h3 {
     margin:0;
     color: #fff;
     padding: 10px 0;
}

.main .content {
    background-color: #fff;
    padding: 10px;
    font-size: 16px;
}

@media screen and (max-width: 990px) {

    #right, #left {
        float: none;
        width: 100%;
    }
}

<div id="wrapper">

    <div id="right">

        <div class="parent">

            <div class="main">

                <h3>Player of the Week</h3>

                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                </div>
            </div>
       </div>

        <div class="parent">

            <div class="main">

                <h3>Clan Info</h3>

                <div class="content">

                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                </div>
            </div>
        </div>

    </div>

    <div id="left">

        <div class="parent">

            <div class="main">

                <h3>New Clan Name!</h3>

                    <div class="content">

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    </div>
                </div>
            </div>

        <div class="parent">

            <div class="main">

                <h3>New Teamspeak 3 Server!</h3>

                <div class="content">

                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
              </div>
          </div>
      </div>

        <div class="parent">

            <div class="main">

                <h3>New Clan & Brand New Website!</h3>

                <div class="content">

                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
              </div>
          </div>
      </div>
  </div>
</div>

Answer №2

attempt it on the table

<html>

<table border = 1>

  <tr>
    <td>box 1</td>
    <td>box 2</td>
    <td rowspan="2" >box 3</td>
  </tr>
  
  <tr>
    <td>box 4</td>
    <td>box 5</td>
  </tr>
  
  <tr> 
    <td>box 6</td>
    <td>box 7</td>
    <td rowspan="2" >box 10</td>
  </tr>
  
  <tr> 
    <td>box 8</td>
    <td>box 9</td>
  </tr>
 
</table>
</html>

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

What is causing the pull-right class to not function correctly in Bootstrap version 4.1.0?

After upgrading from Bootstrap version 3+ to 4.1.0, I encountered an issue with aligning elements using pull-right and pull-left, as well as float-right and float-left. The problem persists despite my efforts. Here is an image (https://i.sstatic.net/Z6ba3. ...

cssbootstrap-4

Unexpected results can occur when using ngClass and CSS with all unset

Within my Angular 4 project, I am utilizing ngClass on an object that contains a CSS class applied with unset: all within it. Despite knowing that ngClass adds its properties, the expected result was for all values to be unset and the style elements from n ...

htmlcssangular

Transfer the information from dropped files in a div to a separate page

document.getElementById('drag_drop').ondrop = function(event) { event.preventDefault(); var form_data = new FormData(); var drop_files = event.dataTransfer.files; for(var count = 0; count < drop_files.length; count++) ...

javascriptphphtml

Is there a way to extract content from an HTML <span id> using Python, Selenium, and BeautifulSoup?

I've been working on a project to create a web scraping tool using Python, Selenium, beautifulSoup, and pandas to generate a .csv report. Unfortunately, I'm facing an issue with extracting the "data-date" text from the HTML snippet below. Specif ...

pythonhtmlpandasseleniumbeautifulsoup

Is it possible to include parameters in an HTML GET request with Electron.Net?

I have successfully implemented a function in an Angular component within an Electron application using HttpClient: var auth = "Bearer" + "abdedede"; let header = new HttpHeaders({ "Content-Type": 'application/json&a ...

htmlangularelectron

Problem with Scroll Listener on Image in Angular 4: Window Scroll Functioning Properly

Hello, I am a newcomer who is currently working on creating a small application that allows users to zoom in on an image using the mouse scroll. <img (window:scroll)="onScroll($event) .....></img> The code above works well, however, it detec ...

javascripthtmlangularscroll

Steps for performing a 'back' action within a div element using jQuery

Within my HTML, I have a div element containing a link. When the user clicks this link, I use AJAX to load new content into the div area. This new content includes a 'back' link that, when clicked, should revert back to the previous content. Cur ...

jqueryhtmlajax

Unable to retrieve file on Linux system through PHP

<?php // Ensuring that an ID is provided include('include/function.php'); if(isset($_GET['id'])) { // Retrieving the ID $id = intval($_GET['id']); // Validating the ID if($id <= 0) { die('Th ...

javascriptphphtmlmysqlcss

Hiding labels in an HTML document can be achieved by using CSS

Recently, I've been working on a code that relies on a specific Javascript from Dynamic Drive. This particular script is a form dependency manager which functions by showing or hiding elements based on user selections from the forms displayed. Oddly ...

javascripthtml

Press the div, excluding the button - Vue

I have a basic div that spans 100% of the width, containing a button inside. The issue I'm facing is that when I add a click event to the div, the entire div becomes clickable (including the button within it). What I want is for the whole div to be ...

javascriptcssvue.jsvuejs2vuejs3

Adding a JSON array to HTML using JavaScript

Looking to incorporate JSON Array data into an HTML list with Headings/Subheadings using JavaScript. I experimented with two methods - one involving jQuery and the other mostly vanilla JS. The initial attempt (link here: http://jsfiddle.net/myu3jwcn/6/) b ...

javascripthtmljquery

Problems with navigation alignment in Flask website due to HTML, CSS, and

Here's a snapshot of my current website design: website I'm attempting to place the Login & Sign up buttons in line with the rest of the navigation bar. I've tried various methods without success so far. My attempts include adjusting text a ...

htmlcssflask

Find the ID of the clicked table row using HTML and JavaScript

Currently, I am trying to implement this code snippet: <td align="center"> <div class="dropdown"> <button onclick="DropdownShow(this)" class="btn btn-default glyphicon glyphicon-picture"></button> <div id="@TableR ...

javascripthtml

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/: https://i.stack.imgur.com/svzIg.png This table should have two scrollbars, one for the light blue SCROLL column and another ...

javascripthtmlcsshtml-table

Ways to manage the gap among flex items

I'm currently going through some educational material on Codeacademy, and I'm curious about how I can control the spacing between the "locations" text and the three divs below it. The task requires me to create a 15px gap between them, but I am u ...

cssflexbox

Stacking background images in CSS above other contained elements in a div

I've been experimenting with adjusting the z-index of elements in my code but haven't had any luck. Is it even possible to achieve what I want? Within a div element, I have set a background image using CSS. Inside this div, there are other eleme ...

htmlcssz-indexbackground-image

Create a page that expands to full height with the ability to scroll

I am trying to achieve a layout using flex that fills the entire height of the screen. My goal is to have a red background that scrolls based on the content inside. If there is more content, I want it to maintain the same size and just add a scroll bar. I ...

cssflexbox

Creating a Custom Bookmark Title for Apple Touch Icon on Mobile Homescreen

Can the title of a touch icon on the homescreen of an iOS device be customized? https://i.sstatic.net/9YL0t.jpg While it's currently acceptable, I am interested in creating a custom title instead of using a default one. ...

htmliosfavicon

Reorganize containers without relying on bootstrap styling

Is there a method to rearrange the order of two divs without using the bootstrap library? <div class='parent'> <div class='child-1'>Abc..</div> <div class='child-2'>Xyz..</div> </div> I ...

jqueryhtmlcssflexbox

Unexpected CSS counter reset issue encountered within nested elements

Utilizing css counters for the formatting of certain wiki pages is a common practice that I implement by adding CSS directly to the wiki page. One particular use case involves numbering headers using counters. Below is a snippet of the code that demonstra ...

htmlcss