Understanding the reasons for floated elements impacting the heights of non-floated elements (D7 views blocks using the zen theme)

Currently working on updating a website that was originally built on D7 with a 7.x-56 zen sub theme. The layout of the theme consists of responsive horizontally stacked content regions. Recently, I created a custom blog content type along with three views blocks based on taxonomy, archive, and recent posts. However, I'm facing some issues with the layout of these individual blocks within the content region.

The desired outcome is to have the three blog content filter blocks stacked and floating to the right, while the actual blog content is floated left. While I've managed to somewhat achieve this by floating and clearing the blocks so they stack on top of each other, the problem arises in their influence on the height of the first blog post.https://i.sstatic.net/qWggd.png Could someone shed light on why the floated elements impact the views row's height and suggest a solution? You can view the live version of the site here. For additional context, the page is a view constructed from a custom content type, and the filter views are placed using the context module with an equal row height of -9. Do you recommend adding a sidebar region here or perhaps there's a CSS fix for this issue?

htmlcssdrupal-7zen

Answer №1

To create a visually appealing layout for the main blog area, consider assigning it a percentage width and floating it to the left. For the stacked divs on the right side, group them together within a single container div, float this container to the right, and assign it a percentage width.

Ensure that the parent div containing both of these elements has its overflow property set to "auto".

#main {
  overflow:auto;
}

#left {
  float:left;
  width:65%;
}

#right {
  float:right;
  width:30%;
}



<div id="main">
    <div id="left"></div>
    <div id="right">
        <div id="box-1"></div>
        <div id="box-2"></div>
        <div id="box-3"></div>
    </div>
</div>

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

How do I integrate a button into my grey navigation bar using tailwindcss in REACT?

Is it possible to integrate the - button into the gray bar? I am encountering an issue where my blue button extends beyond the borders of the gray bar in the image provided. export default function App() { ... return ( <div className="text-md fon ...

javascriptcssreactjstailwind-css

What could possibly be the reason behind jQuery's inability to function properly with HTML content that was dynamically added to the page through an Ajax

The following code snippet is responsible for submitting a form using Ajax and displaying the result from the addNewUser.php script in a popup window. //trigger the signup submit button $('#button_signup_submit').click(function() { document ...

htmldomjquery

Create a sleek and uniform design with Bootstrap by setting up three columns that maintain the same height

I am attempting to design a 3 column div that maintains equal height for all responsive rows, each containing an ICON and information. <div class="container"> <div class="row row-eq-height"> <div class="col c ...

htmlcssbootstrap-4

Navigating URLs in various Android browsers: Tips and Tricks

I am on a quest to find a method to engage with various android browsers. My goal is to retrieve the URL of the website being viewed by the browser. I want my app to operate in the background and issue an alert when a designated URL is accessed, primarily ...

javaandroidhtml

Trouble with radio button selection using onclick event in Bootstrap

I've been attempting to implement an onclick event with radio buttons in Bootstrap, but unfortunately the event isn't triggering. Here's the code I'm using: <input type="checkbox" onclick="alert('Scenery!')"/> However, ...

javascriptphpjquerycssbootstrap-4

What are some techniques for concealing a rendered element retrieved using the fetch API?

Currently, I am grappling with a coding challenge that requires me to extract data from https://jsonplaceholder.typicode.com/users using the fetch API function along with bootstrap and jquery. To display the data in a div element, I utilized the array.map( ...

javascripthtmljquerycssangularjs

Changing the background color of a select box without removing the right arrow on Mobile Safari

I am trying to update the background color of my select box to a solid color while keeping the right arrow (drop-down arrow) visible. My current approach is as follows: select { -webkit-appearance: none; border: 0; background: none; } While ...

ioscssselectbackgroundsafari

PHP code for turning an email address into a clickable link

While I was able to discover how to convert a URL into a clickable link using PHP here, I am now curious if anyone has a solution for the same functionality but with an email address. Any help would be appreciated! Thank you! ...

phpmysqlhtmlregexemail

Ways to change the background color of cells with spaces in HTML to black

https://i.sstatic.net/rmtR1.png How can I change the cells that have a space or any separator to be black in color? This snippet shows my HTML code: <table > <thead class="table table-bordered table-responsive"> ...

htmlcssangulartypescript

The CSS animation initially encounters a glitch before ultimately running smoothly as planned

I am currently working on a basic webpage that will showcase a list of disciplines. When a discipline is selected, relevant information will be displayed below. The code snippet available here demonstrates the functionality I am aiming for. However, I hav ...

htmlcsscss-animationskeyframe

What is the option for receiving automatic suggestions while formatting components in a react.js file?

When styling elements in our app using app.css or styles.css, VS Code provides auto-suggestions. For example, if we type just "back" for background color, it will suggest completions. However, this feature does not work in react.js or index.js. Why is that ...

javascripthtmlcssreactjs

position the tooltip within the ample available space of a container in an angular environment

In my editor, users can create a banner and freely drag elements within it. Each element has a tooltip that should appear on hover, positioned on the side of the element with the most space (top, left, bottom, right). The tooltip should never extend outsid ...

javascripthtmlangulartypescriptangular-cdk-drag-drop

Utilizing lz-string to import and export game data in JavaScript for saving purposes

Lately, I've been discovering a multitude of web-based games that allow you to export and import your save game data. When you click "export," you receive a string of random characters as your save file. I want to store my save game state using lz-str ...

javascripthtmlfunctionsave

How to design a trapezium shape using CSS and HTML

While there are many tutorials available for creating Trapezoids with CSS3, I am interested in making a four-sided shape where none of the sides are parallel (trapezium), similar to the one shown in the image below. Can this be achieved? ...

htmlcsscss-shapes

Issue with active class in Bootstrap navigation tabs

Check out the following HTML snippet: <div class="process"> <h2 style="text-transform: uppercase;">The Application Process</h2> <br><br> <div class="row"> <div class="col-md-3" align="left"& ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Is there a way to toggle or collapse a table row with a unique identifier using Angular and Bootstrap?

Currently handling Angular and Bootstrap in my work, but facing challenges with table manipulation and collapsing rows. I fetch data from a database and showcase it in a dynamically generated table using *ngFor and two rows within an ng-container. My goal ...

htmlangulartypescriptdatatablesangular-ui-bootstrap

Can you identify the programming language used in this code snippet? - {"html":"<section class="page">

I've been approached to assist with a friend's company website since the original developer seems to have disappeared. Apologies if this question is too basic for this forum, and please forgive me if I am not in the right place to ask it. The m ...

htmlajax

experiencing a problem when trying to retrieve data from form radio buttons

I've encountered an issue with receiving form data in PHP when dealing with radio buttons created using jQuery. While all input data is received correctly for multiple fields, only the response from the first field's radio button is accurate. For ...

phphtmlforms

Ways to set a button as default clicked in an Array

I have a collection that stores languages and their boolean values. My goal is to automatically set buttons to be clicked (active) for each language with a true value in the collection. Whenever a different language is selected by clicking on its respect ...

javascripthtmltypescript

What could be causing my JavaScript to malfunction after clicking on anchor links?

My website's JavaScript has a bug where clicking the links in the static header causes scrolling to become buggy and unbearable. What can I do to fix this issue? Thank you in advance. Here is my code: $(window).load(function(){ $(windo ...

javascriptjqueryhtmlcssjscript