divs that float and have widths specified in percentages

Although I've come across many similar questions, it seems that the answer to my specific question eludes me.

In a two-column div layout, I am aiming for the left div to have a fixed width of 250px and a margin-left of 5%, in alignment with my desired design...

As for the second div (on the right), I want it to extend all the way to the edge of the screen. In other words, while the left div is fixed at 250px width with a 5% margin on the left, I want the second div to occupy the remaining browser space.

I attempted using a float left along with a 100% width for the second div, but this caused it to drop below the first div instead of aligning next to it. Adjusting the width of the second div to make the float work still didn't allow it to fill the rest of the screen when the browser window was resized smaller than its width.

Is there a CSS-only solution to have one div with a fixed width and margin-left percentage, and another div positioned immediately to its right (like a regular float behavior) with a width set to 100% or a similar value to fill the remaining screen space?

Additionally, both divs need to maintain a height of 100% if that plays any role in achieving the desired layout. Thank you!

htmlcsslayoutliquid

Answer №1

Here is an example of how to write code in CSS and HTML:

CSS

.box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px;
}
.left{
    width: 50%;
    text-align: center;
}
.right{
    width: 50%;
    text-align: center;
}

HTML

<div class="box">
   <div class="left">Left side</div>
   <div class="right">Right side</div>
</div>

You can view the demo here: http://jsfiddle.net/abc123/

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

Looking for assistance in grasping the functionality of JQuery's noConflict() method?

Currently, I'm exploring the inner workings of a particular website and trying to decipher the functionality behind a specific Javascript feature. My goal is to replicate their expanding list feature (e.g., "WHEN & WHERE CAN I TURN IN MY SOLD TICKETS ...

javascriptjqueryhtml

Tinybox is not built to execute any JavaScript code within its environment

I have been utilizing Tinybox (http://www.scriptiny.com/2009/05/javascript-popup-box/) to handle my popup functionalities. However, I've noticed that when I load a page in the popup that contains a script tag, it does not function properly. Any sugg ...

javascripthtmlajax

implement some level of control within the ngFor directive in Angular

For instance, let's say I have an ngfor loop: <ng-container *ngFor="let setting of settings | trackBy: trackById"> <button mat-button [matMenuTriggerFor]="menu">Menu</button> <mat-me ...

htmlangulartypescriptangular-material

Element floating over, intersecting with the main content of the page

I am facing an issue with my CSS-styled footer that floats at the bottom of the page. When I resize the browser window, the footer overlaps the contents of the page. Although the footer is quite large, it should not overlay the page content. body { pa ...

htmlcsscss-float

PHP file secured to only accept variables posted from HTML form

This is a basic HTML/AJAX/PHP script I have implemented. <form id="new_user" action="" method="post"> <div class="col-md-3 form-group"> <label for="username">Username</label> <input type="text" class="form-control" name ...

javascriptphpjqueryhtmlajax

Displaying JavaScript array contents in an HTML page without using the .innerHTML property

As someone new to the world of JavaScript and web development, I find myself faced with a challenge. I want to showcase the contents of two different JavaScript arrays in an HTML format. However, my research has led me to believe that utilizing .innerHTML ...

javascriptjqueryhtmlarrays

Add a horizontal line between two div elements to create a visual division in the middle

Here is a snippet of my HTML/CSS/JS code: <div id="blockcart-wrapper"> <div class="blockcart cart-preview"> <div class="header"> <a rel="nofollow" href="#"> <img class="cart-icon" src="https://via.placehold ...

htmlcss

Having Trouble with Standard Full Screen Quad Setup in Three.js?

I am in the process of creating a full screen quad using a pass-through vertex shader in my THREE.js project. The quad is essentially a plane geometry with dimensions (2, 2) positioned at the origin and has been assigned a ShaderMaterial. The camera is loc ...

javascripthtmlthree.js

Displaying content in a hidden div on click event

I am part of a volunteer group for prostate cancer awareness and support, and our website features multiple YouTube videos that are embedded. However, the page has been experiencing slow loading times due to the number of videos, despite them being hidden ...

javascriptjqueryhtmliframeonclick

What is the best way to position a button in the center?

I am attempting to position the add button in the middle of the box, not just centered, but truly in the middle of it. .gallery { background-color: #fbfbfb; border-radius: 5px; border-style: solid; border: 1px solid #bbbbbb; height: 85px; li ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-5

Can Font Awesome icons be resized beyond 'fa-5x'?

I recently implemented the following HTML code snippet: <div class="col-lg-4"> <div class="panel"> <div class="panel-heading"> <div class="row"> <div class="col-xs-3"> <i class="fa fa-cogs fa- ...

htmlcsstwitter-bootstrapfont-awesome

Bug in ZURB Foundation Topbar causes incorrect highlighting of links on mobile when clicked

While utilizing the ZURB Foundation Topbar, I have encountered a bug that I find frustrating. When navigating the 2nd level drop downs and clicking on a link (li elements), the active highlight flickers to one of the elements above before taking you to the ...

csshtmlzurb-foundation

Using the pattern `[A-Za-z]{50}` in HTML is mistakenly identifying valid input as invalid

I created a webpage with text fields and wanted to limit user input using the HTML5 pattern attribute. Here is an example of how I implemented it: <input name="team_name" type="text" pattern="[A-Za-z]{50}" value="<?php echo $team_name;?>"> Ev ...

htmlregexinput

Tips for tackling drag and drop functionality with only HTML, CSS, and JavaScript

Currently, I am faced with a challenge involving drag and drop TEST. Observing the image provided below, you will notice 3 columns each containing 3 small boxes of varying colors. These boxes are draggable, meaning they can be moved between columns follow ...

javascripthtmlcss

Implement the functionality to allow users to print web pages as PDF documents

On my website, I am looking to enable a print option that allows users to convert the image displayed below into a PDF. The necessary information for the PDF such as the date, description, etc., can be fetched from the database. To achieve this, I plan t ...

javascriptphphtmlmysql

Analyzing two columns to determine if one column contains a specific text value and the other column presents a radio button in an HTML form

Is there a way to compare two columns in HTML, where one column contains text values (OK/NG) and the other has radio buttons for manual evaluation? The desired outcome is to display the result in a third column labeled "Difference" using either jQuery or J ...

javascripthtmljquery

What's the best way to update the value of an angular field upon submission?

Could someone please provide instructions on how to update the myName variable when the "submit" button is pressed? Thank you! app.js: app.controller('SomeController', ['$scope', 'emails', function($scope, emails) { emails ...

javascripthtmlangularjsangularjs-scope

Easily manage cookies with the jQuery-cookie plugin for setting and unsetting cookies

There is a button that, when clicked, toggles the visibility of a div. I would like to remember this state, so that when the div is hidden on one click, it remains hidden for one day (set an expiring cookie), and when shown on another click, the cookie is ...

jqueryhtmlcookies

In the event that the text within the span exceeds a certain length, replace it with dots rather than displaying the entire sentence

I'm looking for a different text clamping solution than the regular one. I don't want it to be like this: Really long sentence ---> Really long.... Instead, I only want 3 dots displayed as .... I've already experimented with using .trun ...

htmlcss

My ejs template in express.js is failing to display my HTML content

I am currently using Express.js along with EJS to display the response received from a database query in the form of an unordered HTML list. Additionally, I have integrated json2html within my project. Despite not encountering any errors, I seem to be faci ...

javascripthtmlexpressejsjson2html