CODEWITHSUNDEEP
csshtml
Michael Bruce
Michael Bruce

Reputation: 11347

Margin does not seem to work on all sides. Why?

I am trying to do a photoshop-like menu that I saw in a photoshop tutorial. I just want to use css though.

In #main-box-container this is not responding on all sides.

margin: 0 10px 0 10px;

With float:left margin works on left but NOT right. With float right, margin works on right but NOT left. I tried clear:both and margin works on left only. I do not want to use a padding on the #container if I do not have to.

My point is to keep the page fluid as it gets smaller than 920px. What am I missing here?

here is my work

#container {
  max-width: 920px;
  height: 370px;
  background-color: #4a4a4a;
  margin: 0px auto;
}
#purchase-box-container {
  width: 250px;
  height: 50px;
  background-color: #fff;
  float: right;
  margin: 10px 10px 0px 0px;
  border-radius: 10px 10px 0 0;
}
#main-box-container {
  width: 100%;
  height: 200px;
  background-color: #fff;
  clear: both;
  /* counld not figure */
  margin: 0 100px 0 10px;
  border-radius: 10px 0px 10px 0;
}
#search-box-container {
  width: 275px;
  height: 50px;
  background-color: #fff;
  float: left;
  margin: 0 0 0 10px;
  border-radius: 0px 0px 10px 10px;
}
<div id=container>
  <div id="purchase-box-container">
    <div id="purchase-box"></div>
  </div>
  <div id="main-box-container">
    <div id="main-box"></div>
  </div>
  <div id="search-box-container">
    <div id="search-box"></div>
  </div>
</div>

Upvotes: 0

Views: 146

Answers (1)

user4639281
user4639281

Reputation:

You remove your margins and add padding to the container. margins are not calculated into widths so if you set width 100% it will be 100% width of the container plus margins.

(Demo)

#container {
  padding: 0px 10px 0px 10px;
  max-width: 920px;
  height: 370px;
  background-color: #4a4a4a;
  margin: 0px auto;
}
#purchase-box-container {
  width: 250px;
  height: 50px;
  background-color: #fff;
  float: right;
  border-radius: 10px 10px 0 0;
}
#main-box-container {
  width: 100%;
  height: 200px;
  background-color: rgb(50, 150, 250);
  clear: both;
  /* counld not figure */
  border-radius: 10px 0px 10px 0;
}
#search-box-container {
  width: 275px;
  height: 50px;
  background-color: #fff;
  float: left;
  border-radius: 0px 0px 10px 10px;
}
<div id="container">
  <div id="purchase-box-container">
    <div id="purchase-box"></div>
  </div>
  <div id="main-box-container">
    <div id="main-box"></div>
  </div>
  <div id="search-box-container">
    <div id="search-box"></div>
  </div>
</div>

Upvotes: 1

Related Questions