Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Div dimensions not according to css values.

crispybagel
 Share

So i got a div to contain my top banner, some media icon links and a taskbar with a few links. The problem is that i got another div beneath this one thats supposed to have its top edge aligned with the bottom edge of the first div. its height is set to 270px in css but when i checked in chrome F12 it said 274.4px, which makes a gap between the two divs? anyone knows what might be the problem? heres the code.

 

CSS:

#TopBannerDiv {
  width: 100%;
  height: 270px;
  background-color: black;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  position: static;
#Midsection {
  margin-left: auto;
  margin-right: auto;
  background-color: #545454;
  width: 60%;
  height: 1270px;
  z-index: 2;
  position:relative;

the midsection is the second div which should align edge to edge with the topbannerdiv.

Link to comment
Share on other sites

Link to post
Share on other sites

First off, I don't see the full code. Having the HTML (or whatever) included, would be nice. You are also missing the } in your CSS.

 

Trying to replicate your issue atm.

Link to comment
Share on other sites

Link to post
Share on other sites

Could not replicate your issue. I've put the CSS inside the HTM file, because I am lazy and don't know of the top of my head the code for external .css files.

 

Code I used:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test 1</title>

<style type="text/css">
div.TopBannerDiv {
  width: 100%;
  height: 270px;
  background-color: black;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  position: static;
  color: white;
}

div.Midsection {
  margin-left: auto;
  margin-right: auto;
  background-color: #545454;
  width: 60%;
  height: 1270px;
  z-index: 2;
  position:relative;
}

</style>

</head>

<body>

<div class="TopBannerDiv">Test 1
</div>

<div class="Midsection">Test 2
</div>

</body>

</html>

This got me the following page on firefox 43.0.1 (or whatever):

Naamloos1.png.e47b0bfff8c7512b94c66f7d5b60d89d.png

*PS: rocking an 1280x1024 monitor, cut away other open browser crap thingies, no resizing done to the page (CTRL+scroll wheel) and added a line in the CSS to make the first "test" message apear white.

 

*EDIT: PS-2: Still rocking Frontpage 2003 to create the basic layout of the html code.

Link to comment
Share on other sites

Link to post
Share on other sites

Well, not going to edit again, but you could test the code in several test webpages. One you could use is this one: https://www.w3schools.com/css/tryit.asp?filename=trycss_color

 

Replace all the text in the left window, paste in my code and be amazed.

 

(there are better sites to test/tinker with code)

Link to comment
Share on other sites

Link to post
Share on other sites

It's probably a body padding/margin issue. Hard to tell without your HTML as well. Just add

 

html, body{
    margin: 0;
    padding: 0;
}

And see if that fixes it for you

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share


×