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

Question

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:

Occupied much width as possible inside 'outsideDiv' (the green div).
Be centered inside 'outsideDiv' (again, the green div).
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:

I don't want to change the width of the 'shortItem' items (the white ones).
Here is an image that shows the problem that I'm trying to solve:

https://ibb.co/jDz92a

Please share relevant code directly on Stack Overflow. Take a look here https://stackoverflow.com/help/how-to-ask — vlk, May 21 '17 at 20:36
Sorry vlk but it doesn't let me copy the code it says that it's too long, and to see the problem you need the whole code not just part of it. — Robert Smith, May 21 '17 at 20:50

score 0 · Answer 1 · edited May 22 '17 at 04:02

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:

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

Hi, thanks for helping but no it's not what I wanted, try to play with the width of the display section (you can hold the border between the code section and the result section with your mouse and change the width) and you will see that the gap on the left side (the small yellow gap between the most left white item and the left edge of the yellow div) is not the same as the gap on the right side... — Robert Smith, May 21 '17 at 20:55

leoc1f3r · Answer 2 · 2017-05-21T23:41:23.177

0

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;
}

edited May 21 '17 at 23:41

answered May 21 '17 at 20:55

leoc1f3r

55
9

Sorry but it's not working, see the image here that explains what is the problem: https://ibb.co/jDz92a – Robert Smith May 21 '17 at 21:05
leoc1f3r, yes now the gap is the same on both sides... but I didn't want to change the width of the 'shortItem' items (the white ones) , sorry maybe I had to point that out in my original question. – Robert Smith May 21 '17 at 23:30
Can you please update your question and elaborate on what you want to achieve? Thanks. P.S. I've updated the code according to what I understood from your recent comment – leoc1f3r May 21 '17 at 23:37
leoc1f3r, I updated my question (see the update section at the bottom of the question). You said that you updated your code, where can I see it? can you please give me a link to the new code? – Robert Smith May 22 '17 at 00:02
I checked your code... again my mistake that I didn't clarified that, but I want that the gap between the white pieces ("shortItem") will be fixed (for example 20px) and will not be change, and the same thing for the gaps on the left and the right sides. I also want that this white divs will be align to the left, or to the right, I don't want them to be centered. Is it possible to change your code to achieve this? – Robert Smith May 22 '17 at 15:49
@RobertSmith I am not able to understand what you want to achieve. Maybe you can show me a diagram of what you want. – leoc1f3r May 23 '17 at 08:26
OK, I uploaded a new image diagram... check it and tell me if it's clearer: https://ibb.co/jzc0Av – Robert Smith May 23 '17 at 19:32
As much as I understood, I could make this out @RobertSmith https://jsfiddle.net/leoc1f3r/97au0mo8/ – leoc1f3r May 24 '17 at 12:08
Sorry but it's still not working, in your last example the gaps on the right and on the left are not equal, and it's not 20px as I asked... check this print-screen that I took after running your code: https://ibb.co/g7xR0v – Robert Smith May 24 '17 at 18:45

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

2 Answers2

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