/    Sign up×
Community /Pin to ProfileBookmark

Lost padding!

Copy linkTweet thisAlerts:
Jul 16.2011

Hi,

I tried the following in IE8 and the latest versions of Firefox and Opera:

[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title></title>
<style type=”text/css”>
div
{
background-color:#00FFFF;
width:300px;
height:82px;
overflow:auto;
white-space:nowrap;
padding:0 20px;
}
</style>
</head>

<body>

<div>
<img src=”http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg” alt=””>
<img src=”http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg” alt=””>
<img src=”http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg” alt=””>
<img src=”http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg” alt=””>
<img src=”http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg” alt=””>
<img src=”http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg” alt=””>
</div>

</body>
</html>[/CODE]

There’s no padding on the right. What am I missing?

Many thanks in advance!
Mike

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Cory_RJul 16.2011 — &lt;div style="width: 20px; display: inline-block"&gt;&lt;/div&gt;It's caused by the white-space, putting that after all the images acts as 20px of padding.
Copy linkTweet thisAlerts:
@WebJoelJul 24.2011 — Do you mean to say add:

[B]<div style="width: 20px; display: inline-block"></div>[/B]

after [I]EACH image[/I]? Superfluous use of content elements for pure design is a waste of code, and is code bloat.

Why not give the DIV that contains the target images a "class" like :

<div [B]class="imageContainer"[/B]>

and then, STYLE accordingly:

[B].imageContainer IMG {padding-right:20px;}[/B]

This does the exact same thing and later if more IMG are added (or, REMOVED!) they receive (or have removed) the desired padding-right of 20px.
Copy linkTweet thisAlerts:
@Rain_LoverauthorJul 24.2011 — Why not give the DIV that contains the target images a "class" like :

<div [B]class="imageContainer"[/B]>

and then, STYLE accordingly:

[B].imageContainer IMG {padding-right:20px;}[/B]

This does the exact same thing and later if more IMG are added (or, REMOVED!) they receive (or have removed) the desired padding-right of 20px.[/QUOTE]

It creates too much space between images. A 5px space is ideal for me, and of course 20px at the end.
Copy linkTweet thisAlerts:
@Cory_RJul 25.2011 — I meant add the DIV after all the images, since the padding is only being unaffected on the right. Though, now that I think about it, a span would be better since Rain Lover is using the element name 'div' to style the DIVs.
×

Success!

Help @Rain_Lover spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...