Looking to create a div in HTML with two columns and two rows for display

Query: I am facing issues adjusting these grids using HTML and CSS. I have attempted to place them in a single frame within a separate div, but it's not working as expected. I need help aligning the grids according to the provided image below. Can someone please assist? [![Take a look][1]][1]

Here is the code snippet I have tried: HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="CSS/styles.css">
    <script>
        src = "Javascript/javascript.js"
    </script>
</head>

<body>
    <div id="header">
        <div class="logo">
            <img src="Images/logo.jpg" alt="">
            <div class="text">
                <p>
                    Create your own board right now!
                </p>

                <div class="button">
                    <button type="button">Click Here!
                    </button>
                </div>
            </div>
        </div>
        <nav id="navbar">
            <ul>
                <li>
                    Home |
                </li>
                <li>
                    Create a Board |
                </li>
                <li>
                    Support Forums |
                </li>
                <li>
                    Board Directory |
                </li>
                <li>
                    FAQs |
                </li>
                <li>
                    Contacts



    </div>
    <div id="secondbodytext">

        <!--  <img id="bgimgid" src="Images/background.png" alt="">#region -->
        <img id="overimg1" src="Images/Screenshot from 2022-02-18 10-10-58.png" alt="">
        <div id="firsttextdiv">
            <p id="firsttextdiv">
                <img id="overimg2trans" src="Images/trans.png" alt="">
                Unlimited forams, categories „ and posts Private forums , Unlimited moderators. Surer moderators and
                administrators Access permissions and post permissions
            </p>


        </div>
        <img id="overimg2" src="Images/2nd.png" alt="">
        <div id="secondtextdiv">
            <p id="secondtextdiv">

                Personal image gallery Through a revolutionary „. </p>
        </div>
        <img id="overimg3" src="Images/3rd.png" alt="">
        <div id="thirdtextdiv">
            <p id="thirdtextdiv">
                <img id="overimg3trans" src="Images/trans.png" alt="">

                Thread count y Private messaging.
                Personal pone page style sheet wizard, you can create a truly unique layout
            </p>
            <img id="overimg1trans" src="Images/trans.png" alt="">
        </div>
        <img id="overimg4" src="Images/4th.png" alt="">
        <div id="fourthtextdiv">
            <p id="fourthtextdiv">
                Total psitors y Privacy setting y Change every image y Template system_ y y Total number at registered
                users Last user registered </p>
        </div>
    </div>

</body>


</html>

CSS:

.

container
{
  
    background-color: rgb(237, 241, 237);
}
.text
{
    background-color: rgb(251, 255, 251);
    float: right;
    font-size: larger;
   
    
}
.button{   
    float: right;
}
#bgimgid{
    
}
#overimg1
{
    position: absolute;
    top: 1600px;
    left: 190px;
    opacity: .7;
}
#overimg2
{
    position: absolute;
    top: 1600px;
    left:550px;
    opacity: .7;
}
#overimg3
{
    position: absolute;
    top: 1600px;;
    left: 900px;
    opacity: .7;
}
#overimg4
{
    position: absolute;
    top: 1600px;
    left: 1200px;
    opacity: .7;
}

#thirdtextdiv{
    position: absolute;
    top: 890px;
    left: 310px;
    color: white;
    font-size: medium;
}
#firsttextdiv{
    position: absolute;
    top: 890px;
    left: 120px;
    color: white;
    font-size: medium;
   
}

#secondtextdiv{
    position: absolute;
    font-size: medium;
    top: 890px;
    left: 480px;
    color: white;
}

#fourthtextdiv{
    position: absolute;
    top: 890px;
    left: 620px;
    color: white;
}

#overimg1trans{
    position: absolute;
    top: 560px;
    left: 1px;
    width: 20px;
    
    

}

#overimg2trans{
    position: absolute;
    top: 570px;
    left: 1px;
    width: 20px;
    
    

}
#overimg3trans{
    position: absolute;
    top: 50px;
    left: -20px;
    width: 20px;
    
    

}
#overimg4trans{
    position: absolute;
    top: 560px;
    left: 1px;
    width: 20px;
    
    

}
#overimg5trans{
    position: absolute;
    top: 560px;
    left: 1px;
    width: 20px;
    
    

}
#overimg6trans{
    position: absolute;
    top: 560px;
    left: 1px;
    width: 20px;
    
    

}

#background img
{
width: 100%;
  height: 100%;
}

