Can you show me how to create a single layout using HTML and CSS?
I am struggling with splitting the screen properly. Could you provide a simple example, maybe on jsfiddle?
https://i.stack.imgur.com/d2rbn.jpg
Thank you in advance!
EDIT:
I have added an example. Please feel free to make any modifications or suggest alternative solutions. It is crucial that the two bottom divs always maintain a square shape.
When dealing with square divs, ensure they have equal height and width. If you want the size of square divs to be a percentage of the window's width, use vh.
div {
box-sizing: border-box;
}
.container {
width: 60vw
}
.banner {
height: 17em; /* adjust as needed */
border-color:red;
border-style:solid;
border-width: 6px 6px 2px;
}
.bottom {
float: left;
width: 30vw;
height: 30vw;
}
.left {
border-color:green;
border-style:solid;
border-width:4px 3px 6px 6px;
}
.right {
border-color:blue;
border-style:solid;
border-width:4px 6px 6px 3px;
}
.container::after {
clear: left
}<div class="container">
<div class="banner">
The top div
</div>
<div class="bottom left">
bottom left
</div>
<div class="bottom right">
bottom right
</div>
</div>Here is the requested code snippet for you. By the way, it might be beneficial to enhance your knowledge of HTML/CSS by visiting this site as a supportive resource. Remember not to post similar questions in this community forum.
#numOne{
width:60%;
background:red;
height:60vh;
}
#squareOne{
background:green;
width:50%;
height:40vh;
float:left;
}
#squareTwo{
background:blue;
width:50%;
height:40vh;
float:left;
}
#wrapperDiv{
width:60%;
}
body{
margin:0;
padding:0;
}
Check out this link on CodePen
#numOne{
width:60%;
background:red;
height:60vh;
background-size:cover; background:url(http://lorempixel.com/output/cats-h-g-987-1010-10.jpg);
background-repeat: no-repeat;
background-position: center;
}
#squareOne{
background:green;
width:50%;
height:40vh;
float:left;
background-size:cover; background:url(http://lorempixel.com/output/cats-q-g-640-480-3.jpg);
background-repeat: no-repeat;
background-position: center;
}
#squareTwo{
background:blue;
width:50%;
height:40vh;
float:left;
background-size:cover; background:url(http://lorempixel.com/output/cats-q-g-640-480-3.jpg);
background-repeat: no-repeat;
background-position: center;
}
#wrapperDiv{
width:60%;
}
body{
margin:0;
padding:0;
}<div id="container">
<div id="numOne">
</div>
<div id="wrapperDiv">
<div id="squareOne">
</div>
<div id="squareTwo">
</div>
</div>
</div>I'm currently working on designing a flex box based HTML layout like the one shown in the image link provided below. https://i.stack.imgur.com/nBl6N.png The layout should consist of 3 rows within the viewport with the following structure: - top: " ...
My website has encountered indexing errors on Google Search Console. According to the reports, many pages are showing an alternate version in a different language without the "return tag". This "return tag" is believed to be the pointer back to the origina ...
Currently implementing bootstrap on a site and seeking to enhance the dropdown menu customization. The default navbar appearance is present, with dropdown elements appearing upon hover. My goal is to include an icon next to each item in the navbar and ha ...
I believe the issue may stem from my inability to correctly import the JS file for Vuetify, but I haven't been able to pinpoint any errors. It seems that certain CSS functionalities of Vuetify, like list highlight events, are not working in my applica ...
Struggling to find the best way to center the "Header" text while keeping the icon in place. I've tried using text-align: center;, but it's not producing the desired results. Could anyone provide guidance on how to achieve this? Thanks. IMG: ...
Is there a way for my webpack application to read a JSON file at runtime without including it in the bundle.js after packaging? I want the JSON file to be available in the package folder but not bundled with the rest of the code. How can I achieve this? ...
I am struggling with a div wrapper that has a border, but the border is not wrapping around the content and I can't figure out why. Here is my issue on screen: This is what I want it to look like: Below is my HTML code: <div class="event_area_t ...
I'm experiencing an issue with a button that turns blue when the user holds onto it for a while on mobile. You can see an example in the image below: Adding ::selected or outline did not resolve the problem as the entire button still turns blue for a ...
Encountering a bug in Firefox with my mirrored diagonal background pattern. A vertical line appearing between left and right positioned elements at certain screen widths. Seeking a CSS solution or hack, no linked image files allowed. .stripes-background ...
As someone new to JavaScript, I am trying to figure out how to populate a HTML table with geojson entries like "ename" etc. Here is my current code: <table id="jsoncontent"></table> <script type="text/javascript"> window.onload = fu ...
I'm a bit puzzled. The _layout.cshtml page I have below contains several bundles of .css and .js files. Upon the initial site load, each file in the bundles is processed, which makes sense. However, every time a new view is loaded, each line of code f ...
Recently, I encountered a situation where I needed to get the height of a dynamic table using code like this: var table = document.getElementById("test"); document.write(table.offsetHeight); However, the challenge arose when I realized that I also needed ...
I've encountered an issue while trying to increment the id of 2 HTML elements, hwAddition and itemNumber, upon a button click event. The HTML code in question is as follows: <div id="hwAddition"> <div id="itemNumber" s ...
I am looking to create a loop that will allow me to extract the individual time figures for each horse in all eight races from the at the races website. Here is an example of the first race (17:15) out of the eight: from selenium import webdriver from s ...
I have 2 php files that I need to execute based on screen size. include_once('large.php'); include_once('small.php'); The condition is to run large.php when the screen size is greater than 992px, and small.php when the screen size is ...
I'm facing a challenge in customizing the material ui css. Specifically, I want to set the border color of a textbox to red. The issue arises when the bottom border gets overwritten. Upon investigation, I discovered that the culprit is the class MuiIn ...
In InfoPath 2010, I created a form and published it to a SharePoint 2010 list. The end user wants to print this form for their records, but when using the web part to print the screen, the page comes out very small and unusable. Is there any HTML code th ...
I've been working on creating a news slider for my website, but I'm encountering an issue. Despite completing the HTML and CSS, I'm struggling to make the 'showcase' rotate using JQuery. I've tried various guides and instructi ...
I need to customize a data field within a table, but I am unable to locate or identify its div ID. Here is the page source: <tbody> <tr> <td style="font-size:12px; text-align:center;" name=""> <div sty ...
I'm currently working on designing an application that needs to be compatible with both web and mobile web browsers. Due to the differences in screen sizes, I understand that I will need to create different layouts and views to ensure optimal user exp ...