Solved

top & bottom margin problem with nested divs

Posted on 2004-08-31
16
465 Views
Last Modified: 2012-08-14
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
Comment
Question by:Kupi
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
16 Comments
 
LVL 2

Expert Comment

by:Epistemo
ID: 11942198
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
 
LVL 3

Author Comment

by:Kupi
ID: 11945679
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
 
LVL 2

Expert Comment

by:Epistemo
ID: 11945787
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
Independent Software Vendors: 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!

 
LVL 31

Expert Comment

by:seanpowell
ID: 11945852
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
 
LVL 3

Author Comment

by:Kupi
ID: 11945966
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
 
LVL 2

Expert Comment

by:Epistemo
ID: 11946012
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
 
LVL 3

Author Comment

by:Kupi
ID: 11946081
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
 
LVL 3

Author Comment

by:Kupi
ID: 11946122
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
 
LVL 2

Expert Comment

by:Epistemo
ID: 11946264
... what browser? Because there are more issues concerning padding then margins.
0
 
LVL 3

Author Comment

by:Kupi
ID: 11946589
Opera, Mozilla, Explorer (from 5.x on)...
0
 
LVL 2

Expert Comment

by:Epistemo
ID: 11949818
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
 
LVL 3

Author Comment

by:Kupi
ID: 11956437
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
 
LVL 3

Author Comment

by:Kupi
ID: 11956450
Notice:

margin: 10px;

just one declaration... same effect!
0
 
LVL 3

Accepted Solution

by:
Kupi earned 0 total points
ID: 11958956
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

Independent Software Vendors: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

688 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