• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 93
  • Last Modified:

Why padding for <div> cause change the div height?

Hello;

I try padding (padding-top: 40px;) for <div class="left"> for putting logo at the middle but the height of this div expand,please let me know that how can solve it?
thanks

HTML
<!doctype html>
<html lang="fa">
<head>
<meta charset="utf-8">
<title>homepage</title>
<link  href="css/home-stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <header class="header-container">
   <div class="header-area">
   </div>
   <div class="logo-ads">
   <div class="left">
   Left for logo  <!-- Set Div As your requirement -->
   </div>
   <div  class="right">
   Right for ads<!-- Set Div As your requirement -->
    </div>
  </div>
 </header><!-- end of header -->
</body>
</html>

Open in new window


CSS
@charset "utf-8";
/* CSS Document */
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
    }


/*header elements*/
.header-container{
	width:100%;
}
.header-area{
	height:35px;
    width: 100%;
    background-color: #bb0700;
	padding-right: 0px;
   
    }
.logo-ads{
	height: 110px;
	width: 1000px;
	background-color: #CFD1A9;
	padding-right: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	z-index: 0;
	}
	.left{
	float: left;
	height: 110px;
	width: 30%;
	background-color: #F9F9E4;
	padding-top: auto;
	padding-right: auto;
	padding-bottom: auto;
	padding-left: auto;
	}
	.right
	{
		float:right; width:70%;
		height: 110px;
	}

Open in new window

0
MOSTAGHASSI
Asked:
MOSTAGHASSI
2 Solutions
 
Snarf0001Commented:
Padding by default adds height to the container.  If you want it the other way, add:

box-sizing: border-box

To the style.
0
 
MOSTAGHASSIAuthor Commented:
Yes, it works,but there are 2 things :
1-I saw on some sources that all browsers don't support it.

2-In addition i work in Dreamweaver and after adding your code  everything in rest of page layout  change so i can't see where is the right in position of course in browser its ok .

So , i send the codes of page layout that you see why it happen.

HTML OF PAGE LAYOUT
<!doctype html>
<html lang="fa">
<head>
<meta charset="utf-8">
<title>homepage</title>
<link  href="css/home-stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <header class="header-container">
   <div class="header-area">
   </div>
   <div class="logo-ads">
   
   <div class="left">
   Left for logo  <!-- Set Div As your requirement -->
   </div>
  
   <div  class="right">Right for ads<!-- Set Div As your requirement -->
   
  </div>
  </div>
 </header><!-- end of header -->
 <div class="navigation">
 navigation
 </div><!-- end of nav -->
 
 <div class="main">
 main content
 </div><!-- end of main -->
 <div class="footer-container">
   <div class="footer-end">
   footer
   </div>
    </div><!-- end of footer -->
</body>
</html>

Open in new window


CSS
@charset "utf-8";
/* CSS Document */
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
    }


/*header elements*/
.header-container{
	width:100%;
}
.header-area{
	height:35px;
    width: 100%;
    background-color: #bb0700;
	padding-right: 0px;
   
    }
.logo-ads{
	height: 110px;
	width: 1000px;
	background-color: #CFD1A9;
	padding-right: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	z-index: 0;
	}
	
	.left{
	float: left;
	height: 110px;
	width: 30%;
	background-color: #F9F9E4;
	padding-right: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	box-sizing: border-box;
	}
	.right
	{
		float:right; width:70%;
		height: 110px;
	}	
	   .navigation{
	height: 35px;
    width: 1000px;
    background-color: #2A2929;
	padding-right: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	color: #fff;
	z-index: 1;
  }
     .main{
	height:1000px;
    width: 1000px;
    background-color:#F7E3E3;
	padding-right: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
  z-index: 2;
  }
     .footer-container{
	height:35px;
    width: 1000px;
    background-color: #F2F1F1;
	padding-right: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
  z-index: 3;
  }

     .footer-end{
	height:35px;
    width: 1000px;
    background-color: #bb0700;
	padding-right: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
  z-index: 4;
  }

Open in new window

0
 
Kim WalkerWeb Programmer/TechnicianCommented:
1. Browsers that don't support CSS3 are few and antiquated. I wouldn't worry too much about them.

2. What version of Dreamweaver are you using? What you have described is sounds like Dreamweaver is not colorizing the code properly. I've seen several situations where Dreamweaver was unable to colorize the code properly even thought it was proper code. However, Dreamweaver's inability to properly colorize the code doesn't necessarily mean the code is wrong. Sometimes I can quit and relaunch Dreamweaver it works fine. I'm attaching a screen capture from the latest version of Dreamweaver, Dreamweaver CC 2015.3.Dreamweaver CC 2015.3
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If I can make a suggestion since it sounds like you are starting a new site,.  Try using a responsive library like  http://getbootstrap.com or http://foundation.zurb.com/

The zurb site has better information on it, but for whatever reason, more people (and other plug ins/themes) use bootstrap.

The css and resets are already built in and making columns is as easy as
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Open in new window


The "col-md-4" means if the viewportsi medium or higher, use 4 columns (4 out of 12 is 3). If the screen is smaller, then make those columns into individual rows.  And that makes the data easier to see on a small screen.

You can just use col-xs-4  for everything which will make your site not responsive, because it reads, for extra small screens and above use that size for all.
1
 
MOSTAGHASSIAuthor Commented:
Thanks for all comments,
@kim
Thanks,i use Dreamweaver CC 2015.0 and yes it doesn't coloring the codes,but my problem is this that when i use  the code of:
box-sizing: border-box

then in Dreamweaver CC 2015.0 in design view i see that the my layout change ,so the code affect on layout in design view and when i see i think that everything is not ok until i check it in browser,can you check it in your Dreamweaver CC 2015.3.?
0
 
MOSTAGHASSIAuthor Commented:
I have added the code to .left div and padding left to 20px  and in design view i see that layout change.

      .left{
      box-sizing: border-box;
      float: left;
      height: 110px;
      width: 30%;
      background-color: #F9F9E4;
      padding-top: 0px;
      padding-left: 20px;
      margin-top: 0px;
      margin-right: auto;
      margin-left: auto;
      margin-bottom: 0px;
      
      }
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
I never use design view in Dreamweaver. I don't trust it.
0
 
MOSTAGHASSIAuthor Commented:
Thanks Kim,would you please let me know your ideas about my page layout,is there another basic that i must consider in html and css?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now