elements within the adaptable grid structure

I'm experimenting with the Responsive Grid System for the first time and encountering difficulties getting my columns to display side by side. I have a two column grid setup for some design elements and centered content for others.

Below is the relevant HTML:

<div class="section group" id="about">
   <div class="col span_1_of_2" id="p1">
      <p>Lorem ipsum dolor sit amet</p>
   </div>
   <div class="col span_1_of_2" id="p2">
      <p>Lorem ipsum dolor sit amet</p>
   </div>
</div>

and corresponding CSS:

.section {
clear: both;
padding: 0px;
margin: 0px;}

.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;}

.span_2_of_2 {
width: 51.8%;}
.span_1_of_2 {
width: 49.2%;}

Why are my columns stacking vertically instead of horizontally? What could be causing this issue?

(you can access the responsive grid here)


Appreciate any insights!

Answer №1

Encountering an issue with width? Check out this Fiddle

The problem lies in the margin-left of .col, which ends up giving .span_1_of_2 a width of 48.4% after calculations.

.span_1_of_2 {
  width: 48.4%;
}

*Please note that this solution is tailored to your current HTML structure, as seen by the use of only .span_1_of_2. The Fiddle showcases how both spans should be set to this specific dimension.

Answer №2

49.5 + 50.5 = 100%

Deduct 1 from either of the numbers.

Answer №3

In order to create a responsive grid layout, I would opt for setting my <div> elements with the CSS property display: inline-block instead of using float: left and display: block. By doing so, the columns will align next to each other when they are small enough, but as they expand beyond a certain width, the rightmost <div> will drop down below the others for improved responsiveness.

http://jsfiddle.net/ZM3bK/

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

Show a compact graphic in the upper-right-hand corner

Hey, I have this interesting idea but CSS isn't my strong suit. Any thoughts on how to achieve it? I'm looking to create a new class that, when applied to an item (like a div), displays a small clickable pre-defined image in the Top-Right corne ...

Is it possible to add padding to an HTML element without affecting its overall dimensions?

Is it possible to apply padding to a div without increasing its size? <div id="someDiv"> someContent </div> #someDiv{ padding: 1em; } One potential solution is to add another nested div within #someDiv and apply margin to that, rathe ...

Using a combination of HTML and CSS3, craft this specific geometric design

Here's a sample image demonstrating how to create this button using CSS3. I would greatly appreciate any assistance! ...

Switching from HTML to PHP programming

Trying to build a website from scratch and incorporate a form has been challenging. My goal is for the Submit button to send an email without launching any email program, but I'm facing redirection issues. Despite searching on Google for solutions, I ...

Most left-aligned icon on the left, most right-aligned icon on the right, and evenly spaced icons in between

Imagine a scenario where you are presented with a questionnaire that allows you to respond using a slider (HTML range element). Below the div containing the range selector (slider), I have arranged icons that need spacing. The icon on the far left should ...

What are some indicators to know when HTML has completed rendering on a webpage?

Is there a way to disable a button in Angular2 while the HTML is loading and then enable it once the rendering process is complete? ...

Is there a way to verify the presence of a specific word within a classname?

My goal is to verify if the string ("Pre laminated ") matches the css class name I am checking. I only need confirmation of whether the given word is present in the classname: Output "pass" if it exists, output "fail" if it does not. ...

Conceal the prominent image when viewing a single post

I've been attempting to hide the featured image on single post view but so far, neither a plugin nor the theme panel option has worked for me. I even tried adding custom CSS code without success. Is there another method that can be used to hide the fe ...

Convert JSON data without backslashes using json_encode

I am having an issue where I retrieve a JSON encoded array from the database, modify one field, and then save it again. However, when I use json_encode, it removes the backslashes and as a result, the text is not displayed correctly on my site. $data_de=j ...

What's the best way to align text at the center of this DIV?

I recently created a small offline website with a header that includes a logo, navigation bar, and notification bar. While I managed to align everything as intended, I encountered an issue with the text alignment within the notification bar (header-alert). ...

A situation where the event onclick fails to occur within NextJS

index.js: function Home () { return <div> <html> <head> <title>Site</title> </head> <body> <div class= 'v5_3' onclick = "func_click()"></div> </b ...

Remove the presence of a black square when selecting elements using CSS

Update: After some investigation, I discovered that the mysterious black square is actually a part of the scroll bar. By adding the following code snippet: select::-webkit-scrollbar { display: none; } The square no longer appears. Initially, my se ...

What steps are needed to develop a proper HTML structure for this specific box in order to achieve the desired aesthetics?

Currently working on a box that includes various tags and an input field for adding new tags. The goal is to make this box resemble the tag form used on YouTube: https://i.stack.imgur.com/RSj2p.png This particular layout features a box with existing tags ...

Displaying a hand cursor on a bar chart when hovered over in c3.js

When using pie charts in c3js, a hand cursor (pointer) is displayed by default when hovering over a pie slice. I am looking to achieve the same behavior for each bar in a bar chart. How can this be done? I attempted the CSS below, but it resulted in the h ...

Tips for extracting user-provided data from a dynamic table in Python with the help of Flask and JINJA2

I have been working on a Flask application where users can interact with a table by changing a cell and having those changes immediately reflected, such as updating them in the database. Check out the screenshots below: https://i.sstatic.net/3KCVP.png htt ...

Page showing without banner

As I scroll down through my website, I want a specific banner to appear when I reach the contact page. The banner will show a goodbye message and give users the option to close it or keep it open. For example: (function() { requestAnimationFrame(fu ...

When scrolling down a webpage, the background color of the content does not stretch along with the page

I've created a webpage with a sticky header and footer, along with a scrollbar on the main content. However, I'm facing an issue where the background color of the content does not extend beyond the viewport when scrolling down. The text is visibl ...

Resizing images for retina displays in Outlook (no img attributes required)

I am currently creating templates for an automation tool and am facing an issue with resizing retina images in Outlook. I am aware that typically, one would use image attributes such as style="max-width: 100px; width: 100%" to achieve this. The issue ar ...

Is there a way to enlarge images when hovered using canvas?

I came across a fascinating example at the following link: , where the images expand when hovered over. I am aware that this can be achieved using jquery, but I have concerns about its speed and reliability. I would like to experiment with d3.js, although ...

Is there a way to display the contents of a zipped file using an HTML IFrame?

Can I display the contents of a zipped file in an HTML iframe? For example: My_File.pdf.zip contains My_File.pdf. I currently have something like this <iframe src="/path of the folder/My_File.pdf.zip" /> The src attribute points to the zipped file ...