What is the best way to achieve this particular look using CSS3?

Seeking assistance with creating a CSS3 layout similar to the one shown in the image below:

CSS3 layout

Currently, I have managed to center a square on the screen using the following HTML and CSS:

HTML:

<div id="divBorder">
</div>

CSS:

#divBorder{
    border-style: solid;
    border-width: 1px;
    position: absolute;
    width: 300px;
    height: 300px;
    z-index: 15;
    top: 50%;
    left: 50%;
    margin: -110px 0 0 -160px;
}

However, I am unable to figure out how to add the two half squares on either side of the central square. Any assistance or guidance on achieving this layout would be greatly appreciated. Thank you in advance!

htmlcsslayoutstyles

Answer №1

To create the layout you want, utilize the code snippet below which leverages the power of flexbox.

body {
  margin: 0;
}

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  flex: 1;
  background-color: mediumspringgreen;
}

div {
  flex: 4;
  display: flex;
  background-color: darkviolet;
}

section {
  flex: 1;
}

section:nth-child(even) {
  flex: 2;
  background-color: darkorchid;
}

footer {
  flex: 1;
  background-color: deeppink;
}
<main>
  <header></header>
  <div>
    <section></section>
    <section></section>
    <section></section>
  </div>
  <footer></footer>
</main>

Answer №2

.inner {
border:solid; 


}

.outer {display: flex;
flex-direction:row;}

.side {width: 25%; height: 50px;}

.center {width: 50%; height: 50px}
<div class="outer">
<div class="side inner"></div>
<div class="center inner"></div>
<div class="side inner"></div>
</div>

To achieve this layout, you can leverage flexbox. Utilize percentage-based widths or explore flexbox's sizing options.

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

Creating a Loop for Tabs on an HTML Form

When navigating through form input boxes using the tab key, it usually goes in order. However, I discovered that you can actually customize this order by using tabindex=x. Since I have 5 inputs on my form, I use tabindex 5 times to specify the order. But ...

javascriptjqueryhtmlcsstabs

Align the center of table headers in JavaScript

I'm currently in the process of creating a table with the following code snippet: const table = document.createElement('table'); table.style.textAlign = 'center'; table.setAttribute('border', '2'); const thead ...

javascripthtmldom

Implementation of Ionic Tabs with Hidden Back Button

Is there a way to hide the back button for a specific tab in my ionic app without affecting the rest of the page? I tried adding "hide-back-button="true" to the tab code, but it didn't work as expected. I want to achieve something like this: <ion ...

htmlionic-framework

Leveraging JavaScript for Validating Radio Buttons

I've been following a tutorial guide on this specific website , but I'm encountering some difficulties despite following the exact steps outlined. Can someone provide guidance? Here is what I have done: <html> <script> fu ...

phpjavascripthtml

Make sure all the table rows have the same height to completely fill the table regardless of the number of rows

Looking for a solution to create a table with a fixed height of 280px, whether it has 3 or 4 rows. Is there a method to adjust the row heights based on the number of rows in the table, so that they fill up the table's height? To clarify, when the ta ...

htmlcss

The header and sub-navigation are in disarray and require some help

Dear web experts, After six months of learning to code websites, I'm tackling a big project with some challenges. The recent changes to the header and subnav have thrown everything off balance, making it look wonky and not quite right. Specifically, ...

javascripthtmlcssheader

What is preventing my div from reaching 100% height when I implement an HTML5 doctype? Is there a solution to achieving a full height div?

I'm currently working on organizing the layout for a basic gallery webapp, and I've encountered an issue where some of my divs are shrinking in height when using an HTML5 doctype declaration. Despite trying different CSS properties, I can't ...

csshtmlquirks-mode

What methods can be used to incorporate animation when the display attribute transitions to none?

Is there a way to add animation in a Vue app when replacing elements? I would like the transition from, for example, clicking on a div with 'Num 1' to the divs with class 'showing' not disappear abruptly but smoothly, such as moving to ...

javascriptcssvue.js

Making the height of two divs equal within the same parent element using CSS

Looking for a way to make two adjacent divs, #innerwrapper .sidebar and #innerwrapper > .content, from the same parent container, #innerwrapper, have equal heights due to them being floated left. I initially used jQuery in a separate file to resolve th ...

htmlcssheight

Show flexibility in the grandchildren of a row layout

My goal is to achieve a layout similar to the image below using the flex "system", but I am facing a challenge with some generated directives that are inserted between my layout div and the flex containers: https://i.sstatic.net/nq4Ve.png <div id="i-c ...

angularjscssflexboxangular-material

Is there a way to extend this section to fill the entire screen height without any white space at the bottom?

We've been working on extending the content to the full height of the screen, but no matter what we try, there's always some white space lingering at the bottom. Any suggestions on how to fix this issue? section { height: 100vh; background ...

htmltwitter-bootstrapcssbootstrap-4

Using CSS to resize an element with both dimensions while maintaining its

Is it feasible to preserve a 1:1 aspect ratio on a div element using the CSS resize property? This particular illustration lacks an aspect ratio. Do you have any recommendations? ...

htmlcssresizeaspect-ratio

The error message indicates a validation issue with the img tag: The attribute src has an invalid value, as it uses a backslash () as a path segment delimiter instead of

<div class="logo"> <img src="assets\images\main-logo\logo.jpg" alt="logo"> </div> </a> </div> The code was validated using validate.w3.org and this error was encountered: Bad value asse ...

html

Tips for positioning label/input box/button on Internet Explorer 7

Here is a Fiddle example you can check out, along with the corresponding code : <div class="menu-alto"> <ul> <li> <a title="Link" href="#">Link</a> </li> <li class="newsletter ...

htmlcss

The background image and svgs are not displayed on laravel localhost/public/index.php, but they appear when using "php artisan serve"

I've created a beautiful Laravel project on my PC. The welcome.blade.php file in the project has a background image located in the: public/images/ directory. To display the images, I've used the following CSS: html, body { color: #f4f6f7; ...

phpcsslaravellaravel-artisan

Copying text from an iframe using HTML and JavaScript

As someone who is relatively new to web development, I am currently attempting to transfer text from an iframe to a textarea located on a Bootstrap-html webpage. You can view an example of the code I am working with here: https://jsfiddle.net/fe5ahoyw/ J ...

javascriptjqueryhtmliframe

Determining the length of an array of objects nested within another object

I received a response from the API called res. The response is in the following format: {"plan":[{"name":"ABC"},{"name":"DEF"}]}. I am attempting to save this response in my TypeScript code as shown below: ...

htmlangulartypescriptapiangular8

Unable to activate check box button by clicking on it

Hi there! I am having trouble with a checkbox button on my website. The button appears fine, but for some reason it's not working properly (it doesn't get unchecked when clicked). Can anyone help me fix this issue? I'm still learning HTML an ...

htmlcsstwitter-bootstrap-3

Unexpected behavior observed with LitHTML when binding value to input type range

Currently, I am working on an implementation that involves using range inputs. Specifically, I have two range inputs and I am trying to create a 'double range' functionality with them. The challenge I am facing is related to preventing one slider ...

javascripthtmllit-elementlitlit-html

Is there a way to track and detect alterations to an element using JavaScript or jQuery

Can I detect the addition of a specific CSS class to an element without having to create a new event? ...

javascriptjqueryhtml