CSS: Make the <div> stretch to 100% but leave some sections fluid

Check out this code snippet I have below:

<html>
    <body>
        <div id="left" style="height:30%;background-color: cyan;">           
        </div>
        <div id="right" style="height:30%;background-color: yellow">
            <a style="padding: 3em;margin: 3em;" >test</a>
        </div>
    </body>
</html>

I'm trying to figure out how to make the left div (id=left) stretch to 100% of the window width, but accounting for the width of the right div (id=right). Essentially, I need the combined widths of both divs to equal 100% of the window.

htmlcss

Answer №1

To rearrange the layout in HTML, start by placing #right first, followed by #left.

Give float property to #right to make it take the width of its content, while #left will automatically adjust to fill the remaining window width.

<style>
#right {float: right;}
#left {overflow: hidden}
</style>

<div id="right" style="height:30%;background-color: yellow">
    <a style="padding: 3em;margin: 3em;" >test</a>
</div>

<div id="left" style="height:30%;background-color: cyan;">xxx</div>

Check out this JSFiddle demo for reference!

Answer №2

 <html>
     <body>
         <div id="top" style="width:50%;background-color: blue;">           
         </div>
         <div id="bottom" style="width:50%;background-color: green;float: right;">
             <a style="padding: 2em;margin: 4em;" >example</a>
         </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

Using Bootstrap Collapse with EJS Iteration

I am having trouble with this specific section of my ejs file where the collapse feature is not functioning correctly. Can someone please assist me? <% for(var i=0;i<data.length;i++){%> <div id="content"> <p><%=data[i].w ...

javascriptjquerycssbootstrap-4ejs

Refresh the content of a website

Is there a method to refresh a webpage, triggering all the onload events and refreshing the CSS? For instance, in a scenario where the pathway of a JavaScript file linked to an onload event is modified, requiring the page to be reloaded without a full ref ...

javascripthtmlnode.jsrender

Ways to gather a compilation of active scripts, including those that have been dynamically loaded

My goal is to find a specific script among the scripts currently loaded on the page: if($('script[src="' + sn + '"]').length == 0) $('head').append('<scr' + 'ipt src="' + sn +'"></scr' ...

javascriptjqueryhtmldom

What is the best way to detect a checkbox click event inside a nested container?

I've created a list of divs, each with a corresponding pair containing more details. When you click on the "intro" div, the detailed pair opens and the intro is hidden. Each div also has a checkbox. I encountered an issue where clicking the checkbox i ...

jqueryhtmlcheckbox

Utilize TypoScript to inject HeaderData prior to implementing Style Definitions

My goal is to include my Google Tag Manager script before the style definitions in order to optimize the loading order and prioritize font-family rendering. Currently, I achieve this by: page.includeCSS { file1 = fileadmin/templates/css/bootstrap.css page. ...

cssgoogle-tag-managertyposcripttypo3-11.x

Using jQuery causes a textarea to post NULL values

I have a form that stores data in a database, and I'm using jQuery to show either success or fail messages before clearing the form. The issue is with my textarea - it posts a NULL value when using jQuery but works fine without it. All other inputs wo ...

javascriptphpjqueryhtmlpost

How can I make text wrap instead of overflowing to ellipsis in a list when using vue-material?

Question: <md-list-item> <md-icon v-bind:style="{color: transcript.color}">account_circle</md-icon> <div class="md-list-item-text"> <p>{{ transcript.text }}</p> </di ...

cssvue.jsmaterial-designvue-material

Overflowing is the width of Bootstrap's Grid Row

I managed to create this layout using only Bootstrap 5, without any CSS customization. Below is the HTML code I used: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name=&quo ...

cssbootstrap-5

Nginx fails to load CSS in Asp.net Core on Raspberry Pi

First and foremost, thank you for taking the time to read my post. Secondly, I apologize for any language errors in advance. I am currently attempting to run an Asp.net core application on a Raspberry Pi, but I am encountering difficulties with nginx prox ...

cssasp.netasp.net-mvclinuxnginx

Handling overlapping elements with pointer events

Suppose I have two overlapping divs, along with the following jQuery code snippet: $( "#div1" ).click(function() { console.log('click on div1'); }); $( "#div2" ).mousemove(function() { console.log('mousemove on div2'); }); From w ...

javascriptjqueryhtmlcss

Navigating form input using AJAX GET requests

Embarking on my coding journey, I've delved into creating a web page using HTML and JavaScript. The page boasts a form with two input fields (for dates) and a submit button. Alongside the form sits a table displaying data. <h1 style="text-align:c ...

javascriptjqueryhtmlajaxforms

Ways to position text over an image and ensure that it adapts to different screen sizes

Hey there, I'm new to HTML and CSS and I've been trying to create a responsive landing page. I managed to display text on an image by adjusting the image's style to relative and the text's style to absolute. However, when I resize the s ...

htmlcssbootstrap-4

AngularJS e-commerce application: Deactivate button if quantity falls below 2

I am currently facing an issue with disabling the 'add' ('+') and 'subtract' ('-') buttons. The functionality should be as follows: quantity == 1 -> '-' button is disabled quantity > 1 &a ...

htmlcssangularjs

The ul element is not being wrapped in a div tag for the header section

Struggling to create a transparent header for my website, I encountered an issue where the ul element is positioned below the div. Any solutions or advice would be greatly appreciated. Here's the code snippet: <!DOCTYPE html> <html lang="en" ...

htmlcssweb

Retrieve the value of hidden fields when their visibility is set to false in C#

Is it possible to retrieve the value of a hidden field that has its visibility set to Visible=false on the server side using C#? Due to limitations, I am unable to utilize CSS's display:none and must rely on Visible=false. ...

c#javascriptcssvisibilityhidden-field

Extract the specified section of HTML from the DOM element

I am attempting to extract a specific CSS class from my DOM object using the simplehtmldom library. 1) The library simplehtmldom.sourceforge.net 2) Since my localhost does not support fopen for some reason, I am utilizing the CURL library to retrieve th ...

htmlcssparsingsimple-html-dom

Button styled with Bootstrap positioned at the top right corner

Currently, my Bootstrap page structure is as follows: <div class='container'> <div class='row'> <div class='col-sm-6 col-md-4 col-lg-3'> <p>column1</p> </div> ...

htmlcssbootstrap-4ng-bootstrap

When hovering over a Bootstrap 3 thumbnail, the content is revealed, however, it also obscures the parent div

When I create some <divs> with the thumbnail class, I want the captions to only appear when the mouse is hovered over the image. Currently, my code makes the caption cover the entire div. How can I adjust this so that the caption slides in only over ...

jqueryhtml

Populate the div element with asterisks and prepare for printing

Is there a way to create a div filled with asterisks (*) without setting an exact width, but still keeping it on a single row like a border? I understand that using an asterisk image for the borders would be ideal, but due to constraints involving only ha ...

javascripthtmlcss

What could be causing the issue with my css `content:` not functioning across different browsers, and how can I enhance cross-browser compatibility in all cases

Working on my first HTML/CSS project, I encountered a browser compatibility challenge. The code functions well in Firefox, IE, and Edge but fails in Chrome. Specifically, I am trying to make a button display alternating up and down arrows when clicked. Whi ...

javascripthtmlcsscross-browser