CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dick Thompson
Dick Thompson

Reputation: 609

CSS Adjusting Element Widths (Having trouble)

I'm trying to create a simple calculator and am having trouble formatting the different element boxes. I basically just need to have the items in the left column (serving, first food, second food) be in the left part of the middle of the page, and the comparison be on the right part of the middle of the page. I'm trying to adjust the margins, but it keeps messing with my elements. I'm relatively new to this, so I'm not sure if I'm doing something wrong.

My code:

  .side {
  margin: 30%;
  border: 3px solid #73AD21; 
  position: relative;
  width: 33%;  
}
.sideone {
  margin: 20%;
  border: 3px solid #73AD21;
  position:relative;
  width: 33%;
}
.comparison {
  position:relative;
  margin-left: 30%;
}
.outer {
  display: flex;
}
.color-red{
color:red;
background:transparent}
.color-green{
color:green;
background:transparent}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <meta name="viewport" content="width=10px, initial-scale=1.0">
</head>

<body>

  <label>
    Servings:
    <input type="number" id="numberOfStocks" value="1" min="0" />
  </label>
<div class="outer">
  <div>
    <div class="side">
      <h2>First Item<span class="servingUnit"></span>:</h2>
      <select class="selectStock">
        <option value="-1">Pick a food!</option>
      </select>
      <br>
      <br>
    </div>
    <div class="sideone">
      <h2>Second Item<span class="servingUnit"></span>:</h2>
      <select class="selectStock">
        <option value="-1">Pick a food!</option>
      </select>
      <br>
      <br>

    </div>
  </div>
  <div class="comparison">
    <h2>Comparison:</h2>
    <br>
    <br>
    <div class="result"></div>
  </div>
</div>
  
</body>

Actual functionality isn't working on the snippet, but it's not really relevant to the question. Thanks for the help!

Upvotes: 0

Views: 53

Answers (2)

l0ul0u
l0ul0u

Reputation: 101

Is this what you are trying to do? (https://jsfiddle.net/l0ul0u/sohpntvp/)

.side, .sideone {
    border: 3px solid #73AD21; 
}
h2{
    display: inline-block;
}
.outer {
    display: flex;
}
.color-red{
    color:red;
    background:transparent}
.color-green{
    color:green;
    background:transparent}

Upvotes: 1

Claudio Djohnnatha
Claudio Djohnnatha

Reputation: 291

It's happening because you are setting just div element. Take a look in others elements inside it, you can solve hidden them inside div using the overflow element like:

overflow: hidden;

for example: 

.side {
  margin: 30%;
  border: 3px solid #73AD21; 
  width: 10%;
  position: relative;
  overflow: hidden; 
}
<div class="side">
      <h2>First Item<span class="servingUnit"></span>:</h2>
      <select class="selectStock">
        <option value="-1">Pick a food!</option>
      </select>
      <br>
      <br>
    </div>

But this way will hide them. You could solve it also setting the size of elements which are inside of div, I think that could be better for your proposal.

Upvotes: 1

Related Questions