Aligning a group of divs within a right-floated div in a precise manner

I believe the concept can be explained best through an example:

http://jsfiddle.net/kV9yn/16/

This is my simplified code. The issue arises when the rectangular divs on the right don't align properly. Ideally, I would like them to line up from left to right, and flow over to the second line when they exceed the div's edge:

Desired Appearance:

   ._______________________________________________________________________.
   |                                                                       |
   |                              Title                                    |
   |                                                                       |
   |  blah blah blah blah blah blah                                        |
   |                                                                       |
   | Ingredient: [                ]       [block] [block] [block] [block]  |
   |                                      [block] [block] ...              |
   |                                                                       |
   |_______________________________________________________________________|
htmlcss

Answer №1

Make this adjustment:

.ingredient
{
    display:block;
    ...

Change it to:

.ingredient
{
    display:inline-block;
    ...

That's all you need to do. The property name is pretty straightforward.

Check out this Fiddle: http://jsfiddle.net/kV9yn/12/.

Answer №2

How about trying out this layout: 

<!DOCTYPE html>
<html>
<head>
    <title>The division of divs</title>
    <style type="text/css">
        h1 {
            text-align: center;
        }
        body {
            margin: auto;
            width: 600px;
        }
        #blocks {
            float: left;
            width: 50%;
        }
        .leftFloat {
            float: left;
            margin-right: 1em;
            width: 18%;
        }
        fieldset {
            border: none;
            float: left;
            width: 40%;
        }
    </style>
</head>
<body>
    <h1>Title of the Page</h1>
    <p>This is just a placeholder text for illustration purposes.</p>
    <form>
    <fieldset>
        <label for="ingredient">Ingredient:</label>
        <input type="text" id="ingredient" />
    </fieldset>
    </form>
    <div id="blocks">
        <div class="leftFloat">
            [content]</div>
        <div class="leftFloat">
            [content]</div>
        <div class="leftFloat">
            [content]</div>
        <div class="leftFloat">
            [content]</div>
        <div class="leftFloat">
            [content]</div>
        <div class="leftFloat">
            [content]</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

Can a div with float: left; be centered?

Currently, I am attempting to create a dock (similar to the iOS dock) for my website. Below is the full code that I have implemented: function addPrevClass(e) { var target = e.target; if (target.getAttribute('src')) { // check if it is img ...

javascriptjqueryhtmlcss

Implement scroll bar functionality on canvas following the initial loading phase

I am currently working with canvas and I need to implement a scroll bar only when it is necessary. Initially, when the page loads, there isn't enough content to require a scroll bar. My project involves creating a binary search tree visualizer where u ...

javascriptcsshtml5-canvasoverflowp5.js

Authenticating Users with HTML in Django

I am experiencing an issue with the following condition: {% if object.author == user or object.res_person_1_username == user %} When I display variables using code like this: <p class="article-content mb-1"><strong>object.res_person_ ...

pythonhtmldjangoauthentication

Expansive picture within a Bootstrap container

How can I create a wide image within a Bootstrap container? <div class="container-fluid"> <div class="container"> <img data-layout="wide" src="big-image.jpg" alt="Big image" class="embedded_image"> </div> </div& ...

htmlcsstwitter-bootstrapbootstrap-4

Creating a dynamic HTML5 video player with Fancybox and VideoJS

What is the best way to ensure that an HTML5 video remains responsive inside a fancybox that is already responsive? Here is the code that I currently have: <a class="preview" href="#inline123"> <img class="item" src="/thumbs/thumb.jpg" widt ...

jqueryhtmlvideoresponsive-designfancybox

Having trouble importing JS into HTML file with NodeJS

I have created a web server using NodeJS that serves the file index.html. However, when I attempt to add a JavaScript file to my HTML document, the browser displays an error message stating The resource "http://localhost:3000/includes/main.js" was blocked ...

javascripthtmlnode.jsexpress

"Implementing a fixed header and footer with a scrolling content area within a parent div that has a fixed position for

I'm seeking assistance with some CSS tasks. Specifically, I need to maintain the same functionality in responsive view when utilizing a fixed position in the parent div (Bootstrap 5 is in use). (the main focus of this project is on fullscreen view of ...

htmlcssbootstrap-5

Exploring the use of the map function for iterating in a stepper component of

I've been attempting to integrate Redux Form into my stepper component. However, I'm facing an issue where adding form fields results in them being displayed in all three sections. To address this, I started reviewing the code for the stepper. I ...

javascriptcssreactjsreduxmaterial-ui

Responsive design issues with Bootstrap Popover

Whenever I open the popover for the first time, the image is not displayed correctly. How can I ensure that it always shows correctly? Here is a link to the issue: https://jsfiddle.net/n2Lfro30/1/ Below is the button code causing the problem: <button ...

javascripthtmlcsstwitter-bootstrapbootstrap-modal

My CSS horizontal drop-down menu is causing the sub-navigation items to overlap each other

I'm having an issue where my sub navigation menu items are stacking on top of each other instead of displaying properly. Here is the code snippet causing the problem: /* STYLING FOR NAVIGATION MENU */ .nav-bar { width: 100%; height: 80px; ...

htmlcssdrop-down-menumenunav

What is the best method to locate and reference a specific string within an HTML document using Python?

My specific need involves two separate html pages. One page consists of hyperlinks while the other contains detailed responses corresponding to those hyperlinks. What I am looking for is, when I click on a hyperlink in the first html page, it should dire ...

pythonhtml

Merging Two Angular Pages within a Jhipster Application

My jhipster application is simple, generating 2 entities: Product and Category. The generated pages to list the data for these entities can be found here. Specifically, there are pages for Product and Category. If I want to create a new page that combines ...

javascripthtmlangularjsjhipster

Angular date control and its corresponding date panel are not properly aligned on the user interface

I am utilizing Angular and Angular Material for date control display. See the code snippet below: <input type="date" (change)="validateDateRange($event,true, index)" class="form-control oot-start-date align-middle" name=& ...

cssangularangular-material

In PHP/HTML, input submit does not work with CSS styling

I am struggling with styling the input submit button in my form. I want the button to appear as text with a change in background and font color on hover. Any solutions? input[type="submit"] { font-family: made, mirage; text-decoration: none; backg ...

htmlcss

Looking for a jQuery fix: How can I deactivate specific items once an item is selected?

I'm currently working on a form where I need certain options to be disabled when a specific option is selected. I'm new to jQuery and could use some assistance, thank you. Check out the link here: My goal is to disable some options in the secon ...

javascriptjqueryhtml

ASP.NET showcases icons in a distinct manner compared to HTML and CSS

I'm encountering an issue while trying to convert HTML/CSS to ASP.NET. In the original HTML, the icons were arranged in a single row of four icons, and for mobile devices, they were displayed in 2x2 rows. When I attempted to copy and paste the HTML wi ...

htmlcssasp.net

The conversion of a newline in an Angular page is done using &lt;br/&gt tag

Here is a function I have: setLocalVariableOnAccepted(ogp, hb, responseJson) { if (responseJson.ofgp === undefined) { this.ogpStatus = 'orange'; this.ogpStatusMsg = responseJson.ofgp + ', <br/> No change. Previous va ...

javascripthtmlangularnewline

An interactive top navigation bar paired with three dynamic columns housing scrollable content, all crafted seamlessly with Bootstrap 4

I recently updated my layout using bootstrap but I am facing a glitch. I want the layout to have fixed scrolling only within the columns, without affecting the entire page. Everything works fine until I add some text inside any of the columns, then the who ...

cssbootstrap-4

What might be causing the 404 Error to appear on the mobile version of my website?

Currently, I am in the process of developing a static website using HTML, CSS, and Javascript. To add on-scroll animation effects, I have incorporated a plugin known as AOS. In addition, I have included Bootstrap in my project which was installed through n ...

htmlwebhttp-status-code-404cpanelweb-hosting

Step-by-step guide on incorporating Google Fonts and Material Icons into Vue 3 custom web components

While developing custom web components with Vue 3 for use in various web applications, I encountered an issue related to importing fonts and Google material icons due to the shadow-root. Currently, my workaround involves adding the stylesheet link tag to t ...

javascriptcssvue.jsweb-component