What is the best way to keep horizontal divs aligned in a row with margins between them within a wrapper?

I have arranged three divs in a row with a 10px margin between them within a responsive layout.

Currently, the divs have margin-left: 10px; margin-right: 10px; to create spacing. However, I aim to align them perfectly within the wrapper without any extra margins at the ends where they meet the wrapper edges.

Any suggestions on achieving this layout?

Appreciate your help!

Code:

CSS -

#frontpage {
float: left;
width: 32.33%;
margin-left: 0.5%;
margin-right: 0.5%;

}

HTML output in Wordpress:

    <aside id="frontpage" class="widget widget_text">
<h3 class="widget-title">Quickplay</h3>
<div class="textwidget"><p>Content Here</p>
</div>

    <aside id="frontpage" class="widget widget_text">
<h3 class="widget-title">Quickplay</h3>
<div class="textwidget"><p>Content Here</p>
</div>

    <aside id="frontpage" class="widget widget_text">
<h3 class="widget-title">Quickplay</h3>
<div class="textwidget"><p>Content Here</p>
</div>
csshtml

Answer №1

Consider the following HTML:

<div id="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

along with this CSS:

#wrapper > div {
    float: left;
    margin: 0 10px;
}

Now, replace the above CSS with:

#wrapper > div {
    float: left;
    margin-left: 20px;
}
#wrapper > div:first-child {
    margin-left: 0;
}

Answer №2

To remove margins on the first and last children, use the CSS selectors :first-child and :last-child:

.mydiv:first-child {
    margin-left: 0;
}
.mydiv:last-child {
    margin-right: 0;
}

Answer №3

When dividing them into 33%, the total will exceed 100% with margin/padding, causing the third div to go to the next line. You may need to compromise on width. Give it a try and see if it works for you, although it may not be perfect, it's much closer to what you're aiming for.

<style>
  #one{display:inline; float:left; width:32.7%; }
  #two{display:inline; float:left; width:33%;  margin-left:10px; margin-right:10px;}


<div id="big_wrapper">
  <div id="one"> this is the first div where your content goes here. </div>
  <div id="two"> this is the second div where your content goes here.</div>
  <div id="one">this is the third div where your content goes here. </div>

It seems to work fine, with only a slight difference in width that is hardly noticeable.

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 chosen options are not appearing. Could this be a problem related to AngularJS?

I am working on setting up a dropdown menu in HTML that includes only the AngularJS tag. This dropdown menu will be used to populate another AngularJS dropdown menu. Below is the code for the first dropdown menu: <select class="form-control" ng-model=" ...

javascripthtmlangularjs

How do I stop Bootstrap from taking over my custom navbar design?

My website's navbar stopped working after adding Bootstrap to my HTML pages. I suspect that Bootstrap is overriding my custom CSS. Here is the code for my navbar: .navbar { overflow: hidden; !important; background-color: #333; !important; } .. ...

htmlcssbootstrap-4thymeleafnavbar

Changing an image into a background image

I currently have functional code that retrieves an image inside a div. However, upon checking it on mobile devices, the image appears too small. When I attempt to increase its height, it becomes disproportionate. As a solution, I am attempting to set the i ...

phphtmlcss

Mobile media queries are ineffective despite implementing the viewport meta tag

I am facing an issue that even though I have tried various solutions, my media queries are not working on mobile devices after adding the viewport meta tag. Can anyone provide insight into why this might be happening? Update: Upon further investigation, I ...

htmlcssmedia-queries

Adjust the text orientation using CSS within an SVG element

Here is the SVG code snippet that I am working with: https://jsfiddle.net/danpan/m3ofzrc1/. It generates the image shown below. The image consists of two lines of text wrapped around a circle: HELLO_WORLD_1 HELLO_WORLD_2 I want to change the direction ...

htmlcsssvgcss-animations

When using equal-width columns in Bootstrap, the columns will be stacked one on top of the other

When I utilize Bootstrap 5, I am encountering an issue where equal width columns are being displayed one underneath the other. To illustrate, here is a simple example directly from the Bootstrap website: <link rel="stylesheet" href="https://cdn.jsd ...

htmlcsstwitter-bootstrapbootstrap-5

Content from ajax request is invalid

Currently, I am facing an issue with loading a comment list and replacing the existing list on my HTML page with the new one. Previously, I used to load a simple XML list, iterate over its elements, and generate content. Although this method worked fine, i ...

jqueryhtmlajax

Can the information from a form be automatically submitted to the server upon selection?

<div class="modal-body modal-body-step-2"> <form action="prenotazioni.php" method="post"> <div class="input-group"> <input type="radio" name="spettacolo" value="Lo Schiaccianoci">Lo Schiaccianoci<br> ...

htmlajaxforms

the deactivation of my rollover class is being caused by my float class

With the assistance of a generous contributor on stackoverflow, I was able to overlay different colored CSS boxes onto various images. These boxes could be removed upon mouseover, revealing the images beneath. You can view the code I used on fiddle here. ...

javascriptjqueryhtmlcss

Text vanishing upon the loading of an HTML webpage

I am experiencing an issue where the text on my webpage disappears after it loads, and I am struggling to figure out the cause. (I did not create the site) The white text displayed on top of the header image initially appears correctly but then vanishes. ...

jqueryhtmlcss

Eliminating elements that adjust according to different screen sizes

Website: I am currently working on customizing a Tumblr theme I downloaded by removing some responsive elements. The rollover effects I created are being affected when the screen size goes below 1024px, and I am not happy with how it looks. Additionally, ...

csstumblr

Add a new element to the page with a smooth fade-in animation using jQuery

var content = "<div id='blah'>Hello stuff here</div>" $("#mycontent").append(content).fadeIn(999); Unfortunately, the desired effect is not achieved with this code. I am trying to create a sleek animation when adding new content. ...

javascriptjqueryhtmlcss

How can I insert a item into an Array using JavaScript code?

My instructor set up an array in my JavaScript file that is off limits for me to modify. My task is to add new objects to it through code without directly manipulating the existing array. Here's a snapshot of what my array contains: const words = [{ ...

javascripthtmlcssarraysobject

Preserve the div's aspect ratio using CSS styling

Is there a way to design a flexible div element that adjusts its width and height in sync with the window's size changes? Do any CSS techniques exist that would allow the height of the div to adapt based on the width, while still preserving its aspec ...

htmlcssresponsive-designaspect-ratio

Enhancing jQuery Mobile listview with voting buttons on each item row

I am looking to incorporate 2 vote buttons within a jQuery mobile listview, positioned on the left-hand side and centered within each list item. While I have managed to achieve this using javascript, my goal is to accomplish it without any additional scrip ...

javascriptjqueryhtmlcssjquery-mobile

Display items in a not predetermined order

Despite its simplicity, I am struggling to get this working. My aim is to create a quiz program using JavaScript. Here is the basic structure: <ul> <li>option1</li> <li>option2</li> <li>option3</li> </ul> &l ...

javascripthtmlcss

Lost in a sea of confusion with ember-cli-postcss and autoprefixer

I'm currently working on an ember build that incorporates autoprefixer. My issue arises from the fact that the output location for 'assets/application-name.css' has shifted from its normal path to 'app/styles/app.css', and I would ...

cssember.jsember-clipostcssautoprefixer

Top strategies for creating a fully responsive HTML design

Currently, I am exploring the concept of responsiveness in my small projects for educational purposes. I have been researching websites such as: w3schools-mediaquery While I have come across some interesting insights, I am curious about how to effectivel ...

htmlresponsive-designresponsive

What are the benefits of sticking with Express versus transitioning to a combination of JavaScript and HTML?

Recently, I've been developing a web application that involves taking user input to make modifications to files on the server side. The main logic for this project is built in node.js and operates via command line, with the rest of the site being deve ...

javascripthtmlnode.jsexpress

React Router version 6.4.5, automatic redirection upon loading the page

Seeking assistance with setting up redirects. Below are snippets of the code. index.js const router = createBrowserRouter([ { //Defining App as the root element... path: "/", loader: () => { }, element: <App/>, ...

javascripthtmlcssreactjsreact-router