Designing div arrangements

I am trying to create a layout of divs similar to the one shown in the image: https://i.sstatic.net/DLUe8.png The challenge I am facing is that I need to arrange them in a row, with one large div in the center and four smaller divs on the sides. I am planning to use jQuery for this, which is why I cannot assign individual CSS to each of the 5 divs.

Here is my current code snippet: https://jsfiddle.net/kys2qzne/

<div class="grid-all" >
    <div class="grid-item" style=" background-color: blue;"></div>
    <div class="grid-item" style=" background-color: yellow;"></div>
    <div class="grid-item height2" style="clear: both;"></div>
    <div class="grid-item" style=" background-color: green;"></div>
    <div class="grid-item" style=" background-color: black;"></div>
</div>
csslayoutcss-float

Answer №1

Here is a simple solution that utilizes the float property. I hope this helps. Thank you.

Updated based on your latest comment. This solution makes use of the position property and nth-child CSS properties.

.grid-all{
  position:relative;
  width:400px;
}
.grid-item{
  width:100px;
  height:100px;
}
.height2{
  width:200px;
  height:200px;
  background:red;
  position:absolute;
  top:0px;
  left:100px;
}
.grid-item:nth-child(4){
  position:absolute;
  right:0px;
  top:0px;
}
.grid-item:nth-child(5){
  position:absolute;
  right:0px;
  top:100px;
}
<div class="grid-all" >
   <div class="grid-item" style=" background-color: blue;"></div>
    <div class="grid-item" style=" background-color: yellow;"></div>
    <div class="grid-item height2" style=""></div>
    <div class="grid-item" style=" background-color: green;"></div>
    <div class="grid-item" style=" background-color: black;"></div>
</div>

Answer №2

This could potentially be the answer.

.grid-all{
 width: 100%;
 overflow: hidden;
}

.grid-item{
  width: 100%;
  padding-top:25%;
  height: 120px;
  background-color: red;
  overflow: hidden;
  display: block;
}

.height2{
  width: 100%;
  height: 240px;
}

.grid-col {
  float: left;
    width: 25%;
}

.grid-col-big {
  float:left;
  width: 50%;
}
<div class="grid-all" >
  <div class="grid-col">
    <div class="grid-item" style=" background-color: blue;"></div>
    <div class="grid-item" style=" background-color: yellow;"></div>
  </div>
<div class="grid-col-big">
  <div class="grid-item height2" style="clear: both;"></div>
</div>

<div class="grid-col">
    <div class="grid-item" style=" background-color: green;"></div>
  <div class="grid-item" style=" background-color: black;"></div>
</div>
</div>

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

Trigger fixed element to appear/disappear when scrolling using JavaScript

I've tried multiple solutions, but I can't seem to get this functionality to work properly on my website. I'm attempting to create a "schedule a demo" button similar to the one on www.bamboohr.com Currently, I have the following html, css, ...

javascriptjquerycssshow-hide

The method of altering a menu link in WordPress using jQuery varies according to whether the user is logged in or not

I need to update the last link on my menu. When a user is logged in, it should display a profile link; otherwise, it should show a sign-up link. ...

javascriptjquerycsswordpress

Resolving Issues with Page Feature Images on Your WordPress Site

Currently enrolled in a web development course, I collaborated with my instructor to create a custom website. However, I am facing an issue where the header image appears shorter on the Resources page () and Contact page () compared to the Blog page (). De ...

phphtmlcsswordpressdynamic

Are there any other CSS properties that can achieve the same functionality as "contain: content;"?

Searching for an alternative to the contain: content; CSS property that is compatible with older browsers. Is there a solution out there? Perhaps a CSS hack or workaround? ...

htmlcss

Unable to define the color of icons path using CSS in Vue 3

When using the iconify library for VueJS, the icons' paths automatically have "currentColor" as their fill color. The issue arises when trying to set a path's color via CSS, as it seems to be ineffective. Even with "!important", the color won&apo ...

cssvue.jssvgtailwind-css

How can I ensure the text remains centered within a div, even when there are buttons aligned to the left or

I have a CSS class called .text-align-center that I used to center text. .text-align-center { text-align:center; } However, I noticed that when there is a left or right arrow icon within the <div>, the text does not appear perfectly centered. Is ...

htmlcss

Adjustable Text Size with HTML5 and CSS3

Looking to enhance the accessibility of a website by implementing text size adjustment buttons ' A A A ' using just HTML5 and CSS3. Avoiding the use of jQuery or Javascript for this task. Inspiration drawn from this link. Appreciate any assistan ...

htmlcss

Consistent Row Heights for Dynamic Width Elements

I've relied on Chris Coyier's Equal Height Blocks in Rows jQuery script for various projects, and it has consistently delivered great results. However, this time I am facing a new challenge as I work on a responsive website with a fluid width ma ...

jqueryhtmlcssheight

What is the reason for the additional space and irregular alignment of my divs when utilizing the 960 grid system?

One issue I'm facing is that elements within divs are aligning randomly without responding to any alignment tags. Additionally, some divs are creating extra space above or below their elements. I am using the 960 grid system and have not made any chan ...

htmlcss960.gs

My attempt to use the Redux method for displaying data in my testing environment has not yielded

I've been attempting to showcase the data in a Redux-friendly manner. When the advanced sports search button is clicked, a drawer opens up that should display historical data when the search attributes are selected. For this purpose, I implemented the ...

javascripthtmlcssreactjsredux

The MDL layout spacer is pushing the content to the following line

Here's an interesting approach to Material Design Lite. In this example from the MDL site, notice how the 'mdl-layout-spacer' class positions elements to the right of the containing div, giving a clean layout: Check it out <!-- Event ca ...

javascripthtmlcssmaterial-design-lite

Unique background image for every individual page

For my mobile app development using Jquery Mobile, I have implemented a custom theme but now want to vary the background images for different sections. My current code looks like this: .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { ...

jqueryhtmlcssjquery-mobilebackground-image

Ensuring proper alignment of images and text in HTML when resizing

Trying to show an image and text side by side, I'm using the following code: div.out { background-color: silver; border: 1px solid black; padding: 10px; display: flex; } div.right { order: 1; background-color: white; border: 1px soli ...

htmlcssimage

The functionality of CSS transform appears to be malfunctioning on Firefox browser

My website, located at , features a logo that is centered within a compressed header. I achieved the centering effect using the following CSS command: .html_header_top.html_logo_center .logo { transform: translate(-63%, -2%); } This setup works perfe ...

css

Set the color of the text in the Material UI pagination component to a subtle shade

I would like to customize the color of the text in Material UI's pagination component. Specifically, I want the action button to be white and the text portion to be grey, similar to the left action arrow in the image below. Is there a way for me to ac ...

cssreactjsbootstrap-4material-uireact-with-styles

How can I use jQuery to slide up and slide down divs that share the same class?

Currently, I am working on creating a single-page checkout form. The challenge I am facing involves sliding up and down various divs with the same class name but different contents. To demonstrate this issue, I have prepared a sample in JSFiddle: http:// ...

jquerycss

Ways to hide the value from being shown

I have integrated jscolor (from jscolor) to allow users to pick a color with an input field. However, I am facing issues in styling it as I'm unable to remove the hex value of the selected color and couldn't find any relevant documentation on av ...

javascripthtmlcsscolor-pickerjscolor

Hover and hover-off functions in navigation menu

html <div class="hidden-nav"> <h4>lorem</h4> <ul class="decor-menu-list"> <li><a href="#">123</a></li> <li><a href="#">123</a></li> <li><a hre ...

javascriptjqueryhtmlcss

What is the best way to store checkbox statuses in local storage and display them again in a JavaScript to-do list?

I'm currently working on a to-do list application using basic JavaScript. One issue I'm facing is saving the checked status of the checkbox input element and displaying it again after the page is refreshed. Since I'm still learning JavaScrip ...

javascripthtmlcssweb-frontend

Incorporating CSS into an HTML page created by a Python CGI script

Last week, I was handed a Python-based monitoring and notification tool to work on. My task is to develop a proof of concept dashboard using the data collected by this tool over the years. The catch is that I'm fairly new to Python and have never dabb ...

htmlcsspython-2.7tomcat7cgi