CODEWITHSUNDEEP
htmlcssalignment
Youstay Igo
Youstay Igo

Reputation: 311

divs' horizontal alignment erratic in container div

I want to have 4 divs aligned horizontally in a parent div. The parent div has width:100%;

All child divs have width:20%; I want the remaining 20% to be empty space, distributed evenly between them (around 7% between every two divs).

I have tried this code:

<div id="header" style="position:absolute; width:90%; border:2px solid black;">
    <div id="h_left" style="left:0; border:1px dotted black; width:20%;"> Left side material </div>
    <div id="h_center1" style="margin:auto; border:1px dotted black; width:20%;"> Center 1 material </div>
    <div id="h_center2" style="margin:auto; border:1px dotted black; width:20%;"> Center 2 material </div>
    <div id="h_right" style="right:0; border:1px dotted black; width:20%;"> Right side material </div>
</div>

But this produces a very disappointing result: enter image description here

How can I improve my code so that all divs are aligned accordingly with equal space between them?

Upvotes: 0

Views: 37

Answers (4)

Manjuboyz
Manjuboyz

Reputation: 7064

Make it simple use flex and make content justify-between it will align the space exactly same between buttons:

  1. flex
  2. Justity-between

You can also try using justify-around property, if you go through the above links which will help you what to choose for your requirement.

#header {
  border: 1px solid black;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#h_left {
  border: 1px dotted black;
  width: 20%;
}

#h_center1 {
  border: 1px dotted black;
  width: 20%;
}

#h_center2 {
  border: 1px dotted black;
  width: 20%;
}

#h_right {
  border: 1px dotted black;
  width: 20%;
}
<div id="header">
  <div id="h_left"> Left side material </div>
  <div id="h_center1"> Center 1 material </div>
  <div id="h_center2"> Center 2 material </div>
  <div id="h_right"> Right side material </div>
</div>

Upvotes: 2

ariel
ariel

Reputation: 16150

Use justify-content: space-between:

#header {
  width: 100%;
  border: 2px solid black;
  justify-content: space-between;
  display: flex;
}

#header > div {
  width: 20%;
  border: 1px dotted black;
}
<div id="header">
  <div id="h_left"> Left side material </div>
  <div id="h_center1"> Center 1 material </div>
  <div id="h_center2"> Center 2 material </div>
  <div id="h_right"> Right side material </div>
</div>

Upvotes: 1

Diesel
Diesel

Reputation: 5345

Divs are a display block by standard. This means that each one will be on its own line. I recommend doing a 1 hour free starter course on CSS that will help you with all these assumptions.

You can do what you want to style this, there are many options. But I recommend flex box. Flex box and Grid will be your friends in CSS. Here is a simple guide I still reference.

    <div
      style="display: flex; justify-content: space-between; position:absolute; width:90%; border:2px solid black;"
    >
      <div id="h_left">Left side material</div>
      <div id="h_center1">Center 1 material</div>
      <div id="h_center2">Center 2 material</div>
      <div id="h_right">Right side material</div>
    </div>

here is a CodeSandbox that shows it

Upvotes: 1

Shawn Xiao
Shawn Xiao

Reputation: 590

You can try this:

<div id="header" style="position:absolute; width:90%; border:2px solid black;">
    <div id="h_left" style="left:0; border:1px dotted black; width:20%; float: left;"> Left side material </div>
    <div id="h_center1" style="margin-left:6.6%; border:1px dotted black; width:20%; float: left;"> Center 1 material </div>
    <div id="h_center2" style="margin-left:6.6%; border:1px dotted black; width:20%; float: left;"> Center 2 material </div>
    <div id="h_right" style="right:0; border:1px dotted black; width:20%; float: right;"> Right side material </div>
</div>

Upvotes: 1

Related Questions