#secondcontainderdiv
{
width: 30%;
  height: 100%;
  margin-left: 40%;
}

#navbar
{background-color: rgb(99, 93, 192);
    

}
#navbar ul li
{
    display: inline-block;
    padding: 5px;
    color: beige;
    font-size: larger;

 
}
#bodytext
{
  
    position: absolute;
    top: 300px;
    left: 760px;
   

}
#firsthead
{
    background-color: rgb(110, 100, 100);
   display: inline-block;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: larger;
   height: 30px;
   opacity: .7;
   padding: 20px;
   
    
}
#secondhead
{
    background-color: rgb(255, 255, 255);
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: larger;
    height: 30px;
    opacity: 0.3;
    padding: 20px;
    
}
#bodybutton
{ background-color: #4CAF50;
    display: inline-block;
    margin-left: 120px;
    height: 30px;
    padding: 20px;
    width: 150px;
    height: 80px;
}

#bodybuttonblue
{
    background-color: #4c5baf;
    font-style: italic;
   text-decoration: underline;
   margin-left: 920px;
   padding: 20px;
}
htmlcssbootstrap-4

Answer №1

For achieving this design, it is recommended to utilize the CSS Flexible Box Layout Module. With just a few lines of code, you can easily create the desired layout.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="">
    .section-wrap{
      display: flex;
      align-items: center;
     
      box-shadow: 0 0 0 15px #fff; flex-wrap: wrap;
    }
    .section-wrap > div{  flex-basis: 50%;}

    .imgBox { height: 300px; background: #eee;   display: flex; margin: 20px;
      align-items: center; justify-content: center;}

  </style>

</head>

<body>

  <div class="section-wrap">

    <div class="section-div">
      <div class="imgBox"><img src="" alt="img"></div>
    </div>
    <div class="section-div">
      <div class="imgBox"><img src="" alt="img"></div>
    </div>
    <div class="section-div">
      <div class="imgBox"><img src="" alt="img"></div>
    </div>
    <div class="section-div">
      <div class="imgBox"><img src="" alt="img"></div>
    </div>

  </div>

</body>

</html>

Answer №2

After analyzing the example you provided, I have created a sample code utilizing flexbox for better layout control;

Here is the HTML structure;

<code>
       <body>
            <div>
                <h2 align="center">Recent Forums</h2>
            </div>
            <div class="flex-container">
                <div>
                    <div>
                        <h3> Announcements</h3>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</p>
                    </div>
                    <div>
                        <h3> Announcements</h3>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</p>
                    </div>
                </div>
                <div>
                    <div>
                        <h3> Announcements</h3>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</p>
                    </div>
                    <div>
                        <h3> Announcements</h3>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</p>
                    </div>
                </div>
        </div>
    </body>

</code>


<code>
body {
  width: 90%;
  margin: 20px;
}
  
 .flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center {
  text-align: center;
}
</code>

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

Improprove Google PageSpeed score - must resolve

My mobile website is loading incredibly slow, despite my attempts to improve the speed using Google PageSpeed insights. Unfortunately, I'm having trouble interpreting the screenshot and identifying what changes need to be made. Is there anyone who c ...

jqueryhtmlcsspagespeedgoogle-pagespeed

Unable to display imported image in React application

I have a component where I want to display an image: import React from 'react' import background from '../media/content-background.jpg' function ContentPage(){ return( <div id="content-page"> < ...

htmlcssnode.jsreactjswebpack

When CSS animations are used on numerous elements, it can lead to variations in the speed of

I made an animation to move elements from the top to the bottom of a page. I have 4 objects with this animation applied, but for some reason, they are moving at different speeds. It's confusing me. What could be causing this inconsistency? body { ...

htmlcsscss-animations

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

Similar Inquiry: jQuery check if image is loaded I find myself in a scenario where the following HTML structure is utilized: <div class="image"> <img class="" src="content-images/1.jpg"> <span class="slide" rel="content-images/ ...

javascriptjquerycssimage

Utilize the input type=date value in the date function to obtain a specific format

How can I pass the value of input type=date to a JavaScript date function? In my HTML code, I have used: <input type=date ng-model="dueDate"> <input type="time" ng-model="dueTime"> <button class="button button-block" ng-click="upload_dueda ...

javascriptsqlangularjshtml

Transferring HTML5 Video data by breaking it into segments and streaming it through several HTTP/

Looking for ways to speed up the loading time of an html5 video? Is there a method to make a browser process each webm video fragment as individual TCP streams, in order to take advantage of HTTP/2's enhanced parallelization? ...

htmlhtml5-videohttp2

Overlay text on top of image with fading transparency when hovering over it

Is there a way to make the transparent layer that appears when hovering over an image on a card only cover the image itself and not extend onto the footer of the card? Currently, the image on the card covers most of it, and I want the hover overlay to beh ...

htmlcssimage

Different ways to adjust the appearance of table borders in HTML

I find myself at a standstill, hence why I am reaching out with this question. This Table presents itself with various border sizes and colors, along with similar complexities in the background of its cells. Could anyone provide me with guidance on how t ...

htmlcsscolorshtml-tableborder

The alignment of the website design is off

I'm in the process of creating a custom template for my website and everything was going smoothly until I encountered an issue with the news bar placement. Instead of appearing below the navbar and welcome message bar, it's showing up above the n ...

csshtml

Utilize Wordpress TinyMCE to apply the underline decoration using the "U" tag instead of the style

Is there a way to modify the function of the button in the WordPress content textarea of TinyMCE? Specifically, I am referring to the "u" button for underline formatting. <span style="text-decoration-line: underline;">text underlined</span> I ...

htmlwordpresstinymceeditor

Authenticate through Twitter when using PhoneGap Cordova

Looking to implement Twitter login in my application using JavaScript and HTML. How can I redirect users to the Twitter login page when they click on the "Sign In with Twitter" button? ...

javascriptandroidhtmlcordova

Stopping videos in the JQuery Cycle Plugin triggers the stop event

Currently, I have a simple cycle set up with YouTube videos using the following code: <script type="text/javascript"> $(document).ready(function () { $('#cycle').cycle({ fx: 'fade', sp ...

javascripthtmljqueryjquery-events

Transfer information from .gs (Google Apps Script) to a variable inside a <script> tag in an HTML document

[ {"id":1,"label":"Node 2"}, {"id":2,"label":"Node 3"}, {"id":3,"label":"Node 4"}, {"id":4,"label":"Node 5"} ] Hello there! The function getArray() in the code snippet above is returning the specified string ↑. I need help connecting this data w ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

Adjust the width of the unordered list to match the width of its widest child element

I'm encountering a minor issue with displaying a ul element as I am just starting to learn CSS. My goal is to set the width of my ul to match the widest listitem it contains. Below is the HTML code I have used: <div id="sidebar"> <ul i ...

jqueryhtmlcss

A CSS3 property that does not have a vendor prefix, followed by properties that do have vendor prefixes

As discussed in a response on Stack Overflow, one reason for the necessity of vendor prefixes in CSS properties is to prevent web pages from breaking even if the final specification varies from the implementation by different browsers. In a recent reading ...

cssvendor-prefix

Create a customized menu with jQuery that disappears when hovered over

Check out this menu I've created: http://jsbin.com/useqa4/3 The hover effect seems to be working fine, but I'm looking to hide the div #submenuSolutions when the user's cursor is not on the "Solution" item or the submenu. Is there a way to ...

javascriptjquerycssmenudrop-down-menu

Slideshow through each item using Typescript and Angular8

I came across a solution in this carousel on by one link, but I'm struggling to work with the jQuery code even though I have JQuery installed in my project. For example: const next = jQuery(this).next(); I am looking to convert the JQuery code from ...

jquerycssangulartypescriptcarousel

How can we ensure that pointer events return the same coordinates as touch events when the viewport is zoomed in?

I attempted to utilize pointer events (such as pointerdown) instead of using a combination of touch events (e.g. touchstart) and mouse events (e.g. mousedown) to determine the input event coordinates. var bodyElement = document.body; bodyElement.addEvent ...

javascripthtmlgoogle-chromemobilepointer-events

Troubleshooting the Full Height Feature for Sidebar (Panel) in Twitter Bootstrap

I'm having issues with the Sidebar (Panel) in Twitter Bootstrap. I'm encountering some trouble with how it is displayed. Below is the CSS code I am using for the sidebar: .sharecartside .content { height: 100% !important; min-height: 10 ...

jqueryhtmlcsstwitter-bootstrap

Troubleshooting issues with rowspan in a Datatable

I am currently utilizing jQuery DataTables to display my grid data and implementing the rowspan concept with the rowsGroup option. Initially, it works well by spanning some rows and looking visually pleasing, but eventually, it starts failing. Here are so ...

javascriptjqueryhtmldatatables