Expanding space underneath for inline-block elements

Is there a way to create a page layout with inline-block elements that are vertically aligned to the top and fold into open space like floated elements do when placed below another set of inline block elements? It seems as though they follow row-like rules. Any solutions for this issue?

Check out the layout example in JSFiddle

CSS

* {
    font-family:helvetica;
    font-size:18px;
}
.container {
    margin:0 auto;
    width:90vp;
}
.main_content {
    background:red;
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
    width:76.04%;
    min-height:200px;
}
.content_details {
    background:blue;
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
    width:22.39%;
    margin-left:01.56%;
    min-height:250px;
}
.comments {
    background:green;
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
    width:76.04%;
    min-height:150px;
}

HTML

<div class="container">
    <div class="main_content">
        <h1>Main Content</h1>
    </div
    ><div class="content_details">
        <h2>Details</h2>
    </div
    ><div class="comments">
        <h2>Comments</h2>
    </div>
</div>

If changing the mark-up to have only two columns is an option, please let me know. However, I am specifically looking for a solution to maintain three separate inline-block elements (as shown in the JSFiddle example) without requiring additional mark-up.

Answer №1

There is no easy way to achieve that. One workaround would be to structure your HTML like this:

<div id="col1">
    <div id="maincontent"></div>
    <div id="comments"></div>
</div>
<div id="details"></div>

After doing this, you can style #col1 and #details as inline-block elements.

An important thing to note about inline-block elements is that they are meant to behave inline, not like table cells. They act like a line of text that wraps when it goes beyond the container's width.

You can see a live demo here: http://jsfiddle.net/GXmM6/

Answer №2

If you're hoping for a different outcome, both floats and inline-block won't cut it here unless you encapsulate each column within its own div. If that's not an option, fear not as there are JavaScript remedies available such as Masonry. Keep in mind, however, that this may require extensive positioning to achieve the desired result.

Answer №3

It seems like you were aiming for the .content_details to function as a sidebar, correct? I made a simple adjustment by changing it from display: inline-block to float: right, which allowed the .comments section to flow smoothly beneath your .main-content. Here is a working example for reference: http://jsfiddle.net/koivo/7UqqF/. I believe this setup could also work effectively using just display: block...

* {
    font-family: helvetica;
    color: white; /* added */
    font-size: 18px;
}
.container {
    margin: 0 auto;
    width: 90vp;
}
.main_content {
    background: red;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 76.04%;
    min-height: 200px;
}
.content_details {
    background: blue;
    /* display: inline-block; */
    float: right; /* added */
    vertical-align: top;
    box-sizing: border-box;
    width: 22.39%;
    margin-left: 01.56%;
    min-height: 250px;
}
.comments {
    background: green;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 76.04%;
    min-height: 150px;
}

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 proper functioning of border-collapse and empty-cells together is not achieved

Refer to the link provided: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables To conceal empty cells, use the rule empty-cells: hide;. This allows a cell's parent element background to shine through the cell if it is emp ...

Iterate endlessly over CSS styles in Angular 4

I'm looking to create a website background 'screensaver' by looping through an array of background URLs with a delay between switches. Currently, I have the array stored in my .ts file and I am using the NgFor directive in my HTML. However, ...

Having trouble setting up an input tag to successfully submit the form and trigger the opening of a BootStrap Modal

Is there a way for me to submit a form to my servlet and open a BootStrap Modal simultaneously using an input tag in my .jsp file? I've tried setting the input tag type to "button" but then I can't submit the form. And when I set it to "submit", ...

Employing the GET method to retrieve the values of two text inputs

I'm struggling to retrieve the values from two text input fields: <form action="search.php"> <input type="text" name="q1"> <input type="text" name="q2" > <input type="submit" name="submit" value="Search" /> </form> On t ...

The full extent of the background color is not reaching 100% of the height

My content wrapper has a height set to 100%, but the issue is that the background color doesn't fully extend across all content. Here are some images and my code for reference. Any assistance would be greatly appreciated! You can see the white space a ...

What sets apart Material UI's gutterBottom from a paragraph?

Can you explain the distinction between these two options? While exploring the Typography Component API, I noticed that both the gutterBottom and paragraph props seem to serve the same purpose. If set to true, the margin bottom will be 0. You can find mor ...

The substance (singular word) extends beyond the margins of the mobile screen

I am facing an issue on my webpage where the title is too long and it goes out of the page on mobile devices. Here is an example: <div class="module-head"><h3 class="module-head-title">Search Engine Optimization - Why Is It ...

Creating a Functional Right Arrow on a Pure CSS Select Menu/Dropdown

I have implemented a custom select/dropdown menu by following the solution provided here: The functionality works well, but I am facing an issue where the dropdown options only appear when clicking on the box. Clicking on the 'arrow' located on ...

How can I ensure that the HTML I retrieve with $http in Angular is displayed as actual HTML and not just plain text?

I've been struggling with this issue for quite some time. Essentially, I am using a $http.post method in Angular to send an email address and message to post.php. The post.php script then outputs text based on the result of the mail() function. Howev ...

Tips for maintaining knowledge after redirecting to a new page

Building an app using Ionic 4 where I need to display vouchers from a database as images. Each image should act as a link to a details page showing more information about that specific voucher. However, I am struggling to figure out how to keep track of th ...

The absence of underlines for <a href> and <u> is causing an issue

Below is a snippet of code that I am working with: echo "<form> <div id=\"error\"align=\"center\">"; echo "You've either entered the incorrect <b>username</b> or incorrect <b>passwor ...

What techniques can I employ in HTML and CSS to design the user interface for my Java application?

Recently, I came across an interesting article at this link: http://docs.oracle.com/javafx/2/webview/jfxpub-webview.htm. The article demonstrates how to develop a java application utilizing the javafx library and utilizing classes like WebEngine and WebVie ...

Ensuring input boxes are neatly positioned underneath one another, regardless of the chosen font size

Is there a way in CSS to ensure that these input boxes are always aligned below each other, regardless of font family, size, or window movement by the user? https://i.stack.imgur.com/Zbadh.png Currently, I am using the following approach: tab1 { paddi ...

Retrieving input data from FormSubmit command

I have implemented Formsubmit to manage forms on my websites, but I do not want users to be redirected to another page when submitting the form. My website is hosted on Netlify and when I tested the forms, I did not receive the information in my email. I a ...

Instructions on how to activate scrolling for a div element that becomes visible upon clicking a button

When a button in the navbar is clicked, a div appears with a height that exceeds the viewport/page size. How can I enable scrolling for the entire page when this happens? I attempted to use overflow: scroll, but it only applied scrolling to the internal d ...

Cover any HTML element with a translucent overlay box

I have a unique problem with an HTML file that is out of my control when it comes to its content. My only option is to inject a CSS file and/or JavaScript (potentially using libraries like jQuery) into the mix. Within this HTML, there are elements that re ...

Can you explain the contrast between onsubmit="submitForm();" and onsubmit="return submitForm();"?

Is it possible that the form below is causing double submissions? <form name="myForm" action="demo_form.asp" onsubmit="submitForm();" method="post"> function submitForm(){ document.myForm.submit(); } I've noticed a bug where sometimes two ...

What could be causing my HTML table to resize images from left to right?

My latest attempt at creating a simple HTML table involved filling it with placeholder images and spacing them out using a background color. However, the end result was not what I expected: https://i.sstatic.net/kyRil.png Upon closer examination, you&apo ...

Struggling with converting my menu design into a dropdown menu

Recently completed creating my initial menu with a left navigation bar design. Wondering if it is achievable to implement a dropdown effect on hover without the use of javascript? I have come across several solutions but they do not seem to work for me, po ...

Utilize text-to-speech technology to convert the output results into

Looking for a way to live stream a text to speech message triggered by a button press on your website? Unsure how to accomplish this with Node.js and generate the file after the button press? Let's explore some solutions together. ...