Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2016-07-23
8
Medium Priority
?
78 Views
Last Modified: 2016-07-24
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
Comment
Question by:MOSTAGHASSI
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 23

Accepted Solution

by:
Snarf0001 earned 1000 total points
ID: 41725986
Padding by default adds height to the container.  If you want it the other way, add:

box-sizing: border-box

To the style.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41726005
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
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 1000 total points
ID: 41726099
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 41726121
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
 

Author Comment

by:MOSTAGHASSI
ID: 41726160
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
 

Author Comment

by:MOSTAGHASSI
ID: 41726163
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
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41726183
I never use design view in Dreamweaver. I don't trust it.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41726222
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question