Think about using floated elements to determine the width of blocks

Consider this example HTML markup (link to jsFiddle):

<div style="float: right; width: 200px; height: 200px; background-color: red; margin: 0 20px 0 30px;">
     Block 1
</div>

<div style="height: 100px; background-color: green;">Block 2</div>

When the first block is floated, the second block expands to full available width ignoring the width of block 1. How can we adjust the width of the second block so it maximizes the space next to block 1 but considering the left margin of block 1?

The desired result should resemble this, where I utilized display: flex in the second block. However, due to aesthetic reasons, using display: flex for the paragraph within the second block is not an option.

Note: My limitations involve only being able to alter the CSS properties of the second block as I am working on a wiki template.

htmlcsscss-floatwidth

Answer №1

To create a right margin that matches the width and margin of block one, style block two with the following CSS:

<div style="height: 150px; background-color: blue; margin-right:200px;">Block Two</div>

See the working example on jsFiddle

(Please try to avoid using inline CSS for better code organization)

Answer №2

To achieve the desired layout in Block 2, consider adding overflow: auto without using flex:

<div style="height: 100px; background-color: green; overflow: auto;">
    Block 2
</div>

You can view a demo of this method here: http://jsfiddle.net/PXuWB/

This technique eliminates the need to specify an exact margin length, making it particularly beneficial for responsive designs.

By implementing overflow: auto, you establish a block-formatting context that prevents content from interfering with surrounding floated elements.

For further information, refer to: http://www.w3.org/TR/CSS21/visuren.html#block-formatting

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

Adjusting label widths in Fieldcontain with JQuery Mobile

I've done a lot of research online, and it seems like a common issue. In the past, I have tackled this problem using a <table>, but I am now looking to resolve it using CSS instead of relying on JQM's data-grid. The simple problem I am fac ...

jqueryhtmlcssjquery-mobile

When I utilize $router.push() to navigate to a different page, the back button will take me back to the previous page

Within my Vue project, there is an HTML page that I am working on. Here is the link to the page: https://i.sstatic.net/cbtqM.png Whenever I click on the "+"" button, it redirects me to this specific page: https://i.sstatic.net/0rmMD.png This page funct ...

javascripthtmlvue.js

Can you please tell me the CSS pseudo element that corresponds to the AM/PM field in an <input type="time">

The issue with the am/pm display is dependent on the browser that the app is opened in. I am looking for a universal solution to ensure it does not appear in any popular browsers. Below is the HTML code for my input time field: <input type="time" for ...

javascripthtmlcss

jQuery UI dynamically adjusting content layout based on browser size changes

Having an issue with my custom accordion script where resizing the browser causes formatting problems in one of the sections. I want the content to remain intact and to utilize a scrollbar if necessary to view the content. The problem is visible in section ...

javascriptjqueryhtmlcssjquery-ui

Is it possible to include an onclick event in a hyperlink tag to initiate an ajax call

I am looking to incorporate an ajax call within a hyperlink tag "a". The purpose of this ajax call is to send some information to the server without expecting any return value. I attempted the following approach: document.querySelector("#myId").onclic ...

javascripthtmlajaxhyperlink

Multiple callbacks triggered by jQuery CSS transitions

I am experiencing an issue with my menu animation. I am curious as to why the slideDown transition is occurring twice. You can view the JSFiddle here. <ul class=top-menu"> <li>Item 1</li> <li>Item 2</li> <ul cl ...

jqueryhtmlcss

Troubleshooting a Navigation Tab Problem in Bootstrap 4

Hi, I am new to using bootstrap. Can anyone help me figure out how to achieve the look in the image using bootstrap-04? I want this design to be consistent across all devices, but I am having trouble implementing it. Any guidance is appreciated. Thank you ...

cssbootstrap-4

Adequate dynamic object arrangement

In my pursuit using JavaScript, I am striving to fit a group of objects of set sizes into a container with a specified horizontal width, all while preserving their approximate initial order. While whitespace is not a major concern, the goal is to keep it t ...

javascriptcsspackingtetris

Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

I am encountering an issue while trying to retrieve the values of radio buttons and store them in a MySql database. The error message I receive is TypeError: Cannot read property 'value' of undefined. This project involves the use of Angular and ...

javascripthtmlangulartypescriptexpress

Prevent external SDKs from displaying elements in full screen mode

My project involves using an SDK that displays a full-screen element on the page (100% width and height), but I need to limit this functionality. I am implementing Vue.js in this project. I attempted to render the element inside an iframe by following a d ...

htmlvue.jszoom-sdk

Issue with Div element not appearing on Azure AD B2C page customization

Utilizing PopperJS, I attempted to incorporate a popover box that appears when the user focuses on the password field within an Azure AD B2C page customization. Despite noticing the presence of the box element, it fails to display as intended. Any assistan ...

javascripthtmlazure-ad-b2cbootstrap-5popper.js

Exploring Selenium WebDriver: Manipulating Table Elements and Iterating Through Rows

Is there a more efficient way to iterate through tables row by row without using Absolute Xpath? In my test case, I need to search for specific data in each row. This was the previous logic of my code: private static int iRow; WebElement sWorkUnitRows = ...

javahtmlselenium-webdriver

"Finding the Perfect Alignment: How to Center Legends in Firefox

The issue at hand An issue has been identified where the code functions as intended in Chrome, Opera, and IE but fails to work in Firefox: fieldset>legend { display: table; float: none; margin: 0 auto; } <fieldset> <legend>Legend ...

htmlcssfirefox

Optimizing CSS for printing by eliminating unnecessary white space with media queries

Appreciate your assistance! I'm currently working on a solution to print a specific div using CSS Media queries. When the user clicks on print, I want to hide all other elements except for the body div they chose. However, I'm facing an issue whe ...

javascripthtmlcssprintingmedia-queries

Controlling the Flow of Events in JavaScript Documents

Explore the integration of two interconnected Javascript files and delve into managing event propagation between them effectively. 1st js file var red = [0, 100, 63]; var orange = [40, 100, 60]; var green = [75, 100, 40]; var blue = [196, 77, 55]; var ...

javascriptjqueryhtml

Stylish News Carousel using CSS and HTML

I've been working on creating a news slider for my website, but I'm encountering an issue. Despite completing the HTML and CSS, I'm struggling to make the 'showcase' rotate using JQuery. I've tried various guides and instructi ...

jqueryhtmlcss

Extract the content from the division and set it as the image source

Looking for a way to retrieve the content from a div and insert that into the 'src' parameter of an image. Working on a project where JSON is used to load translation files, preventing me from loading images directly, but I want to at least load ...

javascriptjqueryhtmljson

Unveiling the method to fetch the emitted value from a child component and incorporate it into the parent component's return data in Vue

How can I retrieve the title value passed by the Topbar component and incorporate it into the data() return section? I attempted to create a method to pass the value, but was unsuccessful despite being able to successfully log the value in the parent file. ...

javascripthtmlvue.jsvue-componentvuejs3

Error: The function `bootstrap_field` was provided with both positional arguments and keyword arguments

After attempting to update my Django sign_in template with Bootstrap fields and arguments, I encountered an issue. Exception: Error found in C:\Users\hp\Desktop\fastparcel\core\templates\sign_in.html, at line 25 'b ...

pythonhtmldjangobootstrap-4backend

unable to display a personalized error message within a Jinja2 template

I am currently developing a user registration feature in Flask, Python, and Jinja2. The function checks if a username or email is already in use and displays an error message below the respective text field. Here is the registration code: @app.route(&apo ...

pythonhtmlflaskjinja2