CODEWITHSUNDEEP
htmlcss
hannahbalector
hannahbalector

Reputation: 29

my divs do not seem to be nesting properly

See code below and this fiddle: http://jsfiddle.net/u42mnobz/

My divs do not seem to be nesting properly. I am trying to change the margins on the divs contained within the sections: sell_section, service_types_questions, etc. However, the divs within this div (for example, box1) don't reflect the changes when I try to edit the margins, padding, etc.

Ideas?

<head>
<title>Lavu Explore</title>
<link rel="stylesheet" type="text/css" href="stylesheet1.css">
</head>
<body>
<div id="header">
  <div id="sub_nav">
    <ul>
      <li>Overview</li>
      <li>Payments</li>
      <li>Hardware</li>
      <li>Testimonials</li>
      <li>Contact</li>
    </ul>
  </div>
</div>
<div id="sell_section">
  <h2>Sell, Manage, & Market in one easy system</h2>
  <hr class="hr_1">
    <div class="box1">
      <img id ="terminal_img" src="http://i.imgur.com/D5T6lY1.png">
    </div>
    <div class="box1">
      <p style="text-align:left">Choosing a new Point of Sale (POS) is an opportunity. Lavu is not just accepting payments - Lavu is business management on the iPad. Upgrade your business with the Cloud POS system that was developed specifically for the restaurant / hospitality industry. Lavu has the tools you need to improve efficiency and the bottom line. Love your business.
      <ul>
        <li>CLOUD DATA ACCESS</li>
        <li>TOUCHSCREEN INTERFACE</li>
        <li>WIRELESS COMMUNICATION</li>
      </ul>
  </div>
</div>
<hr class="hr_2">
<div id="service_types_section">
  <h4>Best restaurant point of sale for any service type</h4>
  <p>Quick serve, bars, nightclubs, food trucks, coffee shops, pizzerias, and more...</p>
  <div class="container">
    <div class="box b1"><img id="table_layout" src="http://i.imgur.com/UvA8BRX.png"><p>TABLE LAYOUT</p></div>
    <div class="box b2"><img src="http://i.imgur.com/T4Ra30G.png"><p>OPEN TAB LAYOUT</p></div>
    <div class="box b3"><img src="http://i.imgur.com/kWTOzJl.png"><p>QUICK SERVE</p></div>  
  </div>
</div> 
<hr class="hr_2">
<div id="fresh_tech_section">
  <div class="box1">
    <h4>Fresh Technology</h4>
    <hr class=hr_1 style="float:left; width:70%">
      <br>
    <p>Taking advantage of Apple's reliable technologies, Lavu POS operates on iPads, iPods, and iPhones. The clean, intuitive interface is easy to learn, yet includes the specific industry features that ensure that restaurant operations run smoothly every shift</p></td>
  </div>
  <div class="box1">
    <img id="fresh_tech_img" src="http://i.imgur.com/mC7XsaX.png">
  </div>
</div>
<hr class="hr_2">
<div id="Front_of_House_solutions">
  <div class="box1">
    <img src="http://i.imgur.com/HrhfIL1.png">
  </div>
  <div class="box1" style="">
    <h4>Front of House Solutions</h4>
    <hr class="hr_1" style="float:left" >
    <br>
      <p style="margin:1%">Split checks</p>
      <p style="margin:1%">Scheduled discounts</p>
      <p style="margin:1%">Multiple payment options</p>
      <p style="margin:1%">Order transfers</p>
      <p style="margin:1%">Menu item modifiers</p>
      <p style="margin:1%">Photos & descriptors</p>
  </div>   
</div>
<hr class="hr_2">
<div id="Back_of_House_section">
  <h4>Back of House Customization</h4>
  <hr class="hr_1">
  <img src="http://i.imgur.com/UVtKujY.png">
</div>
<div id="Payments_section">
  <h4>Payments</h4>
  <p>Lavu makes accepting payments simple. With dozens of integrated processing providers we ensure your business is positioned to get the best possible rates at every stage of your business</p>
</div>


body {
margin: auto;
position: relative;
overflow: auto;
padding: 0 5%;
max-width: 990px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

h2 {
text-align: center;
font-family: DIN;
font-size: 40px;
color: #8b8b8b;
text-align: center;
width: 100%;
font-weight: normal;
}

h4 {
font-family: din;
font-weight: normal;
font-size: 30px;
color: #8b8b8b;
padding: 2% 0;
margin: 0;
}

p {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #8b8b8b;
font-size: 16px;
line-height: 150%;
}

.hr_1 {
position: relative;
padding: 0;
margin: 2% auto;
height: 0;
width: 400px;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aecd37;
border-bottom: 1px solid #aecd37;
}

.hr_2 {
display: block;
position: relative;
padding: 0;
margin: 2% 0;
width: 800px;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #f4f4f4;
border-bottom: 1px solid #f4f4f4;
}

.box1 {
width: 50%;
min-width: 50%;
position: relative;
min-height: 1px;
}

#terminal_img {
padding: 5%
}
@media (min-width: 830px) {
.box1 {
float: left;
 }
}
@media (max-width: 830px) {
.box1 {
width: 100%;
 }
}

.container {
padding-top: 2%;
width: 100%;
overflow: hidden;
text-align: ;
}
.box {
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
text-align: ;
}

#service_types_section {
text-align: center;
}

#fresh_tech_section {
margin: 2% 0;
}

#Front_of_House_solutions {
margin: 2% 0;
}

#Back_of_House_section {
text-align: center;
margin: 2% 0;
}

ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 30px;
font-family: din;
font-weight: bold;
color: #8b8b8b;

}

Upvotes: 1

Views: 133

Answers (2)

ngstschr
ngstschr

Reputation: 2319

Your html isn't well formatted.

  • the paragraph tag <p style="text-align:left">Choosing a new Point of Sale doesn't have a closing tag
  • the paragraph tag <p>Taking advantage has a </td> at the end
  • none of your <img> tags has a closing '/'
  • add a closing <body> and <html> tag

Try to fix this first and see if it solves some of your problems.

Upvotes: 0

apprenticeDev
apprenticeDev

Reputation: 8059

Much like in your other question - https://stackoverflow.com/a/27410448/1592915 - I think you're confusing <hr> tags for something they are not. They provide a horizontal like this:

They don't wrap anything, so you would want to style the classes of actual wrapping divs (e.g. <div id="service_types_section">... would be addressed as #service_types_section { ... } in css).

Also you can address .box1 that's inside different divs by increasing specificity, e.g.

#service_types_section .box1 {
  ...
  some css rules
  ...
}

#fresh_tech_section .box1 {
  ...
  some other css rules
  ...
}

Here's a good article to get familiarized with specificity.

Upvotes: 1

Related Questions