Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 474
  • Last Modified:

top & bottom margin problem with nested divs

Hi Experts!

I'm creating my website layout using CSS, I want it to look like a standard 3 columns portal with graphic modules inside. Each module is composed by 3 different parts (divs):

- top: the module title
- mid:the module content
- bot: the module bottom (background-image)

I need compatibility with new and old browsers (NS, Opera, IE 5.01, 5.5, 6...), so I avoid borders and just use background-images. The mid divs have a different left & right padding that allows their content not to overlap the graphic left & right borders.

All seemed to be ok but when I tried to put some content inside my modules I noticed a strange behavior with elements having top & bottom margins > 0. You can find my layout here:

http://www.kupido.net/bug

In this demo template you can see what I mean (I used different colors to evidence different behaviors):

- the first left module (gray) shows my problem, the mid div is far from both the top div and the bot div because of the top & bottom margins of its content; the second is the same situation but without margins; this is how I'd like every module to be so, if possible, please find a solution here!!
- in the center modules (red) the mid div has 1px padding on each side (plus the left & right padding), this partially solves my problem (not with IE 5.01) but doing this I have a 1px frame around the content... and I don't like it!
- in the right modules (blue) I use paddings instead of margins and this solves the problem... but this requires nested divs.

Since I need to put into some modules a series of elements having the same distance on each side, I'd prefer to use margins instead of paddings... they will merge and I won't need to specify different paddings!

Please tell me that there's a way to workaround this!!

Kupi
0
Kupi
Asked:
Kupi
  • 8
  • 5
1 Solution
 
EpistemoCommented:
The surounding div .... ad :  "overflow:hidden" to the styles, but I noticed that you diod some of that.

And after ending the surounding div ... insert the folowing.
<div style="clear:both"></div>
This sometimes resolves the problem with div's not connecting.

----
See this in your top grey block?
<div style="margin: 10px; background-color: #AAA;">

The margin will go around your text! And so push the whole thing down 10px. and leave 10px on the bottom too, thus the top and bottom div's won't connect.
Change it to:

<div style="margin-right: 10px; margin-left:10px; background-color: #AAA;">
----
The padding = margin issue ... I agree ... when you use box models this could be a nightmare in certain browsers.
Give it a try ...
0
 
KupiAuthor Commented:
Epistemo, I tried what you suggested but it didn't work...

Here is a screenshot of what I EXACTLY NEED and of what I ABSOLUTELY DON'T WANT:

http://www.kupido.net/bug/sample.jpg

I'm able to do this using paddings and nested divs... what I really need is to get the same result using margins!!
0
 
EpistemoCommented:
IF you want to use margins then remember this:

Padding is on the inside of the div. Margin is on the outside.
So by putting another div inside the div ... and have this new div do the margins, it should take care of the issue.

 ----------------------
|   ORIGINAL         |
|   --------------     |
|  | new one   |    |      
|  | w margin  |    |
|  |                 |   |
|  ---------------    |
|                         |
----------------------
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
seanpowellCommented:
Hi Kupi,

What you need to do here is add the padding to the container, not the margin to the containee, like this:

div#left div.module div.mid {
      padding: 10px 12px 10px 18px;
      background-image: url('images/modules/left/mid.gif');
      background-repeat: repeat-y;
}

and then:

<div class="mid">
<div style="padding:2px; background-color: #AAA;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam posuere nunc vitae diam. Praesent augue augue, imperdiet laoreet, congue at, feugiat ut, metus. Mauris interdum orci vitae libero. Nunc convallis tellus facilisis justo. Praesent quis enim ac lectus aliquet faucibus. Vivamus libero leo, auctor sit amet, tempus eget, euismod vel, sem. In hac habitasse platea dictumst. Duis magna nisl, elementum non, laoreet a, mattis vel, justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam est. Mauris tincidunt semper nulla. Pellentesque a enim.</div>
</div>

Thanks,
Sean
0
 
KupiAuthor Commented:
Not always... take a look at this:

---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<title>Test</title>

</head>

<body>

<h2>Margin<h2>

<div style="width: 200px;">
  <div style="overflow: hidden; background-color: #AAA; height: 10px;"></div>
  <div style="background-color: #CCC;">
    <div style="margin: 10px; background-color: #000; height: 100px;"></div>
  </div>
  <div style="overflow: hidden; background-color: #AAA; height: 10px;"></div>
</div>

<h2>Padding<h2>

<div style="width: 200px;">
  <div style="overflow: hidden; background-color: #AAA; height: 10px;"></div>
  <div style="background-color: #CCC;">
    <div style="padding: 10px;">
      <div style="background-color: #000; height: 100px;"></div>
    </div>
  </div>
  <div style="overflow: hidden; background-color: #AAA; height: 10px;"></div>
</div>

</body>

</html>
---
0
 
EpistemoCommented:
Like I said ... div within a div ... both seanpowell and kipu do it different ways but with the same effect.
You should have enough info now ... lol
0
 
KupiAuthor Commented:
Hi seanpowell,
using padding instead of margin wouldn't be a solution because I need to put more than one block into a module and I need all these blocks to have the same distance, like this:
_____________
|  _________   |
|  |              |  |
|  |________|  |
|  _________   |
|  |              |  |
|  |________|  |
|  _________   |
|  |              |  |
|  |________|  |
|____________|

Using padding I'd have to define a class for the first block container with "padding: 10px 10px 5px 10px;", one for the last block with "padding: 5px 10px 10px 10px;" and one for all the other blocks with "padding: 5px 10px 5px 10px;".

Instead I could define just one class with "margin: 10px;" because margins will merge...
0
 
KupiAuthor Commented:
Epistemo, both you and seanpowell told me to use padding, but if you read my question you'll find I said I'm able to solve the problem using padding and nested divs... but what I need is to understand why margins mess up my modules and workaround the problem using MARGINS... if possible!

Kupi
0
 
EpistemoCommented:
... what browser? Because there are more issues concerning padding then margins.
0
 
KupiAuthor Commented:
Opera, Mozilla, Explorer (from 5.x on)...
0
 
EpistemoCommented:
Not padding ... margins are easier I think.
See example.

css style

<style>
#leftside {width:200px; background:#f00;float:left;text-align:left; color:f00;}
#collumn1, #collumn2, #collumn3 {width:180px; margin-left: 10px; background:#ff0; color:#000; margin-bottom:10px;}
</style>

then

<div id="leftside">
<div id="collumn1">
insert anything you like including another div if needed.
</div>
<div id="collumn2">
insert anything you like including another div if needed.
</div>
<div id="collumn2">
insert anything you like including another div if needed.
</div>
</div>

That's what you mean, right?
0
 
KupiAuthor Commented:
Not right... look:

div#box {
  width: 200px;
  background-color: #F00;
}

div.top, div.bot {
  overflow: hidden;
  background-color: #CCC;
  height: 5px;
}

div.block {
  margin: 10px;
  background-color: #FF0;
  color:#000;
  height: 40px;
}

<div id="box">
  <div class="top"></div>

  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>

  <div class="bot"></div>
</div>

This is not ok because my "block" divs are contained into a "mid" div that has a background-image... if you add a surrounding div you'll see what I mean:

<div id="box">
  <div class="top"></div>

  <div style="background-color: #000;">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>

  <div class="bot"></div>
</div>

This strange behavior is my problem!
0
 
KupiAuthor Commented:
Notice:

margin: 10px;

just one declaration... same effect!
0
 
KupiAuthor Commented:
Testing and testing I found a solution... but I don't think it's very nice:

div.box {
    width: 200px;
}

div.top {
    overflow: hidden;
    background-color: #888;
    height: 10px;
}

div.mid {
    float: left;
    background-color: #BBB;
    width: 200px;
}

div.bot {
    overflow: hidden;
    clear: both;
    background-color: #888;
    height: 10px;
}

div.block {
    margin: 10px;
    background-color: #DDD;
    height: 50px;
}

<div class="box">
    <div class="top"></div>
    <div class="mid">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="bot"></div>
</div>

I gave the "mid" div a fixed width (= box width) and made it float to the left, then I cleared floating in the "bot" div... this works ok on IE 5.01, 5.5, 6, Opera 7.23 and Mozilla 1.7!

I'd like to know what do you think about this workaround... is it so bad? Does it work on other browsers I didn't mention?

If you know a better way to do the same thing (still using margins)... please let me know!!

Kupi
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 8
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now