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

Question

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>

css html

Answer 1

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

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 3

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 4

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 5

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.

Answer 6

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.

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

Answer №1

Answer №2

Answer №3

Similar questions

CSS font attribute stylus variable

Ways to replace CSS classes created using makeStyles

Using jQuery to update the parent element from within an iframe

The sub-menu is being obscured by a PDF element in Internet Explorer, causing visibility issues

Managing state changes with a slider in ReactJS

Show the user's input within a clickable button

What is the best way to target specific elements within my array using Jquery?

Employing JavaScript for fading divs in and out sequentially

Tips for updating the appearance of material-ui table pagination

jQuery and HTML: Need help enabling an <input> or <select> element?

What is the best way to enhance a tool-tip with images or legends?

Transfer an HTML file object between two <input type="file"> elements

Am I on the right track with incorporating responsiveness in my React development practices?

The persistent space between the navbar and the index page remains despite the suggested fixes provided

Unable to retrieve the sum total of all product items and display it in the designated text element

Modify the color of the footer area and eliminate any underlines present

I am experiencing an issue with my Angular directive where the button click does not

The responsiveness of Angular Material appears to be limited when tested in Chrome's debug mode for different devices

Issue with concealing floated elements within a container div

Having trouble with displaying the CSS background image?