CODEWITHSUNDEEP
htmlcsswidthcenteradjustment
Robert Smith
Robert Smith

Reputation: 1

How can I center a <div> while adjusting its width to the content size?

Please see my code here:

https://www.w3schools.com/code/tryit.asp?filename=FFTMB6LPPZZ5

(You need to click the 'Run' button to see the result)

What I want to achieve is that the 'insideDiv' (the yellow div) will:

  1. Occupied much width as possible inside 'outsideDiv' (the green div).

  2. Be centered inside 'outsideDiv' (again, the green div).

  3. I want that the gap/space between the most left 'shortItem' (the white item) and the left border of the 'insideDiv' (the yellow div), will be EXACTLY (for example 20px) as the gap/space between the most right 'shortItem' and the right border of the 'insideDiv' (again, the yellow div).

How can I achieve that? if you will run my code and play with the width of the display section you will see that it's not keeping the same space on the right and on the left.

If you want you can change my example, save it using the icon on the top left near the 'Home' icon, and give here a link to the fixed code.

Hope you can help me with that, thanks!

My Code:

.outsideDiv {
  background-color: green;
  margin: auto;
  width: 50%;
  border: 1px solid black;
  text-align: center;
  padding: 20px;
  }

.insideDiv {
  background-color: yellow;
  margin: 10px;
  display: inline-block;
  border: 1px solid black;
  }

.shortItem {
  background-color: white;
  display: block;
  color: black;
  text-align: center;
  padding: 7px 17px;
  text-decoration: none;
  float: right;
  margin: 10px;
  border: 1px solid black;
  height: 30px;
  width: 120px;
  }
<div class="outsideDiv">
  <div class="insideDiv">
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
  </div>
</div>

Update:

  1. I don't want to change the width of the 'shortItem' items (the white ones).

  2. Here is an image that shows the problem that I'm trying to solve:

https://ibb.co/jDz92a

Upvotes: 0

Views: 383

Answers (2)

Tom_B
Tom_B

Reputation: 327

I have edited your code, which you can see here:

<!DOCTYPE html>
<html>
<head>
<style>
.outsideDiv {
  background-color: green;
  margin: auto;
  width: 50%;
  border: 1px solid black;
  text-align: center;
  padding: 20px;
  }

.insideDiv {
  background-color: yellow;
  margin:0 auto;
  width:100%;
  display: block;
  border: 1px solid black;
  }

.shortItem {
  background-color: white;
  display: block;
  color: black;
  text-align: center;
  padding: 7px 17px;
  text-decoration: none;
  float: right;
  margin: 10px;
  border: 1px solid black;
  height: 30px;
  width: 120px;
  }
.clear {
    clear:both;
}
</style>
</head>

<body>
<div class="outsideDiv">
  <div class="insideDiv">
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="clear"></div> 
  </div>
</div>
</body>
</html>

Is that what you were looking for?

Key edits made:

  1. Clear the floating elements inside the innerDiv
  2. Use margin:0 auto to center the innerDiv

Upvotes: 0

leoc1f3r
leoc1f3r

Reputation: 55

Here is a fiddle I created using your code. Kindly check if this is what you need

.outsideDiv {
  background-color: green;
  margin: auto;
  width: 50%;
  border: 1px solid black;
  text-align: center;
  padding: 5%;
}

.insideDiv {
  background-color: yellow;
  margin: 1%;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border: 1px solid black;
  width: auto;
}

.shortItem {
  background-color: white;
  display: block;
  color: black;
  text-align: center;
  text-decoration: none;
  float: right;
  margin: 10px;
  padding: 10px 20px;
  border: 1px solid black;
  height: 30px;
  width: 100%;
  max-width: 120px;
}

Upvotes: 0

Related Questions