Solved

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

Posted on 2016-07-23
8
50 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
8 Comments
 
LVL 22

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 21

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
 
LVL 52

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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

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 21

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now