CODEWITHSUNDEEP
htmlcss
bchards
bchards

Reputation: 401

Section is always off the screen at 100% width

I am having some trouble with sections on a web page. My first section is floated left and the section below I am having trouble with. I have tried clearing the second section which causes the placement of it to be behind the one above. If I then use float, the sections placement works however its width is thrown off.

Image of section when cleared: enter image description here Image of section when floated: enter image description here

/* Section who */

section {
  background-color: white;
}

#who {
  padding: 30px 30px 30px 45px;
  float: left;
  clear: both;
}

#who h1 {
  text-align: center;
}

#who .sub_section {
}

#who #summary {
  float: left;
  width: 60%;
}

#who #skills {
  float: right;
  text-align: center;
  width: 40%;
}

#who #skills .skill span {
  content: '';
  display: inline-block;
  height: 11px;
  width: 11px; 
  margin-right: 8px;
  margin-top: 0;
  border-radius: 50%;
}

#who #skills .skill p {
  margin: 0;
  font-weight: bold;
}

#who #skills .skill .active-skill {
  background-color: #3C7ABE;
}

#who #skills .skill .empty-skill {
  background-color: lightgrey;
}
/* End of section who */

/* Section Work */

#work {
  background-color: #3C7ABE;
  margin-top: 50px;
  padding: 30px;
  clear: all;
  display: block;
  float: right;
  width: 100%;
}

#work h1 {
  text-align: center;
  clear: all;
}


/* End of section work */
  <section id="who">
    <div class="sub_section" id="summary">
      <div class="content">
      </div>
    </div>
    <div class="sub_section" id="skills">
      <div class="content">
      </div>
    </div>
  </section>

  <section id="work">
    <div class="work_item">
      <img src="http://placehold.it/350x150">
    </div>
  </section>

I have tried to minimise the amount of code I am showing you by taking out the content in the HTML and just giving the div arrangement. All of the CSS for both sections and their contents is above. If any other info is needed just let me know, but I think that should be good enough.

Thanks

Upvotes: 0

Views: 74

Answers (2)

Banzay
Banzay

Reputation: 9470

I think you need to set box-sizing: border-box; for both of sections

section {
  background-color: white;
}

#who {
  padding: 30px 30px 30px 45px;
  float: left;
  width: 100%;
  box-sizing: border-box;
}

#who h1 {
  text-align: center;
}

#who .sub_section {
}

#who #summary {
  float: left;
  width: 60%;
}

#who #skills {
  float: right;
  text-align: center;
  width: 40%;
}

#who #skills .skill span {
  content: '';
  display: inline-block;
  height: 11px;
  width: 11px; 
  margin-right: 8px;
  margin-top: 0;
  border-radius: 50%;
}

#who #skills .skill p {
  margin: 0;
  font-weight: bold;
}

#who #skills .skill .active-skill {
  background-color: #3C7ABE;
}

#who #skills .skill .empty-skill {
  background-color: lightgrey;
}
/* End of section who */

/* Section Work */

#work {
  background-color: #3C7ABE;
  margin-top: 50px;
  padding: 30px;
  clear: all;
  display: block;
  float: right;
  width: 100%;
  box-sizing: border-box;
}

#work h1 {
  text-align: center;
  clear: all;
}
<section id="who">
    <div class="sub_section" id="summary">
      <div class="content">section1
      </div>
    </div>
    <div class="sub_section" id="skills">
      <div class="content">
      </div>
    </div>
  </section>

  <section id="work">
    <div class="work_item">
      <img src="http://placehold.it/350x150">
    </div>
  </section>

Upvotes: 1

TobiasFeld
TobiasFeld

Reputation: 61

What exactly do you want to achieve? If you add both "float: left" its not missplaced on the left side. You should give the #work div box-sizing: border-box that you don't have an element 100% width + paddings.

/* Section who */

section {
  background-color: white;
}

#who {
  padding: 30px 30px 30px 45px;
  float: left;
  clear: both;
}

#who h1 {
  text-align: center;
}

#who .sub_section {
}

#who #summary {
  float: left;
  width: 60%;
}

#who #skills {
  float: right;
  text-align: center;
  width: 40%;
}

#who #skills .skill span {
  content: '';
  display: inline-block;
  height: 11px;
  width: 11px; 
  margin-right: 8px;
  margin-top: 0;
  border-radius: 50%;
}

#who #skills .skill p {
  margin: 0;
  font-weight: bold;
}

#who #skills .skill .active-skill {
  background-color: #3C7ABE;
}

#who #skills .skill .empty-skill {
  background-color: lightgrey;
}
/* End of section who */

/* Section Work */

#work {
  background-color: #3C7ABE;
  margin-top: 50px;
  padding: 30px;
  display: block;
  float: left;
  width: 100%;
  box-sizing: border-box;
}

#work h1 {
  text-align: center;
  clear: both;
}


/* End of section work */
 <section id="who">
    <div class="sub_section" id="summary">
      <div class="content">
      </div>
    </div>
    <div class="sub_section" id="skills">
      <div class="content">
      </div>
    </div>
  </section>

  <section id="work">
    <div class="work_item">
      <img src="http://placehold.it/350x150">
    </div>
  </section>

See on this fiddle: https://jsfiddle.net/czoyLet5/

Maybe it helps you

Upvotes: 1

Related Questions