Struggling to align divs in HTML using CSS

Struggling with aligning my divs in the center of the parent div and keeping them inline. I have a parent "page" containing 6 other divs - "bg_01", "bg_02", "bg_03", "bg_04", "bg_05", "bg_06". They sit inline when the window is small, but when it's resized, they don't stay aligned. Any insights on what might be causing this issue?

Appreciate any help or suggestions.

p {
  margin: 0;
}

#page {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: 200px;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

#bg_01 {
  background-color: #80b3ff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  float: left;
}

#bg_02 {
  background-color: #afe9af;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  float: left;
}

#bg_03 {
  background-color: #ffb380;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  float: left;
}

#bg_04 {
  background-color: #ffaaaa;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  float: left;
}

#bg_05 {
  background-color: #eeaaff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  float: left;
}
<div id="page">
  <div id="pageName" }>
    <p>Colour</p>
  </div>
  <div id="bg_01">
  </div>

  <div id="bg_02">
  </div>

  <div id="bg_03">
  </div>

  <div id="bg_04">
  </div>

  <div id="bg_05">
  </div>
</div>

htmlcss

Answer №1

To center the content inside #page and replace float:left; with display: inline-block, you can add text-align: center;. Here is an example:

<div id="page">
  <div id="pageName">
    <p>Color</p>
  </div>
  <div id="bg_01">
  </div>

  <div id="bg_02">
  </div>

  <div id="bg_03">
  </div>

  <div id="bg_04">
  </div>

  <div id="bg_05">
  </div>
</div>

Here is the corresponding CSS:

p {
  margin: 0;
}

#page {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #f00;
  width: 100%;
  height: 100%;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

#bg_01, #bg_02, #bg_03, #bg_04, #bg_05 {
  background-color: #80b3ff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  display: inline-block;
}

You can view the fiddle here.

Answer №2

Remove the Float: left property from your elements and replace it with display: inline-block.

Additionally, apply text-align: center to the parent div.

p {
  margin: 0;
}

#page {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: 200px;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

#bg_01 {
  display: inline-block;
  background-color: #80b3ff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_02 {
  display: inline-block;
  background-color: #afe9af;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_03 {
  display: inline-block;
  background-color: #ffb380;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_04 {
  display: inline-block;
  background-color: #ffaaaa;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_05 {
  display: inline-block;
  background-color: #eeaaff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

Answer №3

1) Enclose elements inside a DIV with the class center

<div class="center"> <-------------------

  <div id="bg_01">
  </div>
  <div id="bg_02">
  </div>
  <div id="bg_03">
  </div>
  <div id="bg_04">
  </div>
  <div id="bg_05">
  </div>

</div>

2) Replace float: left; with display:inline block

#bg_01,#bg_02,#bg_03,#bg_04,#bg_05 {
  display: inline-block;
  float: left;<--------Remove
  More code...
}

3) Include CSS for .center:

.center {
  text-align: center;
  }

Full Code :

p {
  margin: 0;
}

#page {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: 200px;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

#bg_01 {
  background-color: #80b3ff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
  display: inline-block;

}

#bg_02 {
  background-color: #afe9af;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
display: inline-block;
}

#bg_03 {
  background-color: #ffb380;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
display: inline-block;
}

#bg_04 {
  background-color: #ffaaaa;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
display: inline-block;
}

#bg_05 {
  background-color: #eeaaff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
display: inline-block;
}
.center {
  text-align: center;
  }
<div id="page">
  <div id="pageName">
    <p>Colour</p>
  </div>
  <div class="center">
    <div id="bg_01">
    </div>
    <div id="bg_02">
    </div>
    <div id="bg_03">
    </div>
    <div id="bg_04">
    </div>
    <div id="bg_05">
    </div>
  </div>
</div>

Answer №4

p {
  margin: 0;
}

#page {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: auto;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}
#page:after {
  content: '';
  display: table;
  clear: both;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}
