Creating a web design using HTML and CSS to position one element at the left top corner of the page and another element at

Question

Creating a web design using HTML and CSS to position one element at the left top corner of the page and another element at

I am looking to position two divs in a specific way on the page: one at the top left corner (black) and the other on the right side (red). https://i.sstatic.net/tKpGo.png

I have considered 5 different approaches, which I've listed below. While they are valid options, I believe there may be a simpler and more effective method to achieve this layout. Can you please help me find a better way to do it?

(a) Applying CSS like

position:absolute; margin-left:30px; (or left)

to the right div.

(b) Using a table with 2 columns, positioning the left div in the first column and the right div in the second column.

(c) Adding float:left to the left div and something like 'float:left; margin-left:30px; margin-top:-30px;' to the right div.

(d) Making both inline blocks and positioning them accordingly.

(e) Utilizing CSS Flexbox for layout purposes.

html css

Answer 1

Answer №1

Perhaps this could be a helpful starting point for you, serving as a foundation to expand upon?

:root {
  box-sizing: border-box;
}

*,
::after,
::before {
  box-sizing: inherit;
  margin: 0;
}

.wrapper {
  display: flex;
  align-items: flex-start;
}

.wrapper > * {
  margin: 1em;
  padding: 2em;
  border: 4px solid;
}

.aside {
  flex: 1;
  border-color: red;
}

.main {
  flex: 3;
  border-color: black;
}

<div class="wrapper">
<div class="aside">some text</div>
<div class="main"><p>some other text</p><p>some more text</p></div>
</div>

Answer 2

Perhaps this could be a helpful starting point for you, serving as a foundation to expand upon?

:root {
  box-sizing: border-box;
}

*,
::after,
::before {
  box-sizing: inherit;
  margin: 0;
}

.wrapper {
  display: flex;
  align-items: flex-start;
}

.wrapper > * {
  margin: 1em;
  padding: 2em;
  border: 4px solid;
}

.aside {
  flex: 1;
  border-color: red;
}

.main {
  flex: 3;
  border-color: black;
}

<div class="wrapper">
<div class="aside">some text</div>
<div class="main"><p>some other text</p><p>some more text</p></div>
</div>

Creating a web design using HTML and CSS to position one element at the left top corner of the page and another element at

Answer №1

Similar questions

I am encountering an issue with my SVG where the linear gradient fill is not correctly applying the second stop color, and I am struggling to determine the cause of this issue

Modifying the HTML file won't be immediately visible in browsers

The amazing feature known as "CSS3 background-clip"

Conceal element with PHP and CSS upon filling another field

The JQuery.hover() function is experiencing issues with detecting hover events while moving the mouse over

Tips for accessing values from a bs4 result set in Beautiful Soup?

Create a series of canvas lines connecting all divs that share a common class identifier

What is the solution for fixing scrolling while keeping the header fixed and ensuring that the widths of headers and cells are equal?

File bootstrap.min.css is currently experiencing compatibility issues

I seem to have misplaced the textbox and the images are all jumbled up on my

Create a new division directly underneath the bootstrap column

Create an angle-div element that can be expanded or collapsed without relying on

Drawing intersecting lines on a javascript canvas and clearing them using the lineto method

An error occurred while trying to set the property 'IS_CHECK' of an object that is undefined

Perform a CSS transition following a jQuery fadeOut effect

Center align Bootstrap 4 dropdown menu

Display excerpts of code within an Angular application within the HTML segment

Arranging an Array by Two Distinct Characteristics

Position the Bootstrap footer element at the bottom of the page

Encountering a DJANGO KeyError while utilizing request.session in conjunction with form.cleaned_data