Ensure that the left div spans 100% of the width of the container, while the right div remains on the right side and maintains a

Is there a way to create an effect with a div where the left side is 100% and the right side stays fixed?

<!DOCTYPE html>
<html>
<style>
.left {
width: 100%;
float: left;
border: #ccc solid 1px;
}
.right {
width: 50px;
float:left;
border: #987 solid 1px;
}
.main {
border: #666 solid 1px;
margin: 0px auto;
}
.clear {
clear:both;
}

</style>
<body>
<div class="main">
<div class="left">
</div>
<div class="right">
</div>
<div class="clear"></div>
</div>
</body>
</html>

I am aware that I could easily achieve this using a table, but I am curious about how to accomplish this using divs.

Answer №1

Is this what you're looking for?: http://jsfiddle.net/JPPaf/

To avoid complications, consider nesting another div inside and applying borders to that inner div.

<!DOCTYPE html>
<html>
<style>
.left {
margin-right:50px;
background:red;
}
.right {
width:50px;
float:right;
background:green;
}
.main {
border: #666 solid 1px;
margin: 0px auto;
}
.clear {
clear:both;
}

</style>
<body>
<div class="main">
<div class="right">
right
</div>
<div class="left">
left
</div>
<div class="clear"></div>
</div>
</body>
</html>

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

The max-width CSS property is failing to function properly on a specific DIV element

I'm having trouble restricting the size of the user-selected image with CSS. Can someone point me in the right direction? Currently, when a user selects an image, it is displayed at full size which sometimes extends beyond the visible area of the web ...

PHP Solution: I'm working on a page that is accessed using the post method. However, I need to defer the execution of certain code until after the page has finished

Apologies for the confusing title, but I'm struggling to succinctly explain my issue: I have a web page that is accessed through a button. When this button is clicked, specific data (a unique identification name) is sent to the page I want to view. Ho ...

The word-break CSS property is ineffective in this situation

I've been experimenting with the word-break css property, but I just can't seem to get it to work even when using a simple example. Here's my code: React: render() { return ( <h5 className="word-break">A very very long line.... ...

What is the best way to showcase nested array information from a JSON file on an HTML webpage?

students.json { "students": [ { "studentname": "Rohit Kumar", "grade": "A", "student": [ { "SNo": "1", "Subject": "Maths", "Concept": "Numbers" }, { "SNo": "2", ...

Example of a chat server code using NodeJS

I'm looking to add a chat module to my web application. After searching on , I found several chat modules but none of them have clear examples on how to implement them in my project. Can someone share a tutorial that is based on existing NodeJS modul ...

What is the best way to eliminate the gap between spans in Bootstrap?

Imagine you have the following code: <div class="row-fluid"> <div class="span6"></div><!--span6 END--> <div class="span6"></div><!--span6 END--> </div><!--row END--> Now envision two red b ...

Best practices for working with HTML elements using JavaScript

What is the best approach for manipulating HTML controls? One way is to create HTML elements dynamically: var select = document.getElementById("MyList"); var options = ["1", "2", "3", "4", "5"]; for (var i = 0; i < options.length; i++) { var opt = ...

Issue with Font Awesome (6.2) Duotone not displaying correctly in Bootstrap 5 breadcrumb divider

I attempted to modify the Bootstrap 5.2 breadcrumb divider and include a Font Awesome Duotone icon, but it is not displaying. I am unable to figure out what the issue might be. Any suggestions would be greatly appreciated. Thank you. One interesting disco ...

Scrolling of inner div element is controlled by the outer scrollbar

I have a div element that can scroll vertically, but I want the scrollbar to be positioned outside of the div just like in a regular webpage. The scrollbar should only affect this particular div and not the entire page. <div id="outer"> <div ...

The PHP code fails to run and instead displays as raw PHP code on the webpage

As someone new to web development, I am diving into the world of PHP for the first time. So please excuse my ignorance as I navigate through this process. The task at hand involves creating a website with an HTML form that sends emails. After doing some r ...

generate a different identifier for ajax requests avoiding the use of JSON

The AJAX request functions in the following way: success: function(data) { $('#totalvotes1').text(data); } However, I need it to work with unique IDs as follows: success: function(data) { $('#total_' + $(this).attr("id")). t ...

What is the best way to customize the lower border color of a collapsed Bootstrap navbar with an inverse design

Discussing this issue.. I am noticing two distinct colors. One is darker than the background shade and the other is lighter than the background shade. How can these be set? https://i.sstatic.net/Y39IZ.jpg <nav class="navbar navbar-inverse"> <d ...

developing a fluid grid system with flexible ordering

I'm currently working on a section for my app that consists of one row with 3 columns, each column containing 3 divs. JSFIDDLE: demo Here is how it should appear in desktop view: https://i.sstatic.net/ugAXd.png And here is the expected appearance ...

Is your 100% height not beginning at the top of the page?

The link provided showcases a tutorial that has a white column extending to the bottom of the browser. In this example, the white column begins from the very top, with a header in a different shade of grey covering it. In my scenario, I need the header to ...

In search of advice on the best web-based database management technology

I'm looking to create a prototype for a web-based database manager, similar to the desktop version in the image below, with specific features in mind. Initially, the schema will be provided through a flat file. Considering HTML5 as an option, I am a ...

Mastering the art of combining images and text harmoniously

I am having trouble aligning my lion image and h1 tag side by side. There seems to be an issue but I can't figure out what it is. h2 { width:50%; float:right; padding:30px 0px 0px 0px; margin:0 auto; } .lion { width:10%; float: left; paddin ...

A horizontal navigation bar featuring a centrally aligned vertical layout and full-height display

I want to align everything on my menu bar vertically in the center, with the a elements taking up 100% of the available height of the menubar (text would be vertically-centered). However, I do not want to fix the height of my menu bar. (If I were to fix th ...

"Encountering an issue with the insert query when attempting to submit

i am currently working with an html form <form name="booksInput" action="theGamer.php" method="post"> Book Name: <input type="text" name="books"> <input type="submit" value="Submit" name="subBooks"> </form> below is th ...

Tips for converting multiple arrays of objects into a single array set

Here is an example of an array: $scope.array1=[[Name:'Madhu'],[Name:'Vijay'],[Name:'Srinu']] I need to convert this array into a different format. I want to pass this array in the columns option of a dx datagrid. So the desi ...

Initiate a webpage reload

Currently, I am developing an android application specifically designed for tablet devices. This application will display a simple HTML page with text that will be shown for extended periods of time, sometimes up to several hours. The content on this page ...