Solved

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

Posted on 2016-07-23
8
73 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 250 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 250 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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

636 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