HTML & Div question

Kato

I am working on a website for my final project and I am running in to an issue right now that I can't quite figure out. I have a single div that contains the bulk of the site. Inside of this div is two other divs and I can't figure out how to make those two divs appear to mesh together.

I want the div "topBox" to mesh with the div "mainpage" so that there is no gap in there when the webpage renders.

<div id="pagelayout">
  <div id="topBox">
    blah blah blah
  </div>
  <div id="mainpage">
    blah blah blah
  </div>
</div>

I have a css file where I control the id's for all of the divs. I have tried to set the margin and padding to zero and that just does not seem to get them to mesh so they appear as one. What can I do? I am trying to avoid frames at this point.

admanb

HTML and CSS are messy, so this is tough to answer without seeing the code or the result. Do you have Firebug or similar to inspect the resulting elements to see if it could be inheriting margin or padding from another element?

Don't use frames.

KPC

Yeah, it really depends on your CSS as well as what browser you're using to view your work as you go along.

DrFrylock

Stupid question: have you tried:

<div id="pagelayout">
  <div id="topBox">
    blah blah blah
  </div><div id="mainpage">
    blah blah blah
  </div>
</div>

Like with no space between the divs? That shouldn't matter, but...

Also, it's possible that your CSS is setting margin/padding to something other than 0 via the ID or whatever. You should get DOM Inspector installed and take a look at the DIVs and see what the computed margin/padding are. Alternatively, does this work?

<div style="margin: 0; padding:0" id="pagelayout">
  <div id="topBox">
    blah blah blah
  </div>
  <div style="margin: 0; padding:0" id="mainpage">
    blah blah blah
  </div>
</div>

l3lasphemer69

Have you tried using a table instead of 2 DIVS?

Hakunin

l3lasphemer69 wrote:

Have you tried using a table instead of 2 DIVS?

Hopefully not!

But yeah I suspect it's your browser adding padding and margin to your elements, if you haven't set them to 0 in the CSS

Kato

Thanks guys. I think I found what was causing it...seems I forgot to make the <p> tag to be set with no top margins. Once I did that, everything seems to be coming together the way it should be.

Also...I hate frame, which is why I was trying to avoid using them. That would have been an easy fix, but frames suck these days.

Jimmy King

Hakunin wrote:

l3lasphemer69 wrote:

Have you tried using a table instead of 2 DIVS?

Hopefully not!

But yeah I suspect it's your browser adding padding and margin to your elements, if you haven't set them to 0 in the CSS

Hey, that's a perfectly reasonable suggestion given his name!

I fought with this same thing awhile back on my own website. It was actually the content inside the div causing weirdness for me. I had a tag inside one of the inner divs which had top and bottom margins and was pushing everything out.

So it was like

<div class="container">
  <div class="upper">
      some text
   </div>
   <div class="lower">
     <ul>  <!-- this is the tag that caused trouble and needed 0px top and bottom margins added -->
         <li>list stuff
      </ul>
    </div>
</div>