1. Home
  2. Forums Index
  3. Browser Side / CSS 12:26 pm May 21, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

div with multiple images, remove default "padding-bottom" how?

         

iacha

3:18 am on Oct 28, 2009 (gmt 0)

10+ Year Member



So I have this page/div where I want to have some images to the left and some images to the right. In the middle there should be some text (the title).
Codewise I have this div with 2 other divs inside. 1 div containing the images to the left (using float) and another containing the images to the right.

My problem is that I get some padding or space under the images even though I haven't put it there myself. How do I get rid of this?
Illustration of the problem: <snip>

Here's my code:
CSS:
body,html {
margin:5px 130px 10px 130px;
padding:0;
background:white;
}

div#title {
color:black;
background-color:#FF9933;
clear:both;
min-height:55px;
}

h1.title {
padding:5px;
margin:0;
text-align: center;
font-size: 35px;
}

div#imgsleft {
float:left;
}

div#imgsright {
float:right;
}

img.title {
height:50px;
}

div#menu {
color:white;
background-color:#33CC00;
clear:both;
}

h1.menu {
padding:0;
margin:0;
border:0;
}

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Index</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="title">
<div id="imgsleft">
<img class="title" src="01.png" alt="description" />
<img class="title" src="02.png" alt="description" />
<img class="title" src="03.png" alt="description" />
</div>
<div id="imgsright">
<img class="title" src="04.png" alt="description" />
<img class="title" src="05.png" alt="description" />
<img class="title" src="06.png" alt="description" />
</div>
<h1 class="title">Title</h1>
</div>

<div id="menu">
<h1 class="menu">Header2</h1>
</div>

</body>
</html>

(You could use some of these images: <snip: images are 70px wide by 50px high>

PS: I have read the following links, but I'm still not able to solve my problem:
[developer.mozilla.org...]
[webmasterworld.com...]
<snip>

[edited by: swa66 at 1:42 pm (utc) on Oct. 28, 2009]
[edit reason] Linking policy, please see ToS and Forum Charter [/edit]

D_Blackwell

4:47 am on Oct 28, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome iacha. The personal link is going to get chopped, so I cannot use it as a reference.

The code sample is sufficient to identify multiple issues.

My problem is that I get some padding or space under the images even though I haven't put it there myself.

Well - yes, you did. The problem at hand is to identify how the issue works, and then edit for desired results.
..............................

1) You are specifying images at {height: 50px;} in a <div> declaring {min-height: 55px;}. That is one issue to look at.

Comment out the line:
/*min-height:55px;*/

2) #menu specifies {clear: both;} - You may or may not need to deal with clearing. I am not certain that you do, but have not tested. Nevertheless, the clear is another issue related to the described problem.

Comment out the line:
/*clear:both;*/

3) These two edits will remove the "padding or space under the images" in Firefox, Opera, and IE7,8

4) There is a side effect to /*clear:both;*/

Firefox holds up.

Opera loses the left aligned Header2 text and gives it {text-align: center;}

IE throws in a substantial amount of margin in #menu. You'll need to remove that.

BTW - There is nothing for #title to clear, so {clear: both;} is not needed.

Also: The markup is a little shaky. That padding declaration is a lynchpin and/or weak link. Be careful with it.
h1.title {
padding:5px;

You can hack around with height: and width: of h1.menu, but I would look at the overall structure/design.

D_Blackwell

6:24 am on Oct 28, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think that the following, which should be considered as a sample, not a solution, is a cleaner approach to what I think that you want to do.

Have used the {display: block;} trick/hack on the floated images.

There remains, for me, the question of the declared margin on the body, and the indication that I should use 70px x 50px images to work up a sample. This is a problem, IF this is an accurate description of what you want. I need not do the math, but simply look at the necessary veiwport width to accommodate both. The design works nicely crossbrowser, but is too wide.?

Validated, no gap below images, no space explosion between <div>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
html, body {
margin: 5px 130px 10px 130px;
padding: 0;
}

#title {
color: #000;
background-color: #faebd7;
height: 50px;
}

#img-left img, #img-right img {
width: 70px; height: 50px; display: block;
}

#img-left img {
float: left;
}

#img-right img {
float: right;
}

#title h1 {
text-align: center;
}

h1.menu {
background-color: green;
margin: 0;
}
</style>
</head>
<body>
<div id="title">
<div id="img-left">
<img src="aaa.jpg" alt="description" />
<img src="ddd.gif" alt="description" />
<img src="aaa.jpg" alt="description" />
</div>
<div id="img-right">
<img src="ddd.gif" alt="description" />
<img src="aaa.jpg" alt="description" />
<img src="ddd.gif" alt="description" />
</div>
<div id="title-2">
TITLE
</div>
</div>
<h1 class="menu">Header2</h1>
<!--##########
iacha

So I have this page/div where I want to have some images to the left and some images to the right. In the middle there should be some text (the title).
Codewise I have this div with 2 other divs inside. 1 div containing the images to the left (using float) and another containing the images to the right.

My problem is that I get some padding or space under the images even though I haven't put it there myself. How do I get rid of this?
-->
</body>
</html>

iacha

8:23 pm on Nov 5, 2009 (gmt 0)

10+ Year Member



Thanks D_Blackwell. I have almost achieved what I wanted for my page by looking at the code you gave. However some problems remains. I'll start by giving you my new and better code:

HTML and CSS combined:

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Index</title>
<style type="text/css">
html, body {
margin: 5px 130px 10px 130px;
padding: 0;
}

div#title {
color: #000;
background-color: #faebd7;
height: 50px;
}

h1#title {
padding:5px;
margin:0;
text-align: center;
font-size: 35px;
}

#imgsleft img, #imgsright img {
height: 50px; display: block;
}

#imgsleft img {
float: left;
}

#imgsright img {
float: right;
}

div#menu {
color:white;
background-color:#33CC00;
}

h1#menu {
margin: 0;
}
</style>
</head>

<body>
<div id="title">
<div id="imgsleft">
<img src="01.png" alt="description" title="description" />
<img src="02.png" alt="description" title="description" />
<img src="03.png" alt="description" title="description" />
</div>
<div id="imgsright">
<img src="04.png" alt="description" title="description" />
<img src="05.png" alt="description" title="description" />
<img src="06.png" alt="description" title="description" />
</div>
<h1 id="title">Title</h1>
</div>

<div id="menu">
<h1 id="menu">Header2</h1>
</div>

</body>
</html>

The update/change in code has brought up a new - although smaller - problem. Image 04, 05, 06 which should be at the right - they are - but not only that; they should also be presented in that order. But they aren't, they are ordered like this: 06, 05, 04. Now, I know that I could just change their position in the html code and move them around so the top one became the 06, but I don't really like that. So: Is it possible to get the images to the right ordered in my desired order; 04, 05, 06 without changing their order in the html code? probably by using CSS? how?

[edit reason] Linking policy, please see ToS and Forum Charter [/edit]

Sorry. I did read both of them, but didn't notice that I guess. I have now read them again.
Regarding the screenshot I had taken of how the code looked in my browser, with an arrow pointing at the problem, and uploaded to a imagehosting service (the most wellknown, not a private one of mine) I guess that you don't allow those because the image might disappear from the service at some point.

Also: The markup is a little shaky. That padding declaration is a lynchpin and/or weak link. Be careful with it.
h1.title {
padding:5px;

You can hack around with height: and width: of h1.menu, but I would look at the overall structure/design.


Hmm I'm not sure what to do. I use that padding to vertically align the headline.

the indication that I should use 70px x 50px images to work up a sample

Well, really I just want the max 50px height as a rule in my code, but I also gave you a width that your images you used for test should be. I gave you 70 because that is the width my images get after they have been scaled in height. It was to be sure that you didn't use some say panorama images to the test...

D_Blackwell

4:48 am on Nov 6, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This is a hack. First question is why? Dynamic insertion?

At any rate, comment out:

/*****#imgsleft img, #imgsright img {
height: 50px; display: block;
}

#imgsleft img {
float: left;
}

#imgsright img {
float: right;
} */

Replace with:

#imgsleft img {
height: 50px; display: block;
}

#imgsleft img {
float: left;
}

#imgsright {
text-align: right;
}

#imgsright img {
height: 50px;
}

That takes care of the images. They are flush right, in the order 4, 5, 6 and stands up in FF, Opera, IE7

However, this blows up Title, because it cannot float up between the images to the left and right. It gets pushed down.

Edit h1#title to: margin-top: -1.5em;

That will push it up nicely. Perfect in IE7, but busted to the right in Firefox and Opera. No surprise.

Edit h1#title to: margin-right: 170px;

That will center it pretty nicely in FF and Opera, but now we have to fix IE.

Add a conditional comment just before closing </head>

<!--[if (IE 7) ¦ (IE8)]>
<style type="text/css" media="all">
h1#title {
margin-right: 0;
}
</style>
<![endif]-->
</head>

This will direct IE 7 and 8 to ignore the manuever made for FF and Opera. Now all look fine.

Nasty hacking though. I would revisit the design. Zooming will cause big problems. These days, designs that don't zoom are doomed. IE handles it best, but FF and Opera explode.

swa66

11:59 am on Nov 6, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Why so complex ?

First off the code in #4019916 above uses multiple times the same id: that's a no-no.

Since you can target the <h1> through their parent, there's also no need to give them a class or id that I can see.

Your design also falls on it's face when the browser is relatively narrow (it all depends on how long that title is.

Let's see if making ti simple can't solve it.

I'd consider merge those 6 images in 2, but if they are used elsewhere as well that might be suboptimal. So let's not do that for now.

What I'd do is:
- float the images (do you don't get the whitespace in between the inline images) all to the left.
- float the image containers left and right
- make the title expand should the text be larger and flip to multiple lines (and remove the fixed height).

Giving something like: 


<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Index</title>
    <style type="text/css">
      html, body {
        margin: 5px 130px 10px 130px;
        padding: 0;
      }
      div#title {
        color: #000;
        background-color: #faebd7;
        overflow: auto;
      }
      #title h1 {
        padding:5px;
        margin:0;
        text-align: center;
        font-size: 35px;
      }
      #title img {
        height: 50px;
        display: block;
        width: 70px;
        float: left;
      }
      #imgsleft {
        float: left;
      }
      #imgsright {
        float: right;
      }
      div#menu {
        color:white;
        background-color:#33CC00;
      }
      #menu h1 {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="title">
      <div id="imgsleft">
        <img src="01.png" alt="description" title="description" />
        <img src="02.png" alt="description" title="description" />
        <img src="03.png" alt="description" title="description" />
      </div>
      <div id="imgsright">
        <img src="04.png" alt="description" title="description" />
        <img src="05.png" alt="description" title="description" />
        <img src="06.png" alt="description" title="description" />
      </div>
      <h1>Title</h1>
    </div>
    <div id="menu">
      <h1>Header2</h1>
    </div>
  </body>
</html>


A min-width might make a lot of sense.

Only bothered with trying it in FF, leaving the rest as an exercise.

swa66

12:02 pm on Nov 6, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



130px margins on html and body are huge ...

iacha

3:51 pm on Nov 7, 2009 (gmt 0)

10+ Year Member



Me:
Image 04, 05, 06 (...) should also be presented in that order.
D_Blackwell:
First question is why? Dynamic insertion?
swa66:
Why so complex ? (...) I'd consider merge those 6 images in 2 (...)
Well I'm not sure what you mean about dynamic insertion, but I'm pretty sure the answer to that is no. Regarding me wanting the images to be presented in that order is because it to me "does matter" what's on those images and they are supposed to be presented in that order and as I said in the previous post I don't like to have to write them in the reverse order in my html because the css code reverses the order of them.
But as you can see in the code I posted in #:4019916 (my mistake I didn't in my first post) I want a "title" - a little descriptive text - to appear when you hover the images, and it is supposed to be a individual title on each image (again sorry for that not being clear in my example code). Therefore I can't merge the 6 images into 2 as that would only allow me to have 2 different title descriptions.

D_Blackwell:

Nasty hacking though. I would revisit the design. Zooming will cause big problems. These days, designs that don't zoom are doomed. IE handles it best, but FF and Opera explode.
swa66:
Your design also falls on it's face when the browser is relatively narrow (it all depends on how long that title is.
Well let me clear up something. I'm not experienced in coding advanced html and css. The way I have been thinking when I have written my code was that I didn't want it to be designed by using tables, but css instead. Turns out it is a bit more difficult to do the same thing in css as it would have been to do it in tables. I really would like a design which zoomed well and so on. A liquid design I think that is called? That is also why I have used padding instead of declaring width on my divs and why I haven't used the height property a lot...

swa66's fix seems to be the best as D_Blackwell's when I implement it writes "<!--[if (IE 7) ¦ (IE8)]>" in the top of the page above the header (in IE8, not in FF). Also using that "text-align: right;" code seems to create some padding on the side of the images to the right. Further: using text-align code on images doesn't sound right? But I guess if it would have worked properly then it didn't matter.
And also I don't like having to give all sorts of different conditional comments and design code to different browsers.

swa66:

Since you can target the <h1> through their parent, there's also no need to give them a class or id that I can see.(...)[+ you can use:]

#title img {
height: 50px;
display: block;
width: 70px;
float: left;
}
#imgsleft {
float: left;
}
#imgsright {
float: right;
}

Nice! very interesting. It let me to find out apart from the solution you propose above which also works, I can also just use:
#imgsleft img, #imgsright img {
height: 50px; display: block; float: left;
}

#imgsleft {
float: left;
}

#imgsright {
float: right;
}

Comment to some other parts of your replies:
swa66: in your code to the div#title you have put in "overflow: auto;" in exchange of "height: 50px;". While I can see why you have put this in: because it makes the page look nice when it is zoomed, the top div is expanded to still contain the contents instead of the contents just appearing outside of it = I also like this behavior better, it also brings back an old problem. It adds back the padding-bottom under the images in the header (although it is a small padding, it is there). Would there be any way to have this "overflow: auto;" in the code, but not have that default padding-bottom?

First off the code in #4019916 above uses multiple times the same id: that's a no-no.
Well yeah sorry. It seems that I don't have that error in the code I have saved, but I didn't fix/notice it when posting the code here in my last post.

What I'd do is:
- float the images (do you don't get the whitespace in between the inline images[?]) all to the left.
Do you mean space/padding below the images? Well I get nothing with the code posted in my previous comment (which was made on the basis of D_Blackwell's comments), but as said (in my comment two paragraphs prior) if I use that "overflow: auto;" of yours, then yes I'll get that padding under the images.

Lastly: Is it IE(8)'s general zoom behavior not to remain showing the page from the top, but instead show you the middle of the page and not the header at all = you having to scroll up if you want to see the header? I don't like that behavior. Firefox handles that better I think.

My new code:

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Index</title>
<style type="text/css">
html, body {
margin: 5px 130px 10px 130px;
padding: 0;
}

div#title {
color: #000;
background-color: #faebd7;
height: 50px; <!-- or overflow: auto; if padding-bottom-bug is fixed -->
}

#title h1 {
padding:5px;
margin:0;
text-align: center;
font-size: 35px;
}

#imgsleft img, #imgsright img {
height: 50px; display: block; float: left;
}

#imgsleft {
float: left;
}

#imgsright {
float: right;
}

div#menu {
color:white;
background-color:#33CC00;
}

#menu h1 {
margin: 0;
}
</style>
</head>

<body>
<div id="title">
<div id="imgsleft">
<img src="01.png" alt="description01" title="description01" />
<img src="02.png" alt="description02" title="description02" />
<img src="03.png" alt="description03" title="description03" />
</div>
<div id="imgsright">
<img src="04.png" alt="description04" title="description04" />
<img src="05.png" alt="description05" title="description05" />
<img src="06.png" alt="description06" title="description06" />
</div>
<h1>Title</h1>
</div>

<div id="menu">
<h1>Header2</h1>
</div>

</body>
</html>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 12:26 pm May 21, 2026