Creating three boxes within a single div using standard HTML and CSS

I created this design using Microsoft Paint and now I want to bring it to life using HTML and CSS.

https://i.stack.imgur.com/dwNZi.png

The numbers represent the box numbers in the design.

Here is my attempt at coding this:

HTML file

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

<head>
  <meta charset="utf-8">
  <title>test</title>
  <link rel="stylesheet" type="text/css" href="box.css">

</head>

<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3">
    <div id="box4"></div>
    <div id="box5"></div>
    <div id="box6"></div>
    <div id="box7"></div>
    <div id="box8"></div>
  </div>

</body>

</html>

CSS file

html, body {
    margin: 0px;
    height: 100%;
    width: 100%;
}

#box1 {
    border: solid black 3px;
    height: 10%;

}

#box2 {
    border: solid black 3px;
    height: 3%;
}

#box3 {
    border: solid black 3px;
    height: 84%;
}

#box4 {
    border: solid black 1px;
    width: 50%;
    height: 95%; 
    float: left;
    margin: 5px;
}

#box5 {
    border: solid black 1px;
    width: 23%;
    height: 25%;
    float:left;
    margin-left: 10px;
    margin-top: 6px;
}

#box6 {
    border: solid black 1px;
    width: 23%;
    height: 30%;
    float:left;
    margin-top: 10px;
    margin-left: 10px;
}

#box7 {
    border: solid black 1px;
    width: 23%;
    height: 30%;
    float:left;
    margin-top: 10px;
    margin-left: 10px;
}
#box8 {
    (missing code for box8 styling goes here)
}

View how it looks:

https://i.stack.imgur.com/rzexS.png

I'm struggling to get box8 positioned on the right side and setting it as a float right messes up the layout. Also, the boxes inside box3 are inconsistent. When I fullscreen the page, the boxes move to the right side instead of staying put. I tried using percentages for responsiveness but it didn't work as expected. Can anyone provide guidance on how to achieve this design?

Answer №1

To create a grid layout using flexbox, you will need to utilize wrapper divs and apply different flex-directions to each. This will allow you to achieve the desired grid structure.

body, html {
height: 100%;
width: 100%;
overflow: hidden;
}

.box-wrapper { 
  height: 100vh; 
  width: 100vw; 
  display: flex; 
  flex-direction: column;
}

#box1 {
  padding:10px;
  height:30px; 
  line-height:30px;
  border: solid 1px red
}

#box2 { 
  height: 15px;
  padding: 8px;
  border: solid 1px blue
}

#box3 { 
  padding: 10px;
  flex-grow:1; 
  display: flex;
  flex-direction: row;
  border: solid 1px green
} 

#box4 {
  flex-grow:2; 
  border: solid 1px orange
} 

.middle-column {
  flex-grow:1; 
  display: flex; 
  flex-direction: column;
  
} 

.middle-column div{ 
  flex-grow:1;
  margin: 0 8px;
  border: solid 1px #6e6e6e;
} 

.middle-column div + div { 
  margin-top: 8px
} 

#box8 { 
  flex-grow:1;
  border: solid 1px black
}
<div class="box-wrapper">
  <div id="box1">1</div>
  <div id="box2">2</div>
  <div id="box3">
    <div id="box4">4</div>
    <div class="middle-column"> 
      <div id="box5">5</div>
      <div id="box6">6</div>
      <div id="box7">7</div>
    </div> 
    <div id="box8">8</div> 
  </div>
</div

https://i.stack.imgur.com/C68gV.png

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

Tips for aligning two columns of listed items vertically with Bootstrap 5 or CSS

Having difficulty aligning two columns containing text - specifically, two lists. The goal is to have both columns on the same row with centered lists and their respective items aligned as normal bullet points. Any advice would be greatly appreciated. C ...

Failure to Present Outcome on Screen

Seeking assistance! I attempted to create a mini loan eligibility web app using JavaScript, but encountered an issue where the displayed result did not match the expected outcome upon clicking the eligibility button. Here is the HTML and JavaScript Code I ...

Creating a sleek animation with JQuery for a dynamic-width div

Here is a snippet from my latest project. Take a look at the demonstrationFIDDLE. In this project, I have created a list with buttons: <a href="#f1" class="bt">1 <div class="show">Computers Networking</div> </a> When you ...

Once you address a block using jQuery

$(function(){ $(window).scroll(function () { var scrollVal = $(this).scrollTop(); var adscrtop =$(".header").offset().top // 在 RWD 767以下不作動 if(window.screen.width>767){ if(sc ...

Creating a JavaScript array in Rails 4 based on current data without the need to reload the webpage

Currently in my rails 4 app, I am working on a unique tags validation using jquery validate to ensure that tags are not duplicated before they can be added to an item. The tag list structure is as follows: <div id="taglist"> <span class="label ...

What's the difference in width between Inline-Block and Float?

HTML <ul> <li><a href="#">Item #1</a></li> <li><a href="#">Item #2</a></li> <li><a href="#">Item #3</a></li> <li><a href="#">Item #4</a></li> & ...

Is there a way to adjust the padding temporarily?

Important Note: Despite the misleading title of my question, it doesn't accurately reflect my actual query (sort of). Below is the code snippet in question: .one{ background-color: gray; } .two{ padding: 20px; } <div class = "one"> < ...

"Is there a way to modify the color of the button once it's been clicked, but only for the specific button that was

Looking to create a Quiz App using React and facing an issue where all buttons change color when clicked, instead of just the one that was clicked. Any solutions on how to make only the clicked button change its color in React.js? App.js import Main from ...

How to Create a Hover Drop Down Menu that Disappears When Not Hovered Over

When I hover over the drop down menus on my Navbar, they display perfectly. However, it's impossible to click on the items in the menu because as soon as I move the cursor away from the main nav, it disappears. I've tried adding display:block and ...

Leveraging AngularJS to enhance the dynamic HTML content within Datatables

My angular application includes a Datatable where I alter cell content to include HTML elements. In the given code snippet, I specifically modify the cell content of the 5th column to incorporate links. Additionally, I intend to implement a tooltip featur ...

Is there a reason why the Chrome browser doesn't trigger a popstate event when using the back

JavaScript: $(document).ready(function() { window.history.replaceState({some JSON}, "tittle", aHref); $(window).bind("popstate", function(){ alert("hello~"); }); }); Upon the initial loading of the www.example.com page, the above JavaScript code is ex ...

When using a jQuery function, remember to always return false

I'm currently developing a forum and looking to implement client-side form validation. However, I'm unsure about how to validate the form before submission. I've tried using an 'on' function, but I need a way to notify the user if ...

Has Apache initiated a forced logout process?

Running a LAMP server, I have implemented Apache basic authentication to log in users accessing the server homepage. I am currently seeking a way to enforce user logout, but my attempts with mod_session & mod_auth_form have not been successful. The page ...

HTML 5 functions properly when loaded directly as a .html file, but encounters issues when hosted on either a Django or Node

I'm having trouble getting a video to play on a webpage. Initially, I followed a standard example I found online by using the following code: <video src='video.mp4' controls></video> When I open the .html file in Safari and dou ...

Personalizing the Navigation Bar

I am in the process of designing the navigation bar for my website that will work seamlessly on both desktop and mobile devices. To view my progress so far, check out this JS Fiddle link Here is the HTML code I have created: <div class="container-flu ...

Navigate to a local server running on localhost:3000 and access the external URL www.google.com

When attempting to access an external URL, the website that should open in a new tab is redirecting to http://localhost:3001/www.google.com instead of www.google.com. <IconButton key={index} size="large" color="primary" href={e.url ...

Is there a way to embed HTML code within a JavaScript variable?

Embedding HTML code within Java Flow can be quite interesting For instance: Check out this JSFiddle link And here's how you can incorporate it into your script: widget.value += ""; Generating a Pro Roseic Facebook POP-UP Box through Widg ...

What is the proper way to convert the Vue3 ::v-deep SASS syntax to utilize :deep?

HTML: <template> <form class="bg-white"> <div class="source-field"> ... The original SASS code looks like this: .form::v-deep .source-field width: 129px display: inline-block margin: 0px 2px 5px 2px ...

Fetch data using Ajax without the need for a hash signal

My current goal is to load content through Ajax on a website. Let's say our main page is example.com/blankpage (I've eliminated the .html extension using htaccess). At the moment, I have it set up so that when a link on the page directs to mysite ...

Generating dynamic XElements within an XDocument through iteration

Is there a way to dynamically generate 'n' number of XElements within an XDocument using a loop, based on the number of files found in a directory? The code for my work-in-progress project is quite lengthy to include here, so I have uploaded it ...