In what ways does the structure of HTML differ from that of WPF?

I'm really diving into HTML lately, but I'm struggling to grasp how elements are laid out. Coming from a background in WPF, I understand code like this:

<Grid>
    <Button HorizontalAlignment="Left" Width="200" Content="A"/>
    <Grid   HorizontalAlignment="Stretch" Margin="200,0,0,0">
        <Button Content="B" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="150"/>
        <Button Content="C" HorizontalAlignment="Left"    Margin="0,150,0,0"      Width="200"/>
        <Button Content="D"                               Margin="200,150,0,0"/>
    </Grid>
</Grid>

This will create a UI that looks something like: https://i.sstatic.net/HlYV0.png

My struggle is replicating this layout in HTML, where A's width stays at 200 (pixels or dp) and sticks to the left side while B is always 150 pixels from the top. Both B and D need to resize when the browser window changes size because of their stretch horizontal alignment.

Everything online says HTML is structured similar to a stack panel, so I can't wrap my head around achieving that stretching behavior horizontally.

htmlcsswpf

Answer №1

When it comes to implementing such layouts, flexbox is the go-to solution:

.a,
.b,
.c,
.d {
  outline: 1px solid white;
  background: black;
  color: white;
  text-align: center;
}

.content {
  /* 👇 content div is now a flexbox */
  display: flex;
  /* 👇 div is size of screen for demonstration */
  width: 100vw;
  height: 100vh;
}

.sub-content {
  /* 👇 set width to remaining width not taken up by .a */
  width: calc(100% - 200px);
  /* 👇 set height to 100% of parent height */
  height: 100%;
}

.sub-sub-content {
  display: flex;
  /* 👇 set width to 100% of parent width */
  width: 100%;
  /* 👇 set height to remaining height not taken up by .b */
  height: calc(100% - 150px);
}

.a {
  width: 200px;
  height: 100%;
}


/* 👇 b, c, and d grow but are b is constant height */

.b {
  flex: 1;
  height: 150px;
}

.c,
.d {
  flex: 1;
}
<div class="content">
  <div class="a">A</div>
  <div class="sub-content">
    <div class="b">B</div>
    <div class="sub-sub-content">
      <div class="c">C</div>
      <div class="d">D</div>
    </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

Modify the currently selected color in a multi-select menu by editing the option tag

Why does the selection option value turn blue, but then become a faint grey when clicking on anything else on the page? Can these colors be changed, especially the faint grey for better accessibility? I've experimented with various CSS approaches, bu ...

htmlcsszurb-foundation

Utilizing a hidden file-input, IE10 is able to transmit a FormData object via ajax

I'm encountering difficulties when trying to send a form that includes a display:none file-input via ajax. It works fine in Chrome (46.0.2490.71), but not in IE10 (10.0.9200.17492). I've tried various solutions without success, and it's cruc ...

javascriptajaxhtmlfile-uploadinternet-explorer-10

Troubleshooting jsPDF problem with multi-page content in React and HTML: Converting HTML to PDF

I need to convert HTML content in my React application into a PDF file. My current approach involves taking an HTML container and executing the following code snippet: await htmlToImage .toPng(node) .then((dataUrl) => { ...

javascripthtmlreactjspdfjspdf

Using jQuery to eliminate selected item from a list

I have a basic list in html/jquery that allows users to add items. I am trying to create functionality where a specific item can be removed from the list when clicked on. However, the code for removing the item is not working as expected. Remove Item Code ...

javascriptjqueryhtmllistlocal-storage

Having issues with AngularJS where ng-table/ng-repeat rows are failing to load properly

I've been following a tutorial on using ng-Table, which can be found Here. When I download the example from Git, it loads without any issues. However, when I try to replicate even the simplest example myself, the column headers and filters load but th ...

javascripthtmlangularjsangularjs-ng-repeatngtable

AngularJS errorCallBack

I'm currently struggling with AngularJS and would really appreciate any constructive assistance. Below is the Angular code snippet I am working on: app.controller('customersCtrl', function($scope, $http) { $scope.element = function(num ...

phphtmlangularjs

Compile an ASP.NET website into static files such as HTML, CSS, and JavaScript prior to deployment

Can a simple ASP.NET website without ASP webform or .NET controls be precompiled into static files such as HTML, CSS, and JavaScript? I am interested in utilizing the master page feature and Visual Studio IDE intellisense while still being able to deploy ...

asp.netasp.net-mvcvisual-studio-2010html

Struggling to preserve the image within the widget quotation mark

I'm new to using apostrophes, but I've attempted to create a custom widget with specific requirements. In my widget, I need three fields: heading (string) description (string) an image However, I'm struggling to figure out how to include ...

javascripthtmlnode.jsnunjucksapostrophe-cms

Is it better for a browser to request only one stylesheet or all CSS files (including those imported in the main stylesheet)?

When attempting to use the "@import" rule to import multiple CSS files into a single "style.css" file that is then linked in the main HTML file, I noticed only the styles from the "style.css" file were being applied when inspected using Firebug. I am curio ...

htmlcss

What is the best way to hide a section of an image using the background of a different div?

How can I make the background of div2 cover the image in div1 when setting margin-top=-50px? Code snippet: <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> ...

htmlcssbootstrap-4

Error: Attempting to access property 'question' of an undefined value

Trying to render information from a local .json file using Javascript functions, I encountered an error in the console for const answer despite being defined. I temporarily commented it out to test the function, only to receive the same TypeError for quest ...

javascripthtmlreactjstypeerror

Unable to transfer all the formatting from the original file for the window.print() function. Localhost is functioning properly, but encountering issues with production

I'm encountering an issue with getting all styles from my Vue app. I have tried the code provided in this answer: https://stackoverflow.com/questions/52343006/how-to-print-a-part-of-a-vue-component-without-losing-the-style While it works fine on loc ...

javascriptcssvue.jsvuejs2vuetify.js

How can I modify the value of a CSS animation rule in AngularJS?

I am looking to dynamically change the value assigned to stroke-dashoffset based on a custom input. @-webkit-keyframes donut-chart-1 { to { stroke-dashoffset: 100; } } @keyframes donut-chart-1 { to { stroke-d ...

javascriptangularjscsscss-animations

Consistently directing to a single page on the Node Js web server

I'm in the process of creating a website with multiple HTML pages. Currently, I have code that successfully links to the login page, but unfortunately, the localstores page also directs to the login page. const express = require('express') ...

javascripthtmlnode.jsexpress

Is there a way to navigate back and forward in browsers for single page applications?

Working on a Single Page Application(SPA) has led me to utilize htmlPushState and window.onpop in order to maintain browser back and forward functionality while changing CSS styles and calling backend APIs. Currently, my SPA project consists of 5 pages, b ...

javascriptjqueryhtmlreactjs

Display information on a web page based on user input using HTML

I've hidden other p tags and divs using display:none, How can I make them visible after inputting my name? I'd like to type in my name and reveal all the content within the previously hidden div <form method="post"> <p> < ...

javascriptjqueryhtmlcss

Tips for keeping the background image in place while resizing the page

How can I set the background image for the whole page without it changing position with resizing? The image is 3065px in height so that should not be the issue. .bg { background-image: url("#"); height: 3065px; width: 100%; background-positio ...

cssbackground-image

Tips on assigning a default value to an HTML <select> tag using information fetched from a database

I am currently working on setting the default value of a dropdown element in HTML using data retrieved from an SQL database. I have successfully extracted the values from the database and stored them in variables. Here is the code snippet of what I have ac ...

phphtmlselect

Mastering TailwindCSS: Enhancing your design with group-hover utilities for top, bottom, right, and left

In a div, there is an <img> tag and a <button> tag. I used group in the className of the div and group-hover:opacity-0 in the img tag, and it worked correctly. However, when I applied group-hover:top-1/2 to the <button> tag, it did not wo ...

cssreactjstailwind-css

Issue encountered while incorporating a PHP file into Javascript code

I'm facing a particular issue where I have a PHP file that is supposed to provide me with a JSON object for display in my HTML file. Everything seems to be working fine as I am receiving an output that resembles a JSON object. Here's the PHP file ...

javascriptphpjqueryhtmlajax