Positioning of CSS elements: Distributing and arranging 4 divs evenly within a single parent div

Is there a more efficient method?

div {
  border: 2px solid black;
}

#main {
  width: 107px;
  height: 107px;
  padding: 0;
  text-align: center;
  font-size: 10px;
}

#tl, #tr, #bl, #br {
  position: relative;
  width: 45px;
  height: 45px;
}

#tl {
  top: 3px;
  left: 3px;
}

#tr {
   top: -46px;
   left: 55px;  
}

#bl {
  left: 3px;
  top: -43px;
}

#br {
  top: -92px;
  left: 55px;
}

Any tips? I'm still in the process of improving my styling techniques to create more visually appealing GUIs for my web applications.

I am looking for a way to position these four div elements equally inside a parent container. The divs are named "Top Left", "Top Right", "Bottom Left", and "Bottom Right".

htmlcssuser-interfacepositioning

Answer №1

One way to achieve this layout is by using the CSS properties display:flex; and flex-wrap:wrap; on the main container, and applying margin:auto to the child elements.

div {
  border: 2px solid black;
  box-sizing:border-box;/* switch box model to integrate padding and borders into size */
}

#main {
  width: 107px;
  height: 107px;
  padding: 2px; /*eventually*/
  text-align: center;
  font-size: 10px;
  display:flex;
  flex-wrap:wrap;
  /* show me */
  background:linear-gradient(to left,rgba(0,0,0,0.25) 50%, transparent 50%),linear-gradient(to top,rgba(0,0,0,0.25) 50%, transparent 50%);
}

#tl, #tr, #bl, #br {
  width: 45px;
  height: 45px;
  margin:auto;
}
<body>
    <div id="main">
        <div id="tl">Top Left</div>
        <div id="tr">Top Right</div>
        <div id="bl">Bottom Left</div>
        <div id="br">Bottom Right</div>
    </div>
</body>

Answer №2

Adjust each container to occupy 50% of the width, and align them side by side...

<div style="width: 500px;">
  <div style="width: 50%; float: left; background-color: red;">1</div>
  <div style="width: 50%; float: left; background-color: green;">2</div>
  <div style="width: 50%; float: left; background-color: orange;">3</div>
  <div style="width: 50%; float: left; background-color: pink;">4</div>
</div>

https://jsfiddle.net/908ugcwh/

Answer №3

Here's the styling I would use:

<style>

div {
  border: 2px solid black;
}

#main {
  width: 107px;
  height: 107px;
  padding: 0;
  text-align: center;
  font-size: 10px;
}

#tl, #tr, #bl, #br {  
  width: 45px;
  height: 45px;
  margin-top:3px;
  margin-left:3px;
  float:left;
}

#bl, #br {  
  margin-bottom:3px; 
}

</style>

Why not give it a go? Enjoy!

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

Choosing different elements using identical classes in JQuery

Struggling with a coding problem that seems like it should be an easy fix, but can't quite figure it out. The HTML code I have is as follows: <section class="actualite"> <div class="actualite-text"> <h3 class="title"&g ...

javascriptjqueryhtmlcss

Display a Popup at 5PM without the need for a page refresh, updating in real-time

After searching extensively online, I was unable to find a suitable solution for my issue. What I am aiming for is to have a popup appear on my page every day at 5:00 PM without the need to refresh the page. If I happen to access the page before 5:00 PM an ...

javascriptjqueryhtmlajaxcookies

Tips on how to retrieve the value of the second td in an HTML table when clicking on the first td utilizing jQuery

There is a specific requirement I have where I must retrieve the value of the second td in an HTML table when clicking on the first column. To accomplish this task, I am utilizing jQuery. $('.tbody').on('click','tr td:nth-child(1) ...

javascriptjqueryhtmlcss

Shifting the pagination outside of the slider in ReactJS and SwiperJS seems to be tricky. Despite trying to adjust the margins and padding, the pagination

I've been struggling with this issue for a while now. I need to move the pagination outside of the slider, but using padding or margin doesn't seem to work. It always remains inside the slider, and if I try to position it outside, it gets hidden. ...

javascriptcssreactjsswiper.js

Upon reloading, the dynamically generated table does not appear accurately

When a table is dynamically created using JavaScript/jQuery/html from an Ajax call, it initially displays correctly formatted. However, upon refresh/reload, the formatting of the table becomes incorrect. To address this issue, I have implemented a Promise ...

javascripthtmljqueryajax

What is the best way to import my json information into an HTML table and customize the rows as radio buttons using only Javascript?

I am facing an issue with processing a JSON response: var jsondata = dojo.fromJson(response); There is also a string that I am working with: var jsonString = jsondata.items; The variable jsonString represents the JSON data in the file: jsonString="[ ...

javascripthtmlarraysjson

Breaking up and Substituting text within Angular 8's HTML structure

When I retrieve data from a REST api, I need to split the name parameter at '2330' and insert a line break. For example, if the name is: ABCD 2330 This is My Name, I want the output on my screen to appear as: ABCD 2330 This is My Name // this par ...

htmlangulartypescriptangular8

Troubleshooting the issue of the background of element A not changing when hovering over element B, despite mouseleave not

Currently, I am attempting to modify the background of element A when mouseover event occurs on element B, and then revert it back to its original state upon mouseleave. It's worth noting that B is nested within A. Strangely, while the background colo ...

javascriptjqueryhtmlcss

Modifying the content of a paragraph by incorporating information from various sources

I need a way to input measurements for my items in text fields, and then with the click of a button, transfer those measurements into a paragraph in corresponding fields. The code I am currently using is shown below: <!DOCTYPE html> <html> & ...

javascripthtml

When it comes to utilizing the method ".style.something" in JavaScript

Here is some javascript code that I am working with: function createDiv(id){ var temp = document.createElement('div'); temp.setAttribute("id", id); document.getElementsByTagName('body')[0].appendChild(temp); } c ...

javascriptcsshtml

What is the best way to set a specific image as the initial image when loading 'SpriteSpin'?

I'm currently working on creating a 360-degree view using the SpriteSpin API. Everything is functioning as expected, but I have an additional request. I need to specify a specific image to be the initial landing image when the page loads. The landing ...

javascriptjqueryhtmlcss

Having trouble getting CSS to center text properly. It just won't cooperate

After spending 2 days trying to figure this out on my own, I have come to a dead end. It seems that my lack of expertise in CSS is the root cause of the issue. Here is the code snippet I am working with: <table class="demo"> <tr> <th style ...

htmlcss

Styling a PrimeFaces panelGrid within a data table using CSS

I am struggling to add a background color to a panelgrid within a datatable when a hover event occurs. Despite writing the necessary code and CSS, nothing seems to work. Any suggestions on how to address this issue? <p:dataTable id="movementsTable" var ...

htmlcssjsfprimefaces

Displaying limited items based on conditions in CSS

If there are 10 <p> tags, is it possible to limit them to only 5 by hiding the other 5 using CSS? Do I need to add a class five times with nth-child? Can CSS accommodate conditions for this purpose? Considering that the number of <p> tags is ...

css

What method does the CSS standard dictate for measuring the width of an element?

In terms of measuring an element's width, Chrome appears to calculate it from the inner margin inclusive of padding. On the other hand, Firefox and IE determine the width of the box from the border, excluding padding but including the margin. Personal ...

cssinternet-explorerfirefoxgoogle-chromespecifications

The synergy between HTML and JavaScript: A beginner's guide to frontend coding

I have primarily focused on server-side development of enterprise applications (Java EE, Spring framework). However, I am now exploring client-side technologies for better understanding (not necessarily to become an expert). I have studied HTML and CSS th ...

javascripthtmlcss

Is it possible to attach a CSS file specifically to just one React component?

Is there a way to restrict the CSS styling in my Home.js component so that it does not affect any other components? I have a separate CSS file for each component, but when I apply the styling from one file to Home.js, it ends up affecting everything else ...

cssbootstrap-5

What's causing this javascript to malfunction on the browser?

I encountered a problem with the code in my .js file. Here is a snippet of the code: $.extend(KhanUtil, { // This function takes a number and returns its sign customSign: function(num){ num = parseFloat(num) if (num>=0){return 1} ...

javascripthtml

What is the correct way to implement checkbox validations using jQuery?

I have a total of 3 checkboxes that I would like to arrange in a particular order based on their checks. Currently, when one checkbox is selected for download, the logic I have implemented only considers the first checkbox and ignores the rest. I am look ...

jqueryhtmlajaxbootstrap-4

How to divide a string by space after a specific character count using Javascript

I've been working on a tool that can divide input text into chunks based on a specific character count without breaking words in the process. Currently, I have set it to split the text after 155 characters. Even after conducting extensive research, ...

javascripthtml