Create a new div element called "aside" and place it within the existing div

After searching on SO, I couldn't find the same question anywhere.

.container {
  display: flex;
  justify-content: center;
}

.aside-left {
  width: 200px;
}
<div class="container">
  <aside class="aside-left">
    menu1 menu2
  </aside>
  <div class="content">
    pagesssssssssssss
  </div>
  <footer>
    copyright
  </footer>
</div>

Here are the requirements:

  1. The content div should always be centered in the window, regardless of the aside div
  2. When the window width is less than 991px, the aside should not be displayed
  3. It's preferable to use flex instead of float solution

first-item-on-center-and-second-item-at-last-in-flex may be relevant, but the aside tag still affects the content div

Currently, I know how to center the container, but I want to center the content div within the window and have the aside float left next to it. https://i.sstatic.net/CsPfb.png

htmlcss

Answer №1

Not quite sure if I got it right, but here's a possible solution:

<div class="window">
    <div class="container">
        <aside class="sidebar-left">
            menu1
            menu2
        </aside>
        <div class="content">
            pagesssssssssssss
        </div>
        <footer>
            copyright
        </footer>
    </div>
</div>

<style>
.window {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container {
    
}
.sidebar-left {
    width: 200px;
    height: 100%;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
}
@media screen and (max-width: 990px) {
    .sidebar-left {
        display: none;
    }
}
</style>

Answer №2

Do you mean this? If you only want one child to be centered, you can use justify-self: center; on that specific element

    .container {
    display: grid;
    width: 100%;
}
.content {
    justify-self: center;
}
.aside-left {
width: 200px;
}
@media (max-width:991px) {
    .aside-left {
        display: none;
    }
}

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

How to position an SVG image directly next to text

Here is my JSFiddle with an SVG positioned to the left of some text inside a button. I am looking for a way to align the SVG vertically with the text within the button. I've considered a couple of methods: Trying to adjust the line-height, but that ...

htmlcsssvg

Enhancing the appearance of browser pop-up windows

(via failblog) The background and buttons have been completely altered. How was this transformation achieved? ...

javascripthtmlcss

Steps for including an animation class in a div

Is it possible to add the sweep to top blue color animation to the red box using a set-timeout function instead of hover? I tried using the following code but it doesn't seem to be working. Can you help me troubleshoot? setTimeout(function() { $( ...

javascriptjquerycss

Hover creates a duplicate dropdown menu

I'm facing an issue with the hover effect on my Metronic dropdown menu. When I hover over the menu button, everything works fine, but when I move to the options in the menu, it turns white. I suspect this might be due to two button activations happeni ...

htmlcssdrop-down-menubootstrap-5metronic

Ways to perfectly position an image in Bootstrap 4?

As someone who is just starting out with Bootstrap 4, I've noticed that the class "center-block" we used in Bootstrap 3 seems to be missing. Can anyone guide me on how to achieve centering elements in the new version? ...

htmlcsstwitter-bootstrapimagetwitter-bootstrap-4

One div's content is merging with another div

<main> <!-- Carosel--> <div> <div class="carousel"> <button class="carousel__button carousel__button--left is-hidden"> <img src="Image/left-arrow-svgrepo ...

htmlcss

Troubles with HTML and div elements

I have a specific need to dynamically load HTML into a div container with the style attribute overflow set to hidden. I have implemented next and previous buttons for navigation, but I am facing an issue where the content overlaps at the beginning and end ...

html

html - generating a block of code

Does anyone have any tips on creating a block like this one using CSS and HTML: Check out this image for reference I want to streamline the process and make it faster, any suggestions? ...

htmlcssrounded-corners

Employing plain Javascript (without the use of jQuery) to concatenate information from two JSON strings - encountering an error due to the absence of

Having a JSON stringified form data like this: {"name":"jack miller", "address":"123 main st"} I aimed to append more records but encountered an error saying "append is not a function." The desired outcome is to have both sets of records in this format: ...

javascripthtmljsonreactjsforms

Including an embedded iframe in an asp.net web form

I need to integrate an iframe into a web form by retrieving the URL from an API call to a third-party payment service. I am working with ASP.NET 4.5 and C# 6.0. The code for my web form includes implementing an iframe similar to that in an ASP.NET MVC cod ...

c#htmlasp.netiframewebforms

Center the Div element while keeping it responsive

I am currently working on my personal portfolio website and I am trying to center and align a circular shape that I have animated using CSS. I want to make sure that it remains responsive as well. So far, I have attempted to use flexbox. Here is the code ...

htmlcssresponsive-design

Challenges with Div Height and Border

Hello there! I've run into a height and border issue with a div. Here's the CSS I'm currently working with: .content { background-image: url(../../images/logo-04.png); background-position: left bottom; ...

htmlcssborder

Preventing scrolling in jQuery UI Draggable when using flexbox

In my project, I am looking to organize a container using jQuery UI draggable/droppable feature. Since the elements in my list are arranged in a straight horizontal line, I have utilized display: flex. This arrangement works well when adding new items to ...

javascriptjqueryhtmlcssjquery-ui

Unable to successfully submit a form using PHP

I am currently working on a PHP page that retrieves data from MySQL. The goal is to fetch a list of objects from the database, display each object in a separate form for editing, and then save only the edited values. However, I am encountering difficulties ...

phphtmljson

The cache feature seems to be malfunctioning, resulting in images having to be reloaded every time

I am working on a simple webpage at . The issue I'm encountering seems to be specific to Google Chrome - every time I reload the page, the images are reloaded as if there is no cache. I noticed that when checking the example on stackoverflow.com, the ...

phphtmlgoogle-chromebrowser-cache

Python allows for the sending of HTML content in the body of an email

Is there a way to show the content of an HTML file in an email body using Python, without having to manually copy and paste the HTML code into the script? ...

pythonhtmlemail

Menu navigation - ensuring the background color extends to cover the entire page, not just the viewport

I'm facing an issue with the left navigation bar's design. Specifically, I'd like the grey color of the bar to extend vertically across the entire page. Currently, the gray bar ends at the viewport's edge. Is there a way to make the ba ...

htmlcssnavigation

Tips on fetching data from a different webpage via ajax

Hello, I am new to programming. I am looking for a way to update the content of the current PHP page with content from another PHP page using AJAX without needing to refresh the page. The content that needs to be replaced is located within div elements. ...

phpjqueryhtmlajax

Issues with redirection to registration page in PHP Slim framework

When I access localhost/path/home, it takes me to the homepage where I can either login or signup. Clicking on either option should redirect me to localhost/path/login or localhost/path/signup respectively for the login or signup page. However, there seem ...

htmlanchor

Looking to incorporate HTML and JavaScript to create two unique forms that can be submitted separately on a single webpage

If I can't find an answer, then I ask: There are two different forms on the page: one is the "ask for call" form (which appears on every page of the site) and the other is a simple "contact form" (specifically placed on the contact page). Both forms ...

javascriptjqueryhtmlforms