Jump to content
Please Use CODE Tags

Div dimensions not according to css values.

crispybagel
By crispybagel
in Programming
 Share
Posted

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.

View my builds here!
https://pcpartpicker.com/user/Crispybagel/builds/

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

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
Posted

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
Posted

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
Posted

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
Go to topic listing Programming

×