.item {
  display: inline-block;
}
#bg_01 {
  background-color: #80b3ff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_02 {
  background-color: #afe9af;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_03 {
  background-color: #ffb380;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_04 {
  background-color: #ffaaaa;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}

#bg_05 {
  background-color: #eeaaff;
  width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 4%;
}
<div id="page">
  <div id="pageName" }>
    <p>Color</p>
  </div>
  <div id="bg_01" class="item">
  </div>

  <div id="bg_02" class="item">
  </div>

  <div id="bg_03" class="item">
  </div>

  <div id="bg_04" class="item">
  </div>

  <div id="bg_05" class="item">
  </div>
</div>

Answer №5

p {
  margin: 0;
}

#page {
  border: 2px solid #e1dfe1;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  height: 200px;
  margin-top: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#pageName {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
}

#pageName p {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: #565656;
  font-weight: bold;
}

.center_div{
text-align:center;
margin:20px auto;
display:flex;
justify-content:center;
align-items:center;
}

.common_div{
width: 80px;
  height: 80px;
  border: 3px solid #666;
  border-radius: 20px;
  margin: 3%;
  display:inline-block;
}

#bg_01 {
  background-color: #80b3ff;
  
}

#bg_02 {
  background-color: #afe9af;
  
}

#bg_03 {
  background-color: #ffb380;
  
}

#bg_04 {
  background-color: #ffaaaa;
  
}

#bg_05 {
  background-color: #eeaaff;
  
}
<div id="page">
  <div id="pageName" >
    <p>Color</p>
  </div>
  <div class="center_div">
  <div id="bg_01" class="common_div">
  </div>

  <div id="bg_02" class="common_div">
  </div>

  <div id="bg_03" class="common_div">
  </div>

  <div id="bg_04" class="common_div">
  </div>

  <div id="bg_05" class="common_div">
  </div>
  </div>
  
</div>

Does this meet your requirements?

I hope this information proves helpful.

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

Access all areas with unlimited password possibilities on our sign-in page

I have set up a xamp-based web server and installed an attendance system. I have 10 users registered to log in individually and enter their attendance. However, the issue is that on the login page, any password entered is accepted without showing an error ...

javascriptphphtml

Dynamic Loading of CSS Styles

My style-sheet is saved in this unique location: /opt/lampp/htdocs/project/core/styles/Style.css To load the CSS file using the full directory, considering that the files utilizing it are situated here: /opt/lampp/htdocs/project/client/ The ultimate ob ...

javascriptphpjqueryhtmlcss

I am attempting to retrieve the value of a 'td' element using jQuery, but it consistently returns 'null'

My task involves extracting the value of a specific cell within a table to filter out unwanted rows. However, every time I attempt to retrieve the value of that cell, it consistently returns null or nothing at all. Despite referencing various sources and s ...

jqueryhtmlasp.net-mvc

Show the attribute of an element in a pop-up window

I have a modal from ngx-bootstrap that I want to display in there a property of my object let's say the name: public students = [ { id: 1, name: 'lorem'} In this button that is common for all entries in the table (each row has this butt ...

htmlangulartypescript

"Enhance your website with a unique Bootstrap 5 carousel featuring multiple

As a beginner in Bootstrap, I am currently working on an ecommerce template to learn about Bootstrap 5. I am interested in creating a carousel that displays multiple slides at once, like a products slider with left and right arrows. Is this possible in Bo ...

javascriptcsstwitter-bootstrapcarouselbootstrap-5

The jQuery datepicker fails to function properly on an HTML element that has been added via AJAX

In the page header, I have a jQuery datepicker function bound to the "birthday" input HTML element: <script type="text/javascript"> $(function() { $( "#birthday" ).datepicker(); }); </script> After that, some AJAX functionali ...

htmlajaxjquery

Printing the contents of a datatable in HTML can be achieved in VB.NET by including headers and setting paper orientation, fit to page, and grand total for print preview and direct print

I'm attempting to print the contents of a datatable in HTML for print preview and direct printing, including headers, setting paper size, orientation, and fitting to page in VB.NET. While it may be easy to accomplish this using an rdlc report, I am u ...

htmlvb.netprintingdatatablereporting

In the Twitter Bootstrap documentation, which element is utilized for the sidebar?

I'm curious about the most efficient method for creating a sidebar like this using Bootstrap 4. https://i.sstatic.net/3eKwN.png From what I can see, it appears to be a custom component designed specifically for the documentation page, rather than ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

"Switching a div's visibility when a link is clicked

http://jsfiddle.net/FsCHJ/2/ Currently, when I add another link, it automatically uses the same functionality as the toggle button. What I want is for "Toggle Edit Mode" to toggle a hidden div on and off. I attempted to modify the code from $("a").click(f ...

javascriptjqueryhtmlcss

How can I ensure the dialog title and button are centered, and how can I center a JQuery dialog box after the browser has

My current issue involves creating a dialog with centered text, but I'm struggling to achieve the same effect with the title and button. Additionally, the button I've created doesn't seem to be functional when placed in the dialog box. Despi ...

jqueryhtmlcss

Finding the data type based on the button clicked with javascript: A beginner's guide

I am trying to work with a PHP function that generates dynamically created divisions. Each of these divisions contains a different data type and a button. How can I extract the data type of a division when the user clicks on the submit button using JavaScr ...

javascriptphpjqueryhtmlajax

Element Style Does Not Align with Computed Z-Index

Currently, I am in the process of developing an HTML5 video player. However, I have encountered a problem where my custom controls become unclickable once the video element is set to fullscreen mode. This issue arises because the video's z-index is se ...

htmlcsshtml5-video

Modify the width of the progress bar in Bootstrap using AngularJS

I'm new to AngularJS and I'm attempting to dynamically update the width of a progress bar based on changes in my controller. Here is what I currently have: <span id="percentage">$ {{getTotal()}} ({{getPercentage()}}%)</span> <div ...

javascripthtmlcssangularjstwitter-bootstrap

What is an alternative method for creating a horizontal line without the need for the <hr> tag?

Is there a way to create a slim horizontal line without using the <hr> tag ? This is what I attempted: .horizontal-line{ border-top: 1px solid #9E9E9E; border-bottom: 1px solid #9E9E9E; } While it does function, I am hoping for a thinner line. ...

javascripthtmlcsstagsvisual-web-developer-2010

Central alignment of div with cursor

I'm experimenting with creating a unique custom cursor using a <div> that trails the movement of the mouse pointer. While the current setup works smoothly, I've noticed that when scrolling down the page, the div lags behind until the scrol ...

javascriptjquerycsscursor

Navigating to a particular div using a click event

I am trying to achieve a scrolling effect on my webpage by clicking a button that will target a specific div with the class "second". Currently, I have implemented this functionality using jQuery but I am curious about how to accomplish the same task using ...

javascriptjqueryhtmlcssscroll

When designing responsive websites in Bootstrap 4, what is the preferred choice between using the class "container" or "container-fluid"?

When creating responsive designs, which is more effective to use - the .container class or the .container-fluid class? ...

htmlcssresponsive-designbootstrap-4

Loss of styling is observed with jQuery's html() function

Here is the HTML code I am working with: <div class="myList"> <select> <option value="1">Item1</option> <option value="2">Item2</option> </select> </div> Everything looks great in terms of CS ...

htmlcssajax

Designing dynamic SVG elements that maintain uniform stroke widths and rounded edges

I'm currently tackling a project that involves creating SVG shapes with strokes that adjust responsively to the size of their parent container. My aim is for these shapes to consistently fill the width and height of the parent container, and I intend ...

javascripthtmlcsssvgfrontend

"Click here to access the downloadable content obtained through web scraping

I am looking to automate a task using Python where I need to get a PDF file from a website with fileid 8426 and date 03312021. Visit this link: Click on the "Download PDF" button Save the downloaded file to a directory After exploring, I came across a P ...

javascriptpythonhtmlpython-requestsweb-crawler