Different option for positioning elements in CSS besides using the float

I am currently working on developing a new application that involves serializing the topbar and sidebar and surrounding them with a form tag, while displaying the sidebar and results side by side.

My initial attempt involved using flex layout, but I have not been successful in achieving the desired outcome. I was only able to make it work using float. However, my preference is to utilize flex if it can be done.

Furthermore, it is important that the results are not nested within the same form tag as it contains its own set of tags which could lead to errors.

.app {
    background-color: rgba(255,0,0,0.3);
    padding: 40px;
}

.form {
    display: unset;
}

.topbar {
    width: 100%;
    background-color: rgba(0,255,0);
}

.sidebar {
    width: 20%;
    float: left;
    background-color: rgba(0,0,255,0.3);
}

.results {
    width: 80%;
    float: left;
    background-color: rgba(0,255,255,0.3);
}

.app:after {
    content: "";
    display: table;
    clear: both;
}
<div class="app">
    <form class="form">
        <div class="topbar">Topbar</div>
        <div class="sidebar">Sidebar</div>
    </form>
    <div class="results">results</div>
</div>

javascripthtmlcss

Answer №1

To achieve a similair behavior as the float type using flexbox, you can utilize the properties margin-left/margin-right: auto. However, in order to do so, you will need to slightly adjust the markup structure by adding a container with display: flex that contains the desired elements as direct children. Here's an example:

.app {
    background-color: rgba(255,0,0,0.3);
    padding: 40px;
}
    .form__container {
        display: flex;
     }
        .form {
            width: 20%;
        }

.topbar {
    width: 100%;
    background-color: rgba(0,255,0);
}

.sidebar {
    background-color: rgba(0,0,255,0.3);
}

.results {
    width: 80%;
    margin-left: auto; /* important for achieving float effect */
    background-color: rgba(0,255,255,0.3);
}
<div class="app">
    <div class="topbar">Topbar</div>
    <div class="form__container">
        <form class="form">
            <div class="sidebar">Sidebar</div>
        </form>
        <div class="results">results</div>
    </div>
</div>

Answer №2

Wow, shoutout to @Paulie_D for coming through with the perfect answer to my question! Huge thanks for that! :)

.container {
    display: grid;
    grid-template-columns: 20% 80%;
    background-color: rgba(255,0,0,0.3);
}

.sidebar {
    grid-column: 1 / span 1;
    background-color: rgba(0,0,255,0.3);
}

.main-content {
    grid-column: 2 / span 1;
    background-color: rgba(0,255,255,0.3);
}
<div class="container">
    <div class="sidebar">Sidebar</div>
    <div class="main-content">Main Content</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

Saving the initial and final days of each month in a year using javascript

I am trying to create an array of objects that contain the first and last day of each month in the year. I have attempted a solution but have hit a roadblock and cannot achieve the desired results. module.exports = function () { let months_names = ["j ...

javascriptnode.jsmongoose

Understanding the Class Syntax in Node.js

I'm having trouble understanding how to retrieve the value from a Node JS Class [Trying to use [Symbol.iterator '']]alert(Hello, ${this.name}!); Is there another way to approach this? class User { name = "Anonymous"; sayHi() { ...

javascriptmysqlnode.js

Eliminate the header top margin in Bootstrap

HTML <div class="container-fluid"> <div class="row"> <div class="page-header header_site"> <h1><font>ABC Company</font></h1> </div> </div> </div> CSS Code: .header_site { b ...

htmlcsstwitter-bootstrap-3

Using Javascript and CSS to Float DIV Elements

Recently, I've been working on a small algorithm that adds a special class to an element when the mouse reaches the halfway point or beyond on the X-axis of the browser. I also have a screenshot that demonstrates where this application will be utiliz ...

javascripthtmlcss

When using React / Next.js, the .map() function may not rerender the output based on changes in the state array if the keys remain the same

In my react component, Matches.js, I handle the display of tournament matches sorted by rounds. The data is fetched from a parent component through nextjs SSR and passed as props to the child component. To avoid unnecessary requests upon data changes like ...

javascriptreactjsnext.js

Ruby on Rails and JSON: Increment a counter with a button press

How can I update a count on my view without refreshing the page when a button is clicked? application.js $(document).on('ajax:success', '.follow-btn-show', function(e){ let data = e.detail[0]; let $el = $(this); let method = this ...

javascriptruby-on-railsjson

What causes the layout of an application to become distorted when I extend the theme in Tailwind.css?

I had the idea of incorporating an animation into my website design using tailwind.css for styling. module.exports = { content: ["./index.html", "./src/**/*.{js,jsx}"], theme: { colors: { primary: "#E51114", ...

cssreactjscss-animationstailwind-css

Styling the Next and Previous Page Links in your WordPress Website

Currently working on developing my own custom Wordpress theme and everything is going well, except for one little detail. I am trying to customize the styling of my next/previous page links so that the next page-link appears on the right side and the previ ...

phphtmlcsswordpress

Tips for retrieving element height using Vue.js

I am attempting to retrieve the offsetHeight of an element but I keep getting undefined. When I use this code, it returns an HTML collection and everything works correctly: document.getElementsByClassName("plyr--full-ui"); However, when I add .offsetHei ...

javascriptvue.jsnuxt.jsoffsetheight

Consider yourself a module for npm, just like a node

I'm currently working on a Javascript project that has been released as a node module. In some parts of the source code, I have used relative paths to import other files within the project: // <this_module_path>/action/foo.js import execution f ...

javascriptnpm

The transition from Vuetify3's VSimpleTable to VTable is ineffective and unsuccessful

The v-simple-table component has been renamed to v-table Old code that was using v-simple-table may not work correctly after the renaming. It is recommended to use v-data-table with the same data, as it works correctly. Here's the full page code: Yo ...

javascriptvue.jsvuejs3vuetify.jsvuetifyjs3

Using the PUT method in combination with express and sequelize

I am having trouble using the PUT method to update data based on req.params.id. My approach involves retrieving data by id, displaying it in a table format, allowing users to make changes, and then updating the database with the new values. Here is the co ...

javascriptdatabaserestexpresssequelize.js

- Prefixing with -webkit-transform and overlooking z-index

When using Safari 5.1.7 on Windows, I noticed that some rotated elements are overlapping others: However, when I test it on Firefox, Chrome, and IE, the issue doesn't occur: Is there a solution to prevent this overlap problem specifically on Safari? ...

htmlcsssafaritransform

The distance calculation is not functioning properly within the for loop

I am currently working on developing a geolocation test app. After finding some useful code for calculating the distance between two points using latitude and longitude coordinates, I am attempting to create a loop using a for loop to calculate the distan ...

javascriptarraysfor-looplatitude-longitude

Guide to aligning several texts to the right using Bootstrap 4 breadcrumbs

I am looking to implement a breadcrumb using Bootstrap 4.1 that displays the sitemap path on the left and login links on the right. Below is a visual representation of what I aim to achieve: Home/Blog/post Re ...

htmldjangobootstrap-4

In Vue, the CropperJs image initially appears small, but it returns to its original size after editing

I encountered a peculiar issue while working on a website for image cropping using Vue.js and CropperJs. On the homepage, users can select an image to crop and proceed to the next page where a component named ImageCropper.vue is displayed. Strangely, the c ...

javascriptvue.jsvuetify.jscropperjs

Calculating the dimensions of a CSS element based on its content

Is there a way to achieve this using only CSS, without needing JavaScript? I am working on a project with a lot of relative and absolute positions, where elements must be centered dynamically without specifying static widths. While I have managed to minimi ...

css

AngularJS - Executing code after the entire application has finished loading

Being new to AngularJs (1.6), I am just starting out and may not have all the right questions yet. I have recently begun working on a project built with AngularJS 1.6. My current task involves running a script on specific routes. For now, let's cons ...

javascriptangularjs

Refreshing ng-repeat dynamically with $http without reloading the page

Just a quick heads-up, I'm new to AngularJS In my AngularJS application, I am using the $http service to fetch data. Each row has an update button that needs to trigger a server-side method (the API is already returning data) to sync with a third-par ...

javascriptangularjshttpdata-bindingangularjs-ng-repeat

The DataGrids effortlessly expanded to accommodate their parents without the need for a horizontal scrollbar, showcasing their full capacity

After conducting numerous tests on simpler models, I have come to realize that the display of DataGrids Pro has been altered in MUI v6, rather than being a result of something I had broken initially. My workplace utilizes multiple DataGrids with columns h ...

cssmaterial-uimui-x-data-gridmui-x