Having difficulty aligning Divs perfectly?

I'm struggling to center four green divs that have a float left, surrounded by a wrapper div in blue. I want them to be aligned a certain way, but on larger screens, they are not displayed in the center. I need them to float underneath each other when the screen size is reduced. Any suggestions on how to achieve this?

http://jsfiddle.net/qvu712tj/

#blog-wrapper {
  background-color: blue;
  width: 100%;
  height: 700px;
  margin-left: auto;
  margin-right: auto;
  align: center;
}
.blog-section {
  background-color: green;
  height: 200px;
  width: 45%;
  margin: 10px;
  float: left;
  padding: 5px;
}
<div id="blog-wrapper">
  <div class="blog-section"></div>
  <div class="blog-section"></div>
  <div class="blog-section"></div>
  <div class="blog-section"></div>
</div>

If you have any suggestions, please let me know. Thank you!

htmlcss

Answer №1

Give this a shot: 

.article-container {
  background-color: green;
  height: 200px;
  width: 45%;
  margin: 10px 2.5%;
  float: left;
/* padding: 5px; */ 
}

Answer №2

Opt for percentages over pixels when setting margins and paddings

.article-container{
    background-color: blue;
    height: 250px;
    width: 50%;
    margin: 2%;
    float: right;
    padding: 2%;

}

Answer №3

Give this a shot

.website-section{
  background-color: blue;
  height: 180px;
  width: 50%;
  margin: 10px 2%;
  float: right;
}

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 can I use AngularJS to show a JSON value in an HTML input without any modifications?

$scope.categories = [ { "advertiser_id": "2", "tier_id": 1, "tier_name": "1", "base_cpm_price": "", "retarget_cpm": "", "gender": "", "location": "", "ageblock1": "", "ageblock2": "", "ageblock3": ...

javascripthtmlangularjsjson

Tips for submitting a form using alternative methods of action

Currently, I am facing a challenge in retrieving information from a database using submit buttons with the same name. I assign a value to these buttons, which corresponds to the id of the row, enabling me to perform different actions. However, I am unsure ...

phphtml

CSS-only method for creating a fixed position sidebar with adjustable width

https://i.stack.imgur.com/e4Gsv.png I have a vision of creating something similar to the image above solely using CSS. The design must incorporate the following elements: The image-container will hold a 3x4 aspect ratio image, filling the available heig ...

htmlcssflexbox

Change background according to URL query

My goal is to dynamically change background images based on a URL parameter, specifically the destination code. With numerous background images available, it's crucial to display the correct one depending on the URL string. For instance, if the URL re ...

javascriptjquerycssimage

Is there a way to get rid of the "bouncing effect" on my button while using an inline floating-label text input?

When an input with a floating label (Bootstrap 5) is inline with other elements, the elements may appear to jump up and down depending on the position of the floating label. https://i.sstatic.net/kDxBo.gif <link href="https://cdn.jsdelivr.net/npm/bo ...

htmlcsstwitter-bootstrapbootstrap-5

adjusting the size of the sidebar at the top to ensure that it does not overlap the top menu

I have a sidebar on my page that opens vertically when I click a button. The sidebar covers the company logo and name, so I want to make it smaller. Here is the code for the sidebar: <body> <nav class="navbar navbar-dark bg-dark" ...

javascripthtmlcssflexbox

Manipulating CSS rules using JavaScript/jQuery

My goal is to create a function that generates a grid based on table data. While the function itself seems to be working, I am encountering an issue where the classes applied are not resulting in any style changes. Below is a snippet of my function: $(doc ...

javascriptjqueryhtmlcss

Is there a way to create a dropdown menu that appears to emerge from behind a button?

I am struggling with the stack order of my dropdown menu. Despite using z-index, it appears in front of the button instead of behind it. I want it to look like it is coming out from behind the button. Here is my code: .subnav-wrapper { position: relat ...

htmlcss

Hover Effect with CSS Selector - JavaScript or jQuery Implementation

I have a similar code snippet: <article class="leading-0"> <h2> <a href="link">link title</a> </h2> <ul class="actions"> <li class="print-icon"> <a ...><img...>& ...

javascriptjqueryhtmlcsscss-selectors

When the enter key is pressed in a contenteditable div, line breaks are disregarded

Is there a way to ensure that when the return key is pressed to start a new line for a post, the output actually starts on a new line? I've been having trouble with this and would like to know the most common solution. Check out the demo below for te ...

javascriptphphtmlcss

Having trouble with the Document.createElement function not functioning properly when trying to download a

ISSUE While my PDF download feature functions properly in Chrome, it encounters difficulty when attempting to work in IE 11/10/9. When using IE, I receive a security warning prompt. After selecting Yes to allow the download, nothing happens. SOURCE CODE ...

javascripthtmlreactjs

Tooltip positioned within a custom container using Material UI

Currently, as part of my Chrome extension development utilizing React and Material UI, I am implementing an inject page strategy. I have managed to set up a tooltip for the Fab button, but unfortunately, it appears outside the DOM of my extension. Upon ins ...

javascripthtmlreactjsgoogle-chrome-extensionmaterial-ui

Javascript dynamically generates CSS animations

I need assistance creating a div with a CSS3 animated timer inside it when a button is clicked. Here is the code I have been working on: http://jsfiddle.net/arcco96/y5nov6rz/1/. Unfortunately, the div is not being created as expected. I believe the code sh ...

jqueryhtmlcssanimation

Ways to update the UI dynamically in Angular without the need to refresh the entire page

On my page, I have multiple charts and I'm facing an issue where the chart UI does not update immediately when I try to make a delete call by clicking the delete button. I always have to refresh the browser to see the changes. I have provided the ful ...

htmlangulartypescriptangular-materialeventemitter

Tips for utilizing smooth scroll through jQuery by implementing a specific class

After spending a considerable amount of time on this task, I find myself at a crossroads. In the second part of my code (as indicated), there is an anchor tag (< a >) with a class name. My goal is to implement a smooth scroll to an element based on t ...

javascripthtmljquery

Intermittent functionality observed with jQuery mobile swipe feature

I have implemented swipe events using jQuery mobile 1.3.2, where I slide the note_container left/right with each swipe. However, I am facing issues with the swipe event registration on Samsung Galaxy S3 and other android devices, as it is intermittent and ...

jqueryhtmljquery-mobilemobile

In search of a CSS selector that can target elements based on specific text contained within them

Query: <div class="btn btn-second-in-pair-not-desired btn-tall">Clear search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Raw Search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Basic Searc ...

htmlcssseleniumselenium-webdriver

Exploring HTML attributes with Nokogiri

Below is the code snippet that I've been working with: location = block.xpath("*/img") puts location Upon execution, the code provides the following output: <img src="/images/p.gif" height="1" width="0"> My objective is to extract the widt ...

htmlrubynokogiri

Implement a custom placeholder feature for InputNumber in Blazor

I have a question about adding a placeholder to the InputNumber component. I attempted the following code but unfortunately, it did not work as expected. //Code behind public int? Hour { get; set; } //razor page <EditForm Model=&quo ...

c#htmlblazor

Tab knockout binding

I have a section in my HTML with 2 tabs. The default tab is working properly, but when I attempt to switch to the other tab, I encounter an error. Can anyone provide assistance in determining why this error occurs? Here is the HTML code: <ul class="na ...

javascripthtmlknockout